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";
          }
}

问textarea并在下面添加按钮：

<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

答案很简单：在将表格添加到表格之前，您应验证用户输入的数据。

就像那样：

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
}

Answer 2

如果您不想执行该按钮，则必须在onclick中返回false：

<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

在创建和追加新元素之前，您需要通过{{1>}函数将函数执行短路。我还更改了一些代码的顺序，例如将变量放在第一位，而不是在return测试之后创建元素。

if

http://jsfiddle.net/rUdhp/

如果出现警告框，我不希望将行添加到表中

3 个答案: