HTML格式-将值传递到同一页面上的两种不同形式

Question

I am having problems trying to pass values to two different forms on the same page. The page is populated with 16 radio buttons (which I've turned into boxes for display reasons) and they all hold a value (eg 001). Both of the forms jobs are to somehow grab the active/selected radio button value and post it to a PHP file so database changes can be made. Instead of a submit button, I am using an anchor to pass a JavaScript submit function. I have tried having both forms cover the whole page but still didn't have any luck.

I'll post some code below to help you understand.

PS. If you need more code to understand, I can post it to 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>

Answer 1

To answer the suggestion in the comments and use only one form, here's how to grab the value from the selected radio button:

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

valueSelected will contain the value of the selected radio.

If you ever need to reduce the type to "radio" only for some reason, you can check an input type with inputs[i]['type'] === 'radio' in the for loop.

---

The best would probably still be to set a class for your "radio" inputs, it will allow the loop to be more specific, hence a more efficient code, for example:

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

and in JS: var inputs = document.getElementsByClassName('myRadio');