iQuery提交表單沒有頁面重新加載

Question

我有一個窗體有一個隱藏的字段和一個按鈕。當按鈕被點擊時，我希望它運行一個jQuery腳本，它反過來調用一個PHP腳本來更新底層數據表。

如何在單擊表單按鈕時運行jQuery函數。

我的jQuery

$(document).ready(function(){ 
    $('#roominput').click(function(){ 
     $.post('alert_update.php', { recordid: form1.RecordID.value }, 
     function(result) { 
      console.log(); 
     }); 
    }); 
}); 

我的形式

<form id="form1" name="form1" method="post" id="ajax"> 
    <input type="image" src="../../../../conf_images/butler_request.png" name="alert_button" id="alert_button" value="Submit" /> 
    <input type="hidden" name="MM_update" value="form1" /> 
    <input type="hidden" id="alert" name="RecordID" value="<?php echo $row_ConfAlert['RecordID']; ?>" /> 
</form> 

誰能幫我這個問題，非常感謝您的時間。

Answer 1

使用submit事件的形式，而不是點擊。然後使用e.preventDefault();來防止重新加載。然後使用$(this).serialize()獲取表單數據並傳遞給服務器。

$('#form1').submit(function(e){ 
    e.preventDefault(); 
    $.post('alert_update.php', $(this).serialize(), function(result) { 
     console.log(); 
    }); 
}); 

Answer 2

，你也可以使用這個

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#roominput').click(function(){ 
     $.ajax({ 
      url: "alert_update.php", 
      dataType: 'json', //if your data type is json 
      data: $('#form1 [name="RecordID"]').val(), 
      success: function(response) { 
      console.log(); 
      } 
     }); 
     return false; 
    }); 
    $('#form1').on("submit", function(){ 
     return false; 
    }) 
}); 
</script> 

Answer 3

Ajax in Jquery in commonly used for doing some submit actions without page reload. 

結帳http://www.w3schools.com/jquery/jquery_ajax_intro.asp