difficaulty with preventDefault and submitting form

Question

I am working with a dynamical form. When i enter my name in the first textfield, and press enter, the next textfield pops up, requesting my email. however, i can click enter many times and the next textfield keeps popping up, which i only want to pop up once. The other problem, is that my next textfield, which requests my email, submits the form if i press enter twice, which i also want to prevent. Any solution?

Javascript

function addEvent(element, eventType, theFunction, capture) {
if (element.addEventListener) {
    element.addEventListener(eventType, theFunction, capture);
}
else if (element.attachEvent) {
    element.attachEvent("on" + eventType, theFunction);
}
}


function createEmailField() {
if ((window.event && window.event.keyCode == 13) || event.keyCode == 13) {

    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");
        form.appendChild(newDiv);

        var email = document.getElementById("email");
        addEvent(email, "change", createTextArea, false);

    }
}
}

function createTextArea() {

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 button = document.createElement("input");
    button.setAttribute("type", "submit");
    button.setAttribute("value", "Skicka");
    button.setAttribute("name", "Skicka");
    button.setAttribute("id", "submit");
    newDiv.appendChild(button);

    var form = document.getElementById("form");
    form.appendChild(newDiv);

}
}

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


function init() {
var name = document.getElementById("name");
addEvent(name, "keyup", createEmailField, false);
name.onkeypress = prevent;
}

window.onload = init;

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Inl1-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="Uppg3.js" >
</script>

</head>

<body>

<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>
</form>


</body>

</html>

This doesn't answer your question, please note that your email validation regular expression is not very good. Please read the comment here: http://stackoverflow.com/questions/201323/using-a-regular-expression-to-validate-an-email-address — Jerry, Feb 08 '13 at 00:45

Arun P Johny · Accepted Answer · 2013-02-08T01:31:44.827

A solution is to keep a status variable to check whether the email field/text area is created like var emailCreated = false, textareaCreated = false; and check the status and update them once the action is done.

function addEvent(element, eventType, theFunction, capture) {
if (element.addEventListener) {
    element.addEventListener(eventType, theFunction, capture);
}
else if (element.attachEvent) {
    element.attachEvent("on" + eventType, theFunction);
}
}


function createEmailField() {
if ((window.event && window.event.keyCode == 13) || event.keyCode == 13) {
    if(emailCreated){
        return;
    }

    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");
        form.appendChild(newDiv);

        var email = document.getElementById("email");
        addEvent(email, "change", createTextArea, false);

        emailCreated = true;

    }
}
}

function createTextArea() {
    if(textareaCreated){
        return;
    }

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 button = document.createElement("input");
    button.setAttribute("type", "submit");
    button.setAttribute("value", "Skicka");
    button.setAttribute("name", "Skicka");
    button.setAttribute("id", "submit");
    newDiv.appendChild(button);

    var form = document.getElementById("form");
    form.appendChild(newDiv);

    textareaCreated = true;

}
}

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


function init() {
var name = document.getElementById("name");
addEvent(name, "keyup", createEmailField, false);
name.onkeypress = prevent;
}


var emailCreated = false, textareaCreated = false;
window.onload = init;

Demo: Fiddle

Another way is to use a removeEvent() function

function removeEvent(element, eventType, theFunction, capture) {
if (element.removeEventListener) {
    element.removeEventListener(eventType, theFunction, capture);
}
else if (element.detachEvent) {
    element.detachEvent("on" + eventType, theFunction);
}
}

Then call removeEvent(document.getElementById("name"), "keyup", createEmailField, false); and removeEvent(document.getElementById("email"), "change", createTextArea, false); after adding the email field and textarea respectively.

when it comes to preventing createEmailField from activating everytime i click enter, it worked. However, when i double click enter on my emailField, it still submits — DrWooolie, Feb 08 '13 at 01:24
i use both chrome and IE. it submits the form with both, when i click enter twice on emailField — DrWooolie, Feb 08 '13 at 01:39

score 0 · Answer 2 · answered Feb 08 '13 at 00:51

0

It looks like you don't remove the event listener after you create the email field, so it's still active. Once you create the second field, you need to remove the event listener from the first field.

answered Feb 08 '13 at 00:51

Jerry

3,391
1
19
28

i succeded in soolving the problem where my createEmailField activates everytime i click on enter. However, when i double click on my emailField, it still submits the form. – DrWooolie Feb 08 '13 at 01:25

difficaulty with preventDefault and submitting form

2 Answers2