2013-02-12 3 views
0

Моя кнопка отправляет мою форму слишком рано. Когда я нажимаю на свою кнопку, предполагается создать текстовое поле, которое я хочу записать, а затем снова нажмите кнопку, чтобы отправить его. Его создает текстовое поле, но я никогда не получаю возможность написать что-либо, потому что он отправляется сразу после создания текстовой области. Любое решение, как этого избежать?кнопку отправки слишком рано

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> 
+0

Я думаю, что вы имеете в виду назвать '' prevent' в createTextArea', но вы этого не сделаете. –

+0

Я попытался предотвратить. но вместо отправки, он начал создавать новые текстовые поля, хотя я удалил событие – DrWooolie

ответ

1

@DrWooolie Вы можете использовать event.preventDefault(); этот кусок кода будет остановить реальное поведение элемента, кнопки в этом случае, или он может также работа над событиями щелчка якоря.

More Info here

+0

, которое я попробовал с preventDefault. но вместо отправки он начал создавать новые текстовые поля, хотя я удалил событие – DrWooolie

+0

, хотя вы создали метод предотвращения, но вы вызываете не то место. На данный момент его нажимают на текстовое поле, и это не волнует щелчок кнопки. вместо этого используйте для предотвращения использования текстового поля для кнопки. Вы также можете проверить, является ли текстовое поле нулевым или пустым или не проверяется в соответствии с вашими потребностями, а затем отображать сообщение под текстовым полем. –

+0

Я сделаю это, спасибо! – DrWooolie

Смежные вопросы