Javascript: Как проверить несколько пустых значений

Question

У меня есть четыре элемента ввода в моей форме. У меня нет кнопки отправки в моей форме. Я хочу проверить все значения, и если все значения не пусты, я хочу опубликовать все значения на php-страницу с помощью ajax.

Это мои элементы ввода формы.

<form method="post" action="getAllDteails.php" name="dashboard"> 
      Manager Name<input type="text" id="managername" onchange="getDetails(this.value)" name="managername"/> 
      Project Name<input type="text" id="projectname" onchange="getDetails(this.value)" name="projectname"/> 
      Task Name<input type="text" id="taskname" onchange="getDetails(this.value)" name="taskname"/> 
      Completion Date<input type="date" id="date" onchange="getDetails(this.value)" name="date"/> 
      <div id="cool"></div> 
</form> 

Это мой сценарий.

function getDetails() 
{ 
var mname = document.getElementById('managername').value; 
var pname = document.getElementById('projectname').value; 
var tname = document.getElementById('taskname').value; 
var cdate = document.getElementById('date').value; 
//alert(mname); 
if(mname!==null&&pname!==null&&tname!==null&&cdate!==null) 
{ 
    alert("true"); 
var jsonobj = {"mname" : mname, "pname" : pname, "tname" : tname, "cdate" : cdate}; 
var js = JSON.stringify(jsonobj); 
alert(js); 
var xmlhttp=new XMLHttpRequest(); 
xmlhttp.onreadystatechange=function() 
{ 
if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
    alert(js); 
     document.getElementById("cool").innerHTML=xmlhttp.responseText; 
} 
} 
xmlhttp.open("POST","getAllDetails.php?js="+js,true); 
xmlhttp.send(); 
} 
} 

Только я получаю все значения и присваиваю четыре переменные. Если четыре переменные не равны нулю, я хочу назначить все это в одном объекте. Но проблема заключается в том, что каждый раз он входит в состояние и показывает предупреждение.

В четвертый раз также отображается предупреждение. Но значения не идут на страницу php. Я начинаю. Прошу вас, если я подошел неправильно.

Answer 1

1.Change HTML код для нового кода

<form method="post" action="getAllDteails.php" name="dashboard"> 
     Manager Name<input type="text" id="managername" name="managername" class="v1"/> 
     Project Name<input type="text" id="projectname" name="projectname" class="v1"/> 
     Task Name<input type="text" id="taskname" name="taskname" class="v1"/> 
     Completion Date<input type="date" id="date" name="date" class="v1"/> 
     <input id="Button1" type="button" value="button" onclick="return checkData();" /> 
</form> 

2.Изменение Script кода в новом коде сценария (для проверки значения) кратной

function checkData() { 
     var _v = document.getElementsByClassName("v1"); // get all field 
     var _empty = false; // default has false; 
     var _jsParm = ''; 
     for (var i = 0; i < _v.length; i++) { 
      if (_v[i].value == '') { 
       _empty = true; // if value of null or empty; * 
       break; 
      } 
      _jsParm += _v[i].id + ':\'' + _v[i].value + '\','; 
     } 

     //* if any field is null , show alert 
     if (_empty == true) { 
      alert('Error!!!!! \r\n Please enter data in all field.'); 
      return false; 

     } 
     alert('OK! all field has data.' + '\r\n' + _jsParm) 

     _jsParm = _jsParm.substr(0, _jsParm.length - 1); 
     var jsonobj = '{' + _jsParm + '}'; 
     var js = JSON.stringify(jsonobj); 
     var xmlhttp = new XMLHttpRequest(); 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       alert(js); 
       document.getElementById("cool").innerHTML = xmlhttp.responseText; 
      } 
     } 
     xmlhttp.open("POST", "getAllDetails.php?js=" + js, true); 
     xmlhttp.send(); 
    } 

3.Save
4.Enjoy сейчас !