Form stay on same page after submit

Question

My page keeps submitting even after it shows the alert message and the return false code is clearly present. What am I doing wrong here?

     function validateForm () {
        var selected = "";
        var radios = document.getElementsByName("special");
        var len = document.getElementsByName("special").length;
        var i;

        for (i = 0; i < len; i++) {
            if(radios[i].checked) {
                selected = radios[i].value;
                break;
            }
            if(selected == "") {
                alert("Must select option.");
                return false;
            }
            else {
                return true;
            }
        }
     }

    <form action="FormProcessor.html" method="post" onreset="blank();" onsubmit="validateForm();" name="myForm">
            <p>Would you like special offers sent to you e-mail?</p>
            <input type="radio" name="special" value="Yes"/>Yes
            <input type="radio" name="special" value="No"/>No<br/>
            <input type="submit"/>
            <input type="reset"/>
    </form>

Solution 1

You have to just say like this

onsubmit="return validateForm();"

instead of

onsubmit="validateForm();"

updated demo

That was because you were checking the value of selected in for loop, so for first time it's value is "" second time it's become No.

Solution 2

In your submit handler, instead of return false, use event.preventDefault.

function validateForm (event) {
...
        if(selected == "") {
            alert("Must select option.");
            event.preventDefault();
        }

You'll have to do something more involved to support IE8.

event.preventDefault ? event.preventDefault() : event.returnValue = false;

Alternatively, you can change the onsubmit attribute to be return validateForm(). That will both prevent the default action and stop the event propagation, rather than just prevent the default action.

Comments

[turd.ferguson]

Thank you! It worked! Now, seeing the code, can you explain why the alert("Must select option") is showing even if the option "No" is checked?

[turd.ferguson]

Thank you! I ended up using the return validateForm() . It was a quick easy fix! Would you know why the it keeps showing the alert("Must select option") even if the option "No" is checked?

[turd.ferguson]

Thanks! What would be a better way to write this code then to work correctly?

[turd.ferguson]

It is. I'm not seeing any changes to the code though to make it work correctly? Am I missing something?

[Mritunjay]

@turd.ferguson If you'll see, I'm closing for loop just after first if check, but in your code, all if conditions were being checked in for.

[turd.ferguson]

OH! Haha. I don't know why I didn't see that. As you can tell, I'm very new to JavaScript. Thank you so much!

[Trott]

Your loop logic is such that it fires the alert the first time through if the first item isn't checked rather than firing the alert after looping through everything.