I am working with a dynamical form. When i enter my name in the

Question

0

Asked: June 18, 20262026-06-18T14:31:47+00:00 2026-06-18T14:31:47+00:00

I am working with a dynamical form. When i enter my name in the

0

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>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-18T14:31:48+00:00

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.

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I am working with a dynamical form. When i enter my name in the

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply