如果出現警告框，我不希望將一行添加到表中

Question

我有一個textarea，用戶在其中輸入問題，然後單擊「添加問題」按鈕提交問題並在問題中添加問題表作爲新的一行。

雖然用戶可能會錯誤地鍵入他們的問題，但它帶有必要的警報。當警報出現時，它會工作，但它也會在表格中添加問題，我需要包含哪些內容，以便如果警告框出現，它不會添加問題？

Javascript代碼：下面

function insertQuestion(form) 
{ 

    var row = document.createElement("tr"); 
    var cell, input; 
    var alertErrors = ""; 

    cell = document.createElement("td"); 
    cell.className = "question"; 
    input = document.createElement("textarea"); 
    input.name = "question_" + qnum; 
    input.value = form.questionText.value; 
    cell.appendChild(input); 
    row.appendChild(cell); 
    if (input.value == ""){ 
     alertErrors += "\nYou have not entered a valid Question"; 
     }else if (input.value.length < 5){ 
       alertErrors += "\nYou have not entered a valid Question"; 
      } 
} 

問題文本區域，並添加按鈕：

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" > 
<table id="middleDetails" border="1"> 
<tr> 
    <th class="tblheading" colspan="2">SESSION DETAILS</th> 
</tr> 
<tr> 
    <th colspan="2"> 
     Question Number <span id="questionNum">1</span> 
    </th> 
</tr> 
<tr> 
    <td>Question:</td> 
    <td> 
     <textarea rows="5" cols="40" name="questionText"></textarea> 
    </td> 
</tr> 
<tr> 
    <th colspan="2"> 
     <input name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" /> 
    </th> 
</tr> 
</table> 

表哪些商店添加以下qustions：

<hr/> 
<table id="qandatbl" border="1"> 
<tr> 
    <th class="qid">Question No</th> 
    <th class="question">Question</th> 
    <th class="weight">Weight</th> 
    <th class="answer">Answer</th> 
</tr> 
</table> 
<input type="submit" value="Submit questions to database" /> 
<input type="hidden" name="numberOfQuestions" value="0" /> 
</form> 

Answer 1

您需要創建和附加之前return你的函數執行從功能荷蘭國際集團的新元素短路。我還更改了一些代碼的順序，例如先將變量放在第一位，而不是在if測試之後創建元素。

function insertQuestion(form) { 
    var cell, 
     input, 
     alertErrors = "", 
     // Note, this is just so it's declared... 
     qnum = Math.round(Math.random()*10); 

    // Note, I'm using the .value instead of copying it 
    // Also note the .length on the second check 
    if (form.questionText.value == ""){ 
     alertErrors += "\nYou have not entered a valid Question"; 
    } else if (form.questionText.value.length < 5){ 
     alertErrors += "\nYou have not entered a valid Question"; 
    } 

    // Stop execution with a return 
    if (alertErrors != "") { 
     alert(alertErrors); 
     return; 
    } 

    // Just put the new element code together 
    var row = document.createElement("tr"), 
     cell = document.createElement("td"), 
     input = document.createElement("textarea"); 
    cell.className = "question"; 
    input.name = "question_" + qnum; 
    input.value = form.questionText.value; 
    cell.appendChild(input); 
    row.appendChild(cell); 
    // Added this as well 
    form.appendChild(row); 
} 

http://jsfiddle.net/rUdhp/

Answer 2

你將不得不在返回false onclick如果你不想按鈕執行：

<input name="addQuestion" type="button" value="Add Question" onClick="return insertQuestion(this.form);" /> 

和insertQuestion()：

... 
if (alertErrors != ""){ 
    alert(alertErrors); 
    return false; 
}else{ 
    return true; 
} 

Answer 3

答案很簡單：將它添加到表之前，應驗證用戶輸入的數據。

就像這樣：

function insertQuestion(form) 
{ 
    var alertErrors = ''; 
    if (input.value == ""){ 
     alertErrors += "\nYou have not entered a valid Question"; 
    } else if (input.value.length < 5){ 
      alertErrors += "\nYou have not entered a valid Question"; 
    } 

    if (alertErrors) { // if alertErrors string is not empty 
     alert(alertErrors); // show alert 
     return false; // and do not nothing else 
    } 

    // your stuff about creating tr and new input goes here 
}