防止使用jQuery Ajax時的默認操作

我試圖阻止使用ajax提交表單時的默認操作，但我相信我的代碼錯誤，因爲頁面似乎執行了「刷新」並且表單清除了，但是沒有什麼被髮送到數據庫。我嘗試在表單的'action'部分添加鏈接到php處理腳本，它確實提交到數據庫，所以問題似乎與我的jQuery代碼。防止使用jQuery Ajax時的默認操作

<script type="text/javascript"> 
$(document).ready(function(e){ 
     e.preventDefault(); 
    $("#rpack_add_form").validate({ 
     submitHandler: function(form) { 
      // do other stuff for a valid form 
      $.post('<?php echo BASE_URL?>/core/addrpack.php.php', $("#rpack_add_form").serialize(), function(data) { 
       $('#ajaxResult').html(data); 
      }); 
     } 
    }); 
}); 
</script>

我的表單代碼：

<div id="rpacks_admin" style="display: none;"> 
<h5>Add A New Recovery Pack</h5> 
    <form id="rpack_add_form" class='small_form' name='rpack_add_form' action='' method='post'> 
     Contract: 
     <select id="contract_select" name="contract" onchange="showContract(this)"> 
      <option value='0'>Select Contract</option> 
       <?php 
       $sth = $conn->query("SELECT * FROM `contracts`"); 
       while($row = $sth->fetch(PDO::FETCH_ASSOC)) 
       { 
        echo '<option value='.$row['contracts_id'].'>'.$row['contracts_name'].'</option>'; 
       } 
       ?> 
     </select> 
      <div id="contract1" class="admin_box"> 
       Prefix: <input name='prefix' type='text' id='prefix'><br /> 
       Number: <input name='number' type='text' id='number'><br /> 
       Suffix: <input name='suffix' type='text' id='suffix'><br /> 
      </div> 
      <div id="contract2" class="admin_box"> 
       <p>Sapce for content</p> 
      </div> 
      <div id="contract3" class="admin_box"> 
       <p>Sapce for contentrm</p> 
      </div> 
     Received: 
      <select id="select_receive" name="received" onchange="showLocation(this)"> 
       <option value="0">No</option> 
       <option value="1">Yes</option> 
      </select><br /> 
     <div id="location_box" style="display: none; padding-top: 5px;">Location: <input name='location' type='text' id='location'></div> 
     <input class='button' type=submit value='Add' name='add_rpack'>    
    </form> 
<a class='hide_div' href='javascript:void(0);' onclick='hideRdiscDiv()'>Close</a>

和我的PHP如果需要

  <?php 
      session_start(); 
      include_once 'config.php'; 
      include_once 'connect.php'; 
      include_once 'bcrypt.php'; 
      $prefix = $_POST['prefix']; 
      $number = $_POST['number']; 
      $suffix = $_POST['suffix']; 
      $contract = $_POST['contract']; 
      $received = $_POST['received']; 
      $location = $_POST['location']; 

      //Check if password and username has been submitted then add to DB 
      if (empty ($number)) 
      { 
       echo "You need to enter a recovery pack number"; 
      }else 
      { 
       $sth = "INSERT INTO `rpacks` (rpacks_prefix, rpacks_number, rpacks_suffix, rpacks_contract, rpacks_receive, rpacks_location) VALUES (:prefix, :number, :suffix, :contract, :received, :location)"; 
       $q = $conn->prepare($sth); 
       $q->execute(array(':prefix'=>$prefix,':number'=>$number,':suffix'=>$suffix,':contract'=>$contract, ':received'=>$received, ':location'=>$location)); 
       echo "Added"; 
      }

來源

2013-04-22 twigg

你需要從你的javascript函數返回false。 – karmafunk 2013-04-22 15:56:16

只是想知道什麼e.preventDefault（）;內部準備好的回調函數應該做什麼？ – 2013-04-22 15:56:45

你通常不會爲提交處理程序中的有效form_做其他東西。您爲該http://docs.jquery.com/Plugins/Validation定義規則 – Ejaz 2013-04-22 15:57:44

的.validate()對象有一個sendForm參數。這是設置爲true默認，但您需要將其設置爲false，如下面的代碼，以防止表單被提交：

$(document).ready(function() { 
    $('#rpack_add_form').validate({ 
     submitHandler: function (form) { 
      // do other stuff for a valid form 
      $.post('<?php echo BASE_URL?>/core/addrpack.php.php', $('#rpack_add_form').serialize(), function (data) { 
       $('#ajaxResult').html(data); 
      }); 
     }, 
     sendForm: false 
    }); 
});

您可以reference the docs獲取更多信息。

來源

2013-04-22 15:59:00

防止使用jQuery Ajax時的默認操作

回答

相關問題