Я не хочу, чтобы строка добавлялась в таблицу, если появляется окно предупреждения - PullRequest
Новая
       13

Я не хочу, чтобы строка добавлялась в таблицу, если появляется окно предупреждения

0 голосов
/ 30 ноября 2011

У меня есть текстовое поле, в которое пользователь вводит свой вопрос, а затем нажимает кнопку «Добавить вопрос», чтобы отправить вопрос, и добавляет вопрос в таблицу в виде новой строки.

Дело в том, что, хотя пользователь может неправильно ввести свой вопрос, он получает необходимые предупреждения. Это работает, когда предупреждение появляется, но также добавляет вопрос в таблицу, что мне нужно включить, чтобы при появлении окна предупреждения не добавлялся вопрос?

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>

Таблица, в которой хранятся добавленные ниже предложения: 

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

Ответы [ 3 ]

1 голос
/ 30 ноября 2011

Ответ прост: вам следует проверить введенные пользователем данные, прежде чем добавлять их в таблицу.

Просто так: 

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
}
0 голосов
/ 30 ноября 2011

Вам необходимо замкнуть выполнение вашей функции с помощью 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/

0 голосов
/ 30 ноября 2011

Вам нужно будет вернуть false в клик, если вы не хотите, чтобы кнопка выполнялась: 

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

и в insertQuestion(): 

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