表單提交后留在同一頁面上

Question

即使顯示警告消息並且明顯存在返回的錯誤代碼，我的頁面仍繼續提交。 我在這里做錯了什么？

     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

你必須這樣說

onsubmit="return validateForm();"

代替

onsubmit="validateForm();"

更新的演示

那是因為您正在檢查for循環中selected的值，所以第一次它的值是""第二次它變成No

Answer 2

在您的提交處理程序中，使用event.preventDefault而不是return false 。

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

您必須做更多的工作來支持IE8。

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

或者，您可以將onsubmit屬性更改為return validateForm() 。 這將阻止默認操作並停止事件傳播，而不僅僅是阻止默認操作。

Answer 3

您錯過了在表單的onsubmit（）方法之前編寫return的信息。

onsubmit="return validateForm();"

如果在onSubmit（）方法調用之前未編寫return，則javascript無法將頁面返回到表單中。