停止重新加載與JQuery發佈表單

我有以下問題。我的網頁上有兩個表單。在第一種形式中，我可以選擇一個用戶白色的選擇框。當我在表單中選擇用戶時，我會將其發送到同一網頁上的另一個表單。我如何確保第一頁不會在我發佈表單時重新加載？當我輸入一些數據並且用戶想通過郵寄重新加載頁面來添加我輸入的數據時，這並不意味着這種情況。我知道這可以用jQuery來完成，但我不知道這是怎麼回事。停止重新加載與JQuery發佈表單

感謝

來源

2012-03-27 Raymond van Os

你可以做到這一點通過使用jQuery.ajax()功能。從$_POST可變

獲取用戶的數據庫信息

jQuery('#firstForm').live('submit',function(event) { 
    $.ajax({ 
     url: 'GetUserInfo.php', // script to return user info in json format 
     type: 'POST', 
     dataType: 'json', 
     data: $('#firstForm').serialize(), 
     success: function(data) { 
      for(var id in data) { 
       jQuery('secondForm#' + id).val(data[id]); // loop json data to populate each field of second form 
      } 
     } 
    }); 
    return false; 
});

GetUserInfo.php

獲取用戶名。
創建一個用戶信息數組，使得每個value的index應該表示第二個表單字段的id。

例如：

$userInfo = array('FirstName' => 'abc', 'LastName' => 'xyz', 'DOB' => '01/01/2000');

這裏名字，姓氏和DOB是在第二形式

形式元素的ID回聲你數據轉換成JSON格式：

echo json_encode($userInfo);

來源

2012-03-27 10:57:38 NAVEED

可以防止默認（提交）這樣的形式的行爲：

$('#form_1').submit(function(){ 
    $(this).preventDefault(); 
    var selected_user = $('#user_select').val() 
    // do whatever you want 
})

來源

2012-03-27 10:56:11 Hoff

您可以使用：

$('#form_id').submit(function(){ 
    //some code 
    return false; 
});

來源

2012-03-27 10:56:25

jQuery的回答（像一個張貼函數naveed）

只要把目標表上有任何_blank或命名隱藏的iframe。

來源

2012-03-27 10:59:31 Steen

你不需要這個jQuery。你可以給javascript:void(0);簡單地停止形式的訴訟狀

<form action="javascript:void(0)" >

但是，如果你想jQuery的解決方案

$("form").on("submit", function(e) { 
//^Select the form with tag, or #idname or .classname 
    // do stuff 
    return false; //stop the submition or in your case, stop the reload 

    /* 
    return false also is equivalent to 
     e.preventDefault(); 
     e.stopPropagation(); 
    So, you can scale your concept too :) 
    */ 
});

但是，你正在使用可能嘗試這涉及到一個隱藏的元素在另一形成。所以，我會給出整個事情如何運作的一個小邏輯部分。

例HTML：

<form name="form1" id="form1"> 
    <select id="formselect1"> 
     .... 
    </select> 
</form> 
<!-- And Form 2 --> 

<form name="form2" id="form2"> 
    <input type="hidden" id="inputfromform1" name="inputfromform1" /> 
</form>

例JS：

$("#form1").submit(function() { 
    var tempval = $("#formselect1").val(); //get the value of form 1 
    $("#inputfromform1").val(tempval); // and place in the element of form 2 
    return false; //Here stop it 
});

來源

2012-03-27 11:00:27 Starx

<script type="text/javascript"> 
$(document).ready(function() 
{ 
    $("#selectUserForm").validate(
    { 
     debug: false, 
     submitHandler: function(form) 
     { 
       $.post('process.php', $("#selectUserForm").serialize(), function(data) 
      { 
        $('textarea#c_email_to').html(data); 
      }); 
     } 
    }); 
</script>

來源

2012-03-28 08:31:53

停止重新加載與JQuery發佈表單

回答

相關問題