提交過早的按鈕

Question

我的按鈕提交表單太早。當我點擊我的按鈕，它應該創建一個textarea，我想要寫入，然後再次單擊該按鈕以提交它。它確實創建了textarea，但我從來沒有機會寫任何東西，因爲它在textarea創建後立即提交。任何解決方案如何避免這一點？

的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您可能需要使用event.preventDefault();這段代碼將停止在這種情況下，元素，按鈕的實際行爲，或者它也可以在主播點擊事件上工作。

More Info here