將輸入字段的值複製到多個隱藏字段...但具有相同的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()); 
}); 

的單選按鈕應具有相同的名稱。我刪除了類型=「隱藏」，所以你可以看到它正常工作。

希望它有用！