表单提交后留在同一页面上

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>

Answer 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 .

Answer 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.

Answer 3

You have missed to write return before the onsubmit() method in form.

onsubmit="return validateForm();"

When you don't write return before the method call of onSubmit() then the javascript can not return the page back into the form.