Alerting если Textboxes пустые

Question

моя форма:

<form method="post" action="getQuote.php" onsubmit="check()"> 
    <table> 
     <tr> 
      <td>Name:</td> 
      <td> 
       <input id="idname" class="inputBox" name="name"/> 
      </td> 
     </tr> 
     <tr> 
      <td>Phone Number:</td> 
      <td> 
       <input id="idphone" class="inputBox" name="phone" /> 
      </td> 
     </tr> 
     <tr> 
      <td>Moving From:</td> 
      <td> 
       <input id="idfrom" class="inputBox" name="from" /> 
      </td> 
     </tr> 
     <tr> 
      <td>Moving To:</td> 
      <td> 
       <input id="idto" class="inputBox" name="to" /> 
      </td> 
     </tr> 
     <tr> 
      <td>Date:</td> 
      <td> 
       <input id="iddate" class="inputBox" name="date" /> 
      </td> 
     </tr> 
     <tr> 
      <td>&nbsp;</td> 
      <td> &nbsp; </td> 
     </tr> 
     <tr> 
      <td></td> 
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
       <button name="signup" class="myButton"> 
       <font style="color: #ffffff">Get A Quote</font> 
       </button> 
      </td> 
     </tr> 
    </table> 
</form> 

мой сценарий:

<script> 
    function check() { 
     var n = document.getElementById(idname); 
     var p = document.getElementById(idphone); 
     var f = document.getElementById(idfrom); 
     var t = document.getElementById(idto); 
     var d = document.getElementById(iddate); 
     var test1 = n.length; 
     var test2 = p.length; 
     var test3 = f.length; 
     var test4 = t.length; 
     var test5 = d.length; 
     alert(test1); 
     alert(test2); 
     alert(test3); 
     alert(test4); 
     alert(test5); 
    } 
</script> 

я звоню сценарий как onsubmit функции вида, но страница не отображается предупреждение. вместо этого он будет в файле getQuote.php. Может ли кто-нибудь сказать мне, в чем проблема? я думаю, я упускаю что-то глупое.

N.B: Я не написал деталь для сравнения, если значение пустое или нет. просто проверяя значения.

Заранее спасибо.

Answer 1

Попробуйте

<script> 
     function check() { 
      var n = document.getElementById('idname'); 
      var p = document.getElementById('idphone'); 
      var f = document.getElementById('idfrom'); 
      var t = document.getElementById('idto'); 
      var d = document.getElementById('iddate'); 
      var test1 = n.length; 
      var test2 = p.length; 
      var test3 = f.length; 
      var test4 = t.length; 
      var test5 = d.length; 
      alert(test1); 
      alert(test2); 
      alert(test3); 
      alert(test4); 
      alert(test5); 

     } 
    </script> 

Answer 2

1. Обработчик onsubmit должен возвращать false, если вы не хотите, продолжить представление формы.
2. Убедитесь, что вы проверяете атрибут value каждого элемента, который вы проверяете.

Форма:

<form method="post" action="getQuote.php" onsubmit="return check()"> 

Сценарий:

<script> 
    function check() { 
    var n = document.getElementById(idname); 
    var p = document.getElementById(idphone); 
    var f = document.getElementById(idfrom); 
    var t = document.getElementById(idto); 
    var d = document.getElementById(iddate); 
    var test1 = n.value.length; 
    var test2 = p.value.length; 
    var test3 = f.value.length; 
    var test4 = t.value.length; 
    var test5 = d.value.length; 
    alert(test1); 
    alert(test2); 
    alert(test3); 
    alert(test4); 
    alert(test5); 
    if (test1 == 0 || test2 == 0 || test3 == 0 || test4 == 0 || test5 == 0) { 
     return false; 
    } 
    return true; 
    } 
</script> 

Answer 3

Вы могли бы сделать жизнь намного проще, если вы удалите идентификаторы на элементы управления формы и добавить класс для тех, которые должны иметь ценность. Затем вы просто перебираете все элементы управления формой и удостоверяетесь, что любой с классом, скажем, «требуется», имеет непустое значение, например.

// Helper 
function hasClass(el, className) { 
    var re = new RegExp('(^|\\s)' + className + '(\\s|$)'); 
    return re.test(el.className); 
} 

function checkForm(form) { 
    var control, controls = form.elements; 
    var allowSubmit = true; 

    for (var i=0, iLen=controls.length; i<iLen; i++) { 
    control = controls[i]; 

    if (hasClass(control, 'required') && control.value == '') { 
     alert('Control ' + control.name + ' is missing a value.'); 
     allowSubmit = false; 
    } 
    } 
    return allowSubmit; 
} 

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