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

标签 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)接下来,我有 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)为什么?因为根据页面上的一些其他操作,用户可以看到两种表单之一。他们之间唯一的区别是他们的行动是独特的。所有字段都相同。

到目前为止我所拥有的:
使用此功能,我可以将单选按钮中的值复制到隐藏字段的值,但它只能复制到具有唯一 ID 的字段。

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

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

最佳答案

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

您不能将此视为约束,这不是有效的 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(不太明白为什么你在这里使用 keyup..)。
  • 我为所有单选按钮指定了相同的名称,这样它们在被选中时就会相互抵消。
  • 我已将隐藏字段转换为文本,以便您可以看到结果。

关于javascript - 将输入字段的值复制到多个隐藏字段...但具有相同的 ID?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25592078/

相关文章:

javascript - NodeJS Tic Tac Toe 多人游戏

javascript - 在 JavaScript 中同步模糊和点击事件

javascript - 提交前的图像预览在 IE 9 和 Safari 5.x 中不起作用

javascript - jQuery Accordion 在折叠内容中加载时获得最小高度

javascript - 使用背景覆盖 react 添加/删除和切换侧边栏类

javascript - 如何自定义iframe右键弹窗

javascript - 隔离范围变量在链接函数内未定义

javascript - 从同一页面加载具有单击功能的 div 并替换为已加载的其他 div

html - 当我滚动时,页脚 <div> 不会停留在页面底部 - CSS 和 HTML

html - SVG 悬停时旋转虚线圆圈边框