I have a simple radio selection and I'm trying to pass two values to the next page. Product name as well as price. How can assign both bits of info to the same radio choice?
My inclination is to use hidden fields, but I'm not sure how to link them to their respective radio choice.
Hidden fields won't work, but this does:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Send multiple radio data</title>
<script>
function getRadioData(radios) {
window.radioValue = null;
window.radioId = null;
window.radioName = null;
window.radioClass = null;
for (var i=0; i<radios.length; i++) {
var radio = radios[i];
if (radio.checked) {
radioValue = radio.value;
radioId = radio.id;
radioName = radio.name;
// radioClass = radio.className; // no class given yet
break;
}
}
return;
}
function sendRadioData(groupName) {
var theGroup = theForm.elements[groupName];
getRadioData(theGroup);
// console.log(radioValue,radioId,radioName);
if (radioValue == null) {
alert('No radio checked');
return false;
}
else {
window.location.href = 'nextpage.php?radioValue='+radioValue+'&radioId='+radioId+'&radioName='+radioName;
}
}
</script>
</head>
<body>
<form name="theForm" id="theForm" action="nextpage.php">
<input type="radio" name="yourName" value="10" id="firstId"><br>
<input type="radio" name="yourName" value="20" id="secondId"><br>
<input type="radio" name="yourName" value="30" id="thirdId"><br>
<input type="radio" name="yourName" value="40" id="fourthId"><br>
<input type="button" value="Send radio data" onclick="sendRadioData('yourName')">
</form>
</body>
</html>
.
As you can see, you can even send four easily retrievable data bits per clicked radio button. Only the name stays the same. Just make sure to adapt your nextpage.php to the GET variables.
No live demo with this, because you can only see the result in the console or the address bar.
