how to do a javascript confirm dialog if a radio button is checked, with jquery

Question

I have two radio buttons like so

<input type="radio" name="rush" value="yes" />
<input type="radio" name="rush" value="no" checked="checked" />

What I want to do is when the form submit button is clicked, check if 'yes' is selected.

If it is, show a javascript confirm dialog

I've gotten this far, but am stuck, any help would be appreciated.

$("form.shipping").submit(function() {

 if($("input[name='rush']".attr("value") === "yes")
 {
  if (confirm("Rush orders are subject to an upcharge. (Just wanted to make sure you read the note). Is this ok?"))
  {
   return true;
  }
  else
  {
   return false;
  }
 }

});

Answer 1

You are binding something to the click event of a button. You probably want to bind it to the submit event of the form. Besides that, you misspelled input.sumbit-button in your selector.

EDIT: Here is a working version of what you want. Your errors were:

• You were probably not wrapping your code around document.ready. This is important if your script is included at the top of the page, as anything you write that is not wrapped in this event will execute before the DOM elements are created. So you would be binding events to nothing. The document.ready event takes care of that by firing as soon as the DOM is fully loaded.
• You had a missing closing ) right before .attr. You should probably look into tools like FireBug to debug your javascript, as it is trivial to find these kind of things with it.
• You were checking the value of the radio button, but it was always evaluating to true because you need to filter it out to only get the :checked one.

So, the working code:

$(document).ready(function() {
    $("form.shipping").submit(function() {
        if($("input[name='rush']:checked").attr("value") === "yes") {
            return confirm("Rush orders are subject to an upcharge.
            (Just wanted to make sure you read the note). Is this ok?");
        }
    });
});

Answer 2

your if else block should be replaced with:

return confirm("You want to rush this. Is this ok?");

(not that has anything to do with your misspelling problem)

edit, better yet do this:

$("input.sumbit-button").click(function() {
        return ($("input[name='rush']".attr('value') === "yes" && confirm("You want to rush this. Is this ok?"));
});

Answer 3

Does it fail in multiple browsers? I've seen reports of some odd bugs in IE7 where confirm() didn't execute in an onclick or onsubmit event handler.

Answer 4

your selector "input[name='rush']" will return both inputs, you need "input[name='rush']:checked" as Paolo Bergantino suggested