如何在不通過驗證刷新的情況下傳遞值

Question

在此之後，我想在文件驗證通過後，所有值都通過AJAX傳遞下一頁，所以試圖這樣做，但我無法得到正確的答案，假設選擇城市字段並單擊按鈕meaans頁面令人耳目一新，但我的條件不想刷新頁面怎麼能做到這一點？

function validateForm() { 
 
\t \t  var city = document.forms["myForm"]["city"].value; 
 
\t \t  if (city == null || city == "") { 
 
\t \t  document.getElementById("state_err").innerHTML = "Select Your State"; 
 
\t \t \t return false; 
 
\t \t  } 
 
\t \t \t else{ 
 
\t \t \t $.ajax({ 
 
\t \t \t url:'search_truck.php', 
 
\t \t \t type:'POST', 
 
\t \t \t data : { 'state_id' : city}, 
 
\t \t \t success:function(data){ 
 
\t \t \t \t //var res=jQuery.parseJSON(data);// convert the json 
 
\t \t \t \t console.log(data); 
 
\t \t \t }, 
 
\t \t \t }); 
 
      //return true; 
 
      /*var formData = new FormData(); 
 
      var formData = new FormData($('#newUserForm')[0]); 
 
      formData.append('file', $('input[type=file]')[0].files[0]);*/ 
 
\t \t \t } 
 
\t \t }

<form id="basicForm" method="POST" onsubmit="return validateForm()" name="myForm" enctype="multipart/form-data" > 
 
       <div class="col-md-4"> 
 
        <select name="city" id="city" onchange="getCity(this.value);" class="form-control intro-form-fixer"> 
 
         <option value="">Select City</option> 
 
         <?php 
 
         include("dbconfig.php"); 
 
         $sql = mysql_query("SELECT * FROM state_list"); 
 
         while($row=mysql_fetch_assoc($sql)){ 
 
         ?> 
 
         <option value="<?php echo $row['id'];?>"><?php echo $row['state'];?></option> 
 
        <?php } ?> 
 
        </select>&nbsp;&nbsp;<span id="state_err"></span> 
 

 
       </div> 
 
\t \t \t \t <div class="col-md-4"> 
 
\t \t \t \t <select class="form-control intro-form-fixer" autocomplete="off" name="area" id="area" style="width:100%;"> 
 
        <option value="">Select Area</option> 
 
        </select> 
 
       </div> 
 
       <div class="col-md-2"> 
 
\t \t \t \t <button type="submit" id="btn-submit" class="btn btn-success">SEARCH</button> 
 
       </div> 
 
\t \t \t \t </form>

Answer 1

你想用的preventDefault（）;

因此，獲取表單並將事件傳遞給回調函數。然後調用變量的preventDefault（）。

因爲您正在將數據發送到服務器，爲什麼不在那裏驗證它，然後返回錯誤？

$('#basicForm').submit(function (e) { 
 
    e.preventDefault(); 
 
    validateForm(); 
 
}); 
 

 
function validateForm() { 
 
    var city = document.forms["myForm"]["city"].value; 
 
    if (city == null || city == "") { 
 
     document.getElementById("state_err").innerHTML = "Select Your State"; 
 
     return false; 
 
    } 
 
    else { 
 
     $.ajax({ 
 
      url: 'search_truck.php', 
 
      type: 'POST', 
 
      data: {'state_id': city}, 
 
      success: function (data) { 
 
       //var res=jQuery.parseJSON(data);// convert the json 
 
       console.log(data); 
 
      }, 
 
     }); 
 
     //return true; 
 
     /*var formData = new FormData(); 
 
     var formData = new FormData($('#newUserForm')[0]); 
 
     formData.append('file', $('input[type=file]')[0].files[0]);*/ 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="basicForm" method="POST" onsubmit="return validateForm()" name="myForm" enctype="multipart/form-data"> 
 
    <div class="col-md-4"> 
 
     <select name="city" id="city" onchange="getCity(this.value);" class="form-control intro-form-fixer"> 
 
      <option value="">Select City</option> 
 
      <?php 
 
         include("dbconfig.php"); 
 
         $sql = mysql_query("SELECT * FROM state_list"); 
 
         while($row=mysql_fetch_assoc($sql)){ 
 
         ?> 
 
      <option value="<?php echo $row['id'];?>"><?php echo $row['state'];?></option> 
 
      <?php } ?> 
 
     </select>&nbsp;&nbsp;<span id="state_err"></span> 
 

 
    </div> 
 
    <div class="col-md-4"> 
 
     <select class="form-control intro-form-fixer" autocomplete="off" name="area" id="area" style="width:100%;"> 
 
      <option value="">Select Area</option> 
 
     </select> 
 
    </div> 
 
    <div class="col-md-2"> 
 
     <button type="submit" id="btn-submit" class="btn btn-success">SEARCH</button> 
 
    </div> 
 
</form>