CODEWITHSUNDEEP
javascripthtml
action jack
action jack

Reputation: 53

Javascript Radio Button Value in URL

I've read variations on this for a few days and can't find a working solution to what I want. And it's probably easier than I'm making out.

I have a set of radio buttons, and want to pass the checked value to part of a URL. 

<input type="radio" name="link" value="one" checked="checked">One
<input type="radio" name="link" value="two">Two
<input type="radio" name="link" value="three">Three

And I want the value of whichever one is checked to be passed to a variable such as dt which then passes to the Submit button which takes you to a url that includes text from the radio buttons. 

<input type="button" value="OK" id="ok_button" onclick="parent.location='/testfolder/' + dt;>

But I'm struggling to find out how to get var dt = document.getElementByName('link').value; to work for me when I try and apply a for loop to make sure it's checked.

Does my onclick='parent.location.... in the submit button need to be in a function rather than part of the submit button? So the same function can grab the value of the radio button?

So I'm appealing to StackOverflowers for hopefully a bit of guidance... Thanks

Upvotes: 2

Views: 3946

Answers (4)

A1rPun
A1rPun

Reputation: 16847

First of you want to know which value your combobox has with this easy to use on-liner.

document.querySelector('[name="link"]:checked').value;

I suggest using event handlers to handle the javascript, so don't write it in the onclick attribute.

 var btn = document.getElementById('ok_button');
 btn.addEventListener('click', function(){ /*handle validations here*/ })

jsfiddle

Upvotes: 2

mjroodt
mjroodt

Reputation: 3313

<input type="radio" id="1" name="link" onchange="WhatToDo()" value="one">One</input>
<input type="radio" id="2" name="link" onchange="WhatToDo()" value="two">Two</input>
<input type="radio" id="3" name="link" onchange="WhatToDo()" value="three">Three</input>


<script type="text/javascript">
function WhatToDo() {
   var rButtons = document.getElementsByName('link');
for (var i = 0; i < rButtons.length; i++) {
    if (rButtons[i].checked) { 
        alert(rButtons[i].value);
    }     
  }
}
</script>

Maybe something like this. Use onchange and then loop through your radio buttons. Whilst looping look to see if the radio button is checked. Its a starting point.

Upvotes: 0

prog1011
prog1011

Reputation: 3495

you can try below code 

<input type="button" value="OK" id="ok_button" onclick="functionName();'>

JavaScript Code

        <script type="javascript">
function functionName(){
    var radios = document.getElementsByName('link'), 
        value  = '';

    for (var i = radios.length; i--;) {
        if (radios[i].checked) {
            value = radios[i].value;
            break;
        }
    }

             window.location.href='/testfolder/'+ value   
        }
        </script>

Upvotes: 0

eno3nt
eno3nt

Reputation: 202

var dt = document.getElementsByName('link')[0].value works for me

you can use it in either the inline onclick handler or a function you define

Upvotes: 0

Related Questions