将一个表单的值复制到第二个表单的隐藏字段中 [英] Copy value of one form into the hidden field of a second form
问题描述
我有一个包含多个表单的页面，但是所有表单都需要采用产品表单中单选按钮的值.下面是我的表单的简化版本，它们都在同一页面上.
I have a page with multiple forms, however all forms need to take the value of a radio button in the products form. Below is a simplified version of my forms which are all on the same page.
<form name="products" method="post" action="" />
<input id="prod_name" name="prod_name" type="radio" value="Product 1" checked />
<input id="prod_name" name="prod_name" type="radio" value="Product 2" />
</form>
<form name="delivery_method1" method="post" action="" />
<input type="hidden" id="item_name" name="item_name" value=""/>
<input type="image" name="submit" value="submit">
</form>
<form name="delivery_method2" method="post" action="" />
<input type="hidden" id="item_name" name="item_name" value=""/>
<input type="image" name="submit" value="submit">
</form>
我知道我应该能够使用 JavaScript 将prod_name"的值复制到item_name"的隐藏字段中，但是我尝试了许多解决方案，但都没有奏效.
I understand I should be able to copy the value of "prod_name" into the hidden field of "item_name" using JavaScript however I have tried a number of solutions but they haven't worked.
我对 JavaScript 的了解很少，所以如果有人能向我提供完整的函数以及如何从表单中执行该函数的详细信息，我将不胜感激.
I have very little JavaScript knowledge so I would appreciate if someone could provide me with a full function and details of how the function is actioned from within the form.
推荐答案
ID 属性应该唯一.如果您不需要它们，请删除它们.如果您使用 id=... 进行样式设置，请将所有出现的 id= 替换为 class=，并替换尖锐的 (#) 在 CSS 中用一个点表示.
ID attributes should be unique. If you don't need them, remove these. If you're using id=... for styling purposes, replace all occurences of id= by class=, and replace the sharp (#) in the CSS by a dot.
提交表单时，仅发送具有 name 属性的元素.
这应该有效:
When a form is submitted, only elements with a name attribute are sent.
This should work:
....
<script>
function fill(value) {
var forms = document.forms;
for (var i = 0; i < forms.length; i++) {
if (forms[i].item_name) forms[i].item_name.value = value;
}
}
</script>
</head>
<body>
...
<form name="products" method="post" action="">
<input onchange="fill(this.value)" name="prod_name" type="radio" value="Product 1" checked />
<input onchange="fill(this.value)" name="prod_name" type="radio" value="Product 2" />
</form>
...
所有表单元素都可以通过 form 元素中的名称访问.所有表单都可以通过 document.forms 对象访问(通过名称或它们在文档中的索引).
All form elements are accessible through their name at the form element. All forms are accessible (by name or by their index in the document) through the document.forms object.
当单选选择改变时，函数 fill() 被调用，将 this.value 作为参数传递.从单选输入元素的上下文来看，this.value 指向单选元素的值.
When the radio selection changes, function fill() is called, passing this.value as an argument. From the context of the radio input elements, this.value points to the value of the radio element.
然后，我们遍历文档中的所有表单.如果 item_name 是表单中的一个元素，则更新该值.
Then, we loop through all forms in the document. If item_name is an element in the form, the value is updated.
这篇关于将一个表单的值复制到第二个表单的隐藏字段中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
