按鈕提交時間過早

Question

我的按鈕提交表單太早了。 當我單擊我的按鈕時，應該創建一個我要寫入的文本區域，然后再次單擊按鈕以提交它。 它的確創建了textarea，但是我從來沒有機會寫任何東西，因為它是在textarea創建之后立即提交的。 任何解決方案如何避免這種情況？

Java腳本

function createEmailField(event) {
    var name = document.getElementById("name").value;
    if (name == "") {
        window.alert("Mata in ditt namn");
    }
    else if (name.search(/^[A-Za-z]+$/) == -1) {
        window.alert("Mata in ett namn med bokstäver");
    }
    else {
        var newDiv = document.createElement("div");
        var br = document.createElement("br");
        newDiv.appendChild(br);
        newDiv.appendChild(document.createTextNode("Hej " + name + "!"));
        var br = document.createElement("br");
        newDiv.appendChild(br);
        newDiv.appendChild(document.createTextNode("Hur når vi dig?"));
        var br = document.createElement("br");
        newDiv.appendChild(br);
        newDiv.appendChild(document.createTextNode("Epost:"));
        var br = document.createElement("br");
        newDiv.appendChild(br);
        var input = document.createElement("input");
        input.setAttribute("type", "text");
        input.setAttribute("id", "email");
        input.setAttribute("name", "email");
        newDiv.appendChild(input);
        var form = document.getElementById("form");
        var callButton = document.getElementById("button");
        form.insertBefore(newDiv, callButton);
        removeEvent(callButton, "click", createEmailField, false);
        addEvent(callButton, "click", createTextArea, false);
        var email = document.getElementById("email");
        email.onkeypress = prevent;
        removeEvent(document.getElementById("name"), "click", createEmailField, false);
    }
}

function createTextArea(event) {
    var email = document.getElementById("email").value;
    if (email == "") {
        alert("Mata in ditt email");
    }
    else if (email.search(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/) == -1) {
        window.alert("Mata in ett korrekt email");
    }
    else {
        var newDiv = document.createElement("div");
        var br = document.createElement("br");
        newDiv.appendChild(br);
        newDiv.appendChild(document.createTextNode("Vad har du för fråga om vår verksamhet?"));
        var br = document.createElement("br");
        newDiv.appendChild(br);
        var textArea = document.createElement("textArea");
        textArea.setAttribute("id", "question");
        textArea.setAttribute("name", "question");
        textArea.cols = "30";
        textArea.rows = "5";
        newDiv.appendChild(textArea);
        var br = document.createElement("br");
        newDiv.appendChild(br);
        newDiv.appendChild(document.createTextNode("Vi kommer att svara dig via: " +   email));
        var br = document.createElement("br");
        newDiv.appendChild(br);
        var form = document.getElementById("form");
        var callButton = document.getElementById("button");
        form.insertBefore(newDiv, callButton);
        removeEvent(document.getElementById("email"), "click", createTextArea, false);
        callButton.setAttribute("type", "submit");
    }
}

function prevent(event) {
    if ((window.event && window.event.keyCode == 13) || (event && event.keyCode == 13))  {
        if (window.event) {
            window.event.returnValue = false;
        } else if (event.preventDefault) {
            event.preventDefault();
        }
    }
}

function init() {
    var callButton = document.getElementById("button");
    addEvent(callButton, "click", createEmailField, false);
    var name = document.getElementById("name");
    name.onkeypress = prevent;
}
window.onload = init;

的HTML

<h2> Frågeformulär </h2>
<form id="form" method="post" action="http://student.ts.mah.se/da123aht11/echoscript.php">
    <div>
        Vad heter du?... 
        <br /><input type="text" name="name" id="name" /> 
    </div>
    <input type="button" name="skicka" value="Skicka" id="button">
</form>

Answer 1

@DrWooolie您可能想要使用event.preventDefault(); ;。 這段代碼將停止元素，按鈕的實際行為（在這種情況下），或者也可以處理錨定單擊事件。

更多信息在這里