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

时间:2014-08-31 12:41:02

标签: javascript jquery html forms

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)接下来,我有两个隐藏的形式:

<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的无线电,那么它的值“这是第一个值”应该被复制到两个表格隐藏字段。

约束:
1)必须使用javascript或jquery,不提供服务器端处理 2)注意:最终形式都有一个输入字段,但ID相同。这是一个约束 3)为什么?因为基于页面上的一些其他操作,用户可以看到2个表单中的一个。他们之间的唯一区别是他们的行动是独一无二的。所有字段都相同。

我有多远:
使用它,我可以将单选按钮中的值复制到隐藏字段的值,但它只复制到具有唯一ID的字段。

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

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

5 个答案:

答案 0 :(得分: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的注释:

  • 我使用了click事件而不是keyup(不太明白为什么你在这里使用了keyup。)。
  • 我给所有单选按钮指定了相同名称,以便在选中时相互取消。
  • 我已将隐藏字段转换为文字,以便您可以看到结果。

答案 1 :(得分:0)

<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);
});

答案 2 :(得分:0)

正如其他人所说,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);

答案 3 :(得分:0)

我同意发布的所有其他人id必须是唯一才能拥有正确的HTML文档。因此,如果可能,我严格建议您修复HTML文档以删除所有重复项。

我的回答仅针对因为某种原因而无法删除id重复的情况并且您仍然具有相同的要求。在这种情况下,你应该改变行

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

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

选择器*[id=uniqueid](或仅[id=uniqueid])作为#uniqueid缓慢运行,但它允许您使用指定的{{1}获取所有元素属性值。因此,即使HTML页面上存在id重复项,它也能正常工作。

答案 4 :(得分:0)

最简单的解决方案是为两个输入指定相同的名称。请查看此链接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());
});

单选按钮应具有相同的名称。我删除了type =“hidden”,所以你可以看到它正常工作。

希望它有用!