Question

My button is submitting my form too early. When i click on my button, it is supposed to create a textarea, which i want to write in and then click on the button again to submit it. Its does create the textarea, but i never get the chance to write anything, because it submits right after the textarea is created. Any solution how to avoid this?

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 You might want to use event.preventDefault(); this piece of code will stop the actual behaviour of the element, button in this case, or it can also work on anchor click events.

More Info here