javascript - preventDefault 和提交表单的困难

Question

我正在使用动态形式。当我在第一个文本字段中输入我的姓名并按 Enter 时，会弹出下一个文本字段，请求我的电子邮件。但是，我可以多次单击输入，并且下一个文本字段不断弹出，我只想弹出一次。另一个问题是，如果我按两次 Enter 键，我的下一个请求我的电子邮件的文本字段会提交表单，我也想阻止这种情况。有什么解决办法吗？

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>

score 1 · Accepted Answer

一种解决方案是保留一个状态变量来检查电子邮件字段/文本区域是否创建，var emailCreated = false, textareaCreated = false;并检查状态并在操作完成后更新它们。

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;

演示：小提琴

另一种方法是使用removeEvent()函数

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

然后分别添加电子邮件字段和文本区域后调用removeEvent(document.getElementById("name"), "keyup", createEmailField, false);和。removeEvent(document.getElementById("email"), "change", createTextArea, false);

score 0 · Accepted Answer

创建电子邮件字段后，您似乎没有删除事件侦听器，因此它仍然处于活动状态。创建第二个字段后，您需要从第一个字段中删除事件侦听器。

javascript - preventDefault 和提交表单的困难

2 回答 2

Related

Reference