I've read heaps of posts about this and I'm still having issues with passing the return variable from my function to a hidden input value. The function is checking all radio buttons on the page (12 of them) and finding the one which is selected. It is either passing NULL or the javascript to screen.php. I have tested the checked() function and it works (used alert() to show the value). I've read heaps of posts on passing values to hidden inputs and none of those solutions have worked for me.
If you need to see more code, I can post it on pastebin.
<script language="text/javascript">
function checked()
{
var inputs = document.getElementsByClassName('radio');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) valueSelected = inputs[i].value;
}
return valueSelected;
}
</script>
</head>
<body>
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1><a href="index.php">KSM</a></h1>
</div>
</div>
<div id="buttons">
<ul>
<li>
<form id="form_ready" method="post" action="../backend/screen.php">
<input type="hidden" name="screenid" value="1" />
<input type="hidden" name="status" value="READY" />
<input type="hidden" name="pickupid" id="pickupid" value="" />
<input type="submit" class="submit" name="READY" onclick="document.getElementById('pickupid').value = checked();">
</form>
<div id="search">
<ul id="nav">
<li class="tab1"><a href="index_tbl.php">Ordered</a></li>
</ul>
</div>
<div id="content">
<div id="container">
<table>
<tr>
<td>
<input type="radio" class="radio" name="pickup" id="1" value="001" />
<label for="1"> <span>001</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="2" value="002" />
<label for="2"> <span>002</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="3" value="003" />
<label for="3"> <span>003</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="4" value="004" />
<label for="4"> <span>004</span> </label>
</td>
</tr>
<tr>
<td>
<input type="radio" class="radio" name="pickup" id="5" value="005" />
<label for="5"> <span>005</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="6" value="006" />
<label for="6"> <span>006</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="7" value="007" />
<label for="7"> <span>007</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="8" value="008" />
<label for="8"> <span>008</span> </label>
</td>
</tr>
<tr>
<td>
<input type="radio" class="radio" name="pickup" id="9" value="009" />
<label for="9"> <span>009</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="10" value="010" />
<label for="10"> <span>010</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="11" value="011" />
<label for="11"> <span>011</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="12" value="012" />
<label for="12"> <span>012</span> </label>
</td>
</tr>
</table>
</div>
</div>
</body>
