CODEWITHSUNDEEP
javascripthtmlformsradio-button
Steve Thompson
Steve Thompson

Reputation: 141

Radio buttons selected go to URL

I am trying to use the value of the selected radio button to go to a specific URL. Currently the Javascript I am using to do so is choosing the first "id" of the inputs and not using the value of what is actually selected.

HTML

<form action="https://www.neurodimension.net/solo/products/Cart.aspx" method="POST" id="myForm" onsubmit="changeActionURL();">
         <input type="radio" name="ns_license" id="ns_license" value="1025" />NeuroSolutions Pro<br />
         <input type="radio" name="ns_license" id="ns_license" value="1024" />NeuroSolutions<br />
         <input type="radio" name="ns_license" id="ns_license" value="1026" />NeuroSolutions Student
         <input type="submit" />    
</form>

Javascript

<script type="text/javascript">
function changeActionURL() {
var forma = document.getElementById('myForm');
forma.action += "?action=add&actiondata0=" + document.getElementById('ns_license').value;
}
</script>

Upvotes: 0

Views: 1120

Answers (3)

Samuel Cook
Samuel Cook

Reputation: 16828

While querySelector will work for modern browsers it does not work for IE <=7

If you want you can traverse through the radios by name, then check if the value is checked. If it is then return that value. That is the use of the getRadioValue() function:

<form action="https://www.neurodimension.net/solo/products/Cart.aspx" method="POST" id="myForm" onsubmit="changeActionURL();">
         <input type="radio" name="ns_license" id="ns_license" value="1025" />NeuroSolutions Pro<br />
         <input type="radio" name="ns_license" id="ns_license" value="1024" />NeuroSolutions<br />
         <input type="radio" name="ns_license" id="ns_license" value="1026" />NeuroSolutions Student
         <input type="submit" />    
</form>

<script type="text/javascript">
function changeActionURL() {
    var forma = document.getElementById('myForm');
    forma.action += "?action=add&actiondata0=" + getRadioValue('ns_license');
}

function getRadioValue(name){
    var rads = document.getElementsByName('ns_license');
    for(var x=0; x<rads.length;x++){
        if(rads[x].checked){
            return rads[x].value;
        }
    }
}
</script>

Upvotes: 0

Ritikesh
Ritikesh

Reputation: 1228

to change a a specific attribute of an element, you can use the

setAttribute()

function of javascript. that should make it work.

Upvotes: 0

tymeJV
tymeJV

Reputation: 104785

You have multiple ID's that are the same, which is bad! getElementById expects one result, and it gets one by taking the first element which has that ID (ignoring your other 2, as it should). Use the class attribute on similar elements.

    <input type="radio" name="ns_license" class="ns_license" value="1025" />NeuroSolutions Pro<br />
     <input type="radio" name="ns_license" class="ns_license" value="1024" />NeuroSolutions<br />
     <input type="radio" name="ns_license" class="ns_license" value="1026" />NeuroSolutions Student

And to get the checked element

var checkedElem = document.querySelector(".ns_license:checked");

And if querySelector is out of the question:

var elems = document.getElementsByClassName("ns_license"),
    checkedIndex = 0;

for (var i = 0; i < elems.length; i++) {
    if (elems[i].checked)
        checkedIndex = i;
}

Your current checked element would be at elems[checkedIndex]

Upvotes: 1

Related Questions