CODEWITHSUNDEEP
javascripthtmlform-submitpreventdefault
DrWooolie
DrWooolie

Reputation: 8055

difficaulty with preventDefault and submitting form

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>

Upvotes: 0

Views: 520

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

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.

Upvotes: 1

Jerry
Jerry

Reputation: 3586

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.

Upvotes: 0

Related Questions