将输入字段的值复制到多个隐藏字段...但具有相同的ID？

Question

1）我有3个输入单选按钮，具有唯一值。
例如，

<input type="radio" id="id1" value="This is first value" /> 
<input type="radio" id="id2" value="This is second value" /> 
<input type="radio" id="id3" value="This is third value" /> 

2）接着，我有2个隐藏的表单是这样的：基于取其单选按钮用户点击

<form action="//mysite.com/process1.php"><input type="hidden" id="uniqueid" value=""></form> 

<form action="//mysite.php/process2.php"><input type="hidden" id="uniqueid" value=""></form> 

3），我需要它的值复制到的两者的值上面形成隐藏字段。

例如，如果用户使用id1单击收音机，则应将值“这是第一个值”复制到两个表单隐藏字段中。

CONSTRAINTS：
1）有无使用JavaScript或jquery的，没有可用的服务器侧处理。
2）注意：最终形式都有一个输入字段，但具有相同的ID。这是一个限制。
3）为什么？由于基于页面上的其他一些操作，用户可以看到两种形式之一。他们之间唯一的区别是他们的行为是独一无二的。所有字段都是一样的。

是我到目前为止有：
利用这一点，我能值从单选按钮复制到一个隐藏字段的值，但它只是复制到一个领域一个唯一的ID。

var $unique = $("#unique"); 
$("#radio1").keyup(function() { 
$unique.val(this.value); 
}); 
$("#email").blur(function() { 
$unique.val(this.value); 
}); 

有人可以指导如何将值复制到多个输入字段，但具有相同的ID？
（是，初始单选按钮的ID可以是唯一的。）

Answer 1

具有两个具有相同ID的HTML元素是错误的。

您不能将此视为约束，这不是一个有效的HTML代码，它会导致不同浏览器中的行为不一致。

使用类来代替：

<form action="//mysite.com/process1.php"><input type="hidden" class="uniqueid" value=""></form> 

<form action="//mysite.php/process2.php"><input type="hidden" class="uniqueid" value=""></form> 

和Javascript：

var $unique = $(".uniqueid"); 

但是，我找不到任何#radio1或#email在你的代码，你确定你有正确的选择？

我对JS的建议是：（Working jsFiddle）

var $unique = $(".uniqueid"); 
$('input[type="radio"]').click(function(){ 
    $unique.val(this.value); 
}); 

须知的jsfiddle：

• 我用来代替KEYUP click事件（真的不理解你为什么在这里使用keyup ..）。
• 我给了所有的单选按钮相同的名称，所以他们将相互取消选择时。
• 我已将隐藏的字段变为文本，以便您可以看到结果。

Answer 2

<form action="//mysite.com/process1.php"><input type="hidden" class="uniqueid" id="uniqueid" value=""></form> 

<form action="//mysite.php/process2.php"><input type="hidden" class="uniqueid" id="uniqueid" value=""></form> 

var $unique = $("input[type=hidden].uniqueid"); 
$("#radio1").keyup(function() { 
    $unique.val(this.value); 
}); 
$("#email").blur(function() { 
    $unique.val(this.value); 
}); 

Answer 3

至于说其他人，id必须是唯一的。尝试使用data-attribute：

<form action="//mysite.com/process1.php"> 
<input type="hidden" data-shouldupdate="true" value=""> 
</form> 
<form action="//mysite.php/process2.php"> 
<input type="hidden" data-shouldupdate="true" value=""> 
</form> 

现在你可以使用该属性作为选择做这样的事情：

$('[data-shouldupdate]').val(this.value); 

Answer 4

我同意与其他所有谁张贴id必须是唯一的，具有正确的HTML文档。因此，如果可能的话，我强烈建议您修复HTML文档以删除所有重复项。

我只为由于某种原因无法删除ID重复的情况编写我的答案并且您仍然具有相同的要求。在这种情况下，你应该改变行

var $unique = $("#uniqueid"); 

到

var $unique = $("*[id=uniqueid]"); 

的选择*[id=uniqueid]（或只是[id=uniqueid]）慢腾腾的#uniqueid，但它可以让你得到所有元素与指定id属性值。所以即使在HTML页面上有重复的id也可以工作。

Answer 5

最简单的解决方案是给两个输入同名。查看这个链接jsfiddle看到一个工作的例子。所使用的代码是给出的一个低于： HTML：

<input type="radio" name="copiedValue" id="id1" value="This is first value" /> 
<input type="radio" name="copiedValue" id="id2" value="This is second value" /> 
<input type="radio" name="copiedValue" id="id3" value="This is third value" /> 

<form action="//mysite.com/process1.php"><input name="uniqueid" id="uniqueid" value=""></form> 
<form action="//mysite.php/process2.php"><input name="uniqueid" id="uniqueid" value=""></form> 

的jQuery/JavaScript的：

$("input:radio[name=copiedValue]").click(function() { 
    $("input[name=uniqueid]").val($(this).val()); 
}); 

的单选按钮应具有相同的名称。我删除了类型=“隐藏”，所以你可以看到它正常工作。

希望它有用！