Go to URL based on form input using radio buttons

Question

How do I use only the selected radio button to show up in the URL? What I have always uses the first radio button regardless of which one is selected:

<form id="urlForm">
   <div id="bounds">
      <label><input type="radio" name="toggle" id="key"><span>On</span></label>
      <label><input type="radio" name="toggle" id="key"><span>Off</span></label>
   </div>
</form> 

<script>
$(document).ready(function() {
$('#urlForm').submit( function() {                        
   goUrl = '/?constraint=' + $('#key').val() + '+' + $('#key2').val();          
   window.location = goUrl;          
   return false;  // Prevent the default form behaviour     
    });
});
</script>

Jasper · Answer 1 · 2011-12-02T18:03:11.607

Your radio inputs should have unique IDs.

  <label><input type="radio" name="toggle" id="key1" value="on"><span>On</span></label>
  <label><input type="radio" name="toggle" id="key2" value="off"><span>Off</span></label>

And your JavaScript is close but since you are selecting by ID (which doesn't quite work for radio buttons) you need to alter your selectors for the radio inputs:

$(document).ready(function() {
    $('#urlForm').submit( function() {
        window.location = '/?constraint=' + $('input[name="toggle"]:checked').val();          
        return false;  // Prevent the default form behaviour     
    });
});

$('input[name="toggle"]:checked'): This selects a form input with the name attribute set to toggle and is also checked. This gets the job done but is a pretty inefficient selector.

Here's a jsfiddle: http://jsfiddle.net/jasper/HFBwH/

@JosephSilber Good call, I did it in the jsfiddle but forgot here. Answer updated. — Jasper, Dec 02 '11 at 18:04

score 0 · Answer 2 · answered Dec 02 '11 at 17:52

You shouldn't have 2 elements with the same ID. Use this:

HTML:

<form id="urlForm">
   <div id="bounds">
      <label><input type="radio" name="toggle" id="key1" value="On"><span>On</span></label>
      <label><input type="radio" name="toggle" id="key2" value="Off"><span>Off</span></label>
   </div>
</form>

JavaScript:

$(document).ready(function() {
    $('#urlForm').submit( function() {                        
        goUrl = '/?constraint=' + $('#key1:checked, #key2:checked').val();
        window.location = goUrl;          
        return false;  // Prevent the default form behaviour     
    });
});

Here's the fiddle: http://jsfiddle.net/cgyeY/

P.S. You really don't need that return false; part, since you're navigating away from the page...

score 0 · Answer 3 · answered Dec 02 '11 at 17:53

0

You have a couple issues in your code.

First: you should use the .preventDefault( ) function to prevent the default event from happening.

Second: you have two elements in your HTML with the same ID. IDs should be unique.

Third: you are missing the value attributes on your radio buttons

After those are fixed, you can use the following snippet to grab the value of the radio buttons... $('input:radio[name=bar]:checked').val();

answered Dec 02 '11 at 17:53

Benjam

5,285
3
26
36

`return false;` does the same thing as `event.preventDefault()` in this case. – Jasper Dec 02 '11 at 17:55
But you should use `.preventDefault( )` to prevent other unintended things from happening... http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false – Benjam Dec 02 '11 at 17:57
Points 2 & 3 are valid, but you're wrong on your first point. For one, returning false is (nearly) identical to `preventDefault` is this situation. In addition, since `window.location = goUrl` will navigate away from the current page, that'll halt any JavaScript execution... – Joseph Silber Dec 02 '11 at 17:59
@benjam Do you have any examples of unintended things? It seems that `return false` would work fine if you want to kill the event. – Jasper Dec 02 '11 at 18:00
We could go round and round about the differences between `return false` and `.preventDefault( )` and whether or not it applies in this case, but my first reaction was one of "valid code", and I'm sticking to it. And I agree it may even be moot because of the `window.location` call, but I err on the side of caution in case it doesn't and the form inadvertently gets submitted. – Benjam Dec 02 '11 at 18:04

Go to URL based on form input using radio buttons

3 Answers3