HTML FORMS - 将值传递到同一页面上的两个不同表单

时间:2016-03-08 01:51:41

标签: javascript php jquery html forms

我在尝试将值传递到同一页面上的两个不同表单时遇到问题。该页面填充了16个单选按钮(出于显示原因我已经变成了框),它们都保存了一个值(例如001)。两个表单作业都以某种方式获取活动/选定的单选按钮值并将其发布到PHP文件,以便可以进行数据库更改。我使用锚来传递JavaScript提交功能,而不是提交按钮。我试过了 这两种形式都覆盖了整个页面,但仍然没有运气。

我会在下面发布一些代码来帮助您理解。

PS。如果您需要更多代码来理解,我可以将其发布到pastebin。

<li>
<form id="form_ready" method="post" action="../backend/screen.php">
    <input type="hidden" name="screenid" value="" />
    <input type="hidden" name="status" value="" />
    <input type="hidden" name="pickupid" value="document.activeElement.value;" />
    <a onclick="document.getElementById('form_ready').submit();">READY</a>
</form>
</li>
<li>
<form id="form_c" method="post" action="../backend/screen.php">
    <input type="hidden" name="status" value="" /> 
    <input type="hidden" name="pickupid" value="document.activeElement.value;" />
    <a onclick="document.getElementById('form_c').submit();">COLLECTED</a>
</form>
</li>
</ul>

<div id="content">
<div id="container">
<div id="table">
    <div id="tr1">
    <div id="td1">
        <input type="radio" name="pickup" id="1" value="001" />
        <label for="1"> <span>001</span> </label>
    </div>
    <div id="td2">
        <input type="radio" name="pickup" id="2" value="002" />
        <label for="2"> <span>002</span> </label>
    </div>
    <div id="td3">
        <input type="radio" name="pickup" id="3" value="003" />
        <label for="3"> <span>003</span> </label>
    </div>
    <div id="td4">
        <input type="radio" name="pickup" id="4" value="004" />
        <label for="4"> <span>004</span> </label>
    </div>

1 个答案:

答案 0 :(得分:0)

要回答评论中的建议并仅使用一个表单,以下是如何从所选单选按钮中获取值:

var inputs = document.getElementsByTagName('input');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
  if (inputs[i].checked) valueSelected = inputs[i].value;
}

valueSelected将包含所选广播的值。

如果您出于某种原因需要将类型缩减为“radio”,则可以在for循环中使用inputs[i]['type'] === 'radio'检查输入类型。

最好的可能仍然是为“无线电”输入设置一个类,它将允许循环更具体,因此代码更有效,例如:

<input type="radio" class="myRadio">

并在JS中:var inputs = document.getElementsByClassName('myRadio');

相关问题