CODEWITHSUNDEEP
javascriptphphtmlradio-button
psorensen
psorensen

Reputation: 827

HTML/PHP: Pass multiple values based on one radio option

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.

Upvotes: 1

Views: 979

Answers (1)

Frank Conijn - Support Ukraine
Frank Conijn - Support Ukraine

Reputation: 3190

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.

Upvotes: 1

Related Questions