按钮提交过早

Question

我的按钮提交表单过早。当我单击我的按钮时，它应该创建一个文本区域，我想在其中写入，然后再次单击按钮以提交它。它确实创建了 textarea，但我从来没有机会写任何东西，因为它在创建 textarea 后立即提交。任何解决方案如何避免这种情况？

Javascript

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(); 这段代码将停止元素的实际行为，在这种情况下为按钮，或者它也可以处理锚点击事件。

More Info here