Question

我有以下问题。我的网页上有两个表单。在第一个表单上，我可以选择一个选择框的用户。当我在表单中选择用户时，我会将其发送到同一网页上的另一个表单。当我发布表单时，如何确保第一页不重新加载？当我输入一些数据并且用户想要通过邮寄重新加载页面而添加我输入的数据时，并不打算这样做。我知道这可以用jquery完成，但我不知道这是怎么回事。

由于

Answer 1

您可以使用jQuery.ajax()功能实现此目的。

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

从$_POST变量
从数据库中获取用户信息。
创建一个用户信息数组，以使每个index的{{1}}代表第二个表单字段的value。

例如：

id

这里FirstName，LastName和DOB是第二种形式的表单元素的ID

将数据回显为json格式：

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

Answer 2

您可以阻止此类表单的默认（提交）行为：

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

Answer 3

您可以使用：

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

Answer 4

jQuery回答（如NAVEED发布的回答）

OR

只需使用_blank或命名隐藏的iframe将目标放在表单上。

Answer 5

你不需要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
});

Answer 6

<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>

使用JQuery停止在表单上重新加载

6 个答案: