如何在不刷新页面的情况下自动提交此表单？

这是所有在一个PHP文件如何在不刷新页面的情况下自动提交此表单？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title>JQuery Form Example</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script><!--need at least one instance of jquery--> 
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script><!--ajax to use with jquery--> 
    <script type="text/javascript"> 
    $(document).ready(function(){//when the document has loaded 
     $("#myform").validate({//Q: what is validate?, myform gets validated 
      debug: false, 
      rules: { 
       name: "required",//name and email are the only things passed 
       email: { 
        required: true, 
        email: true//I guess this defines the input as an email 
       } 
      }, 
      messages: {//at what point is this message displayed? 
       name: "Please let us know who you are.", 
       email: "A valid email will help us get in touch with you.", 
      }, 
      submitHandler: function(form) {//submit the form 
       // do other stuff for a valid form 
       $.post('process.php', $("#myform").serialize(), function(data) {//Q:what is serialization? myform gets serialized and assigned an action 
        $('#results').html(data);//what is this? 
       }); 
      } 
     }); 
    }); 

    window.onload=function() 
    { 
    } 


    </script> 
    <style> 
    label.error { width: 250px; display: inline; color: red;} 
    </style> 
</head> 
<body> 

<form name="myform" id="myform" action="" method="POST"> 
<!-- The Name form field --> 
    <label for="name" id="name_label">Name</label> 
    <input type="text" name="name" id="name" size="30" value="Charlie"/> 
    <br> 
<!-- The Email form field --> 
    <label for="email" id="email_label">Email</label> 
    <input type="text" name="email" id="email" size="30" value="[email protected]"/> 
    <br> 
<!-- The Submit button --> 
    <input type="submit" name="submit" value="Submit"> 
</form> 
<!-- We will output the results from process.php here --> 
<div id="results"><div> 
</body> 
</html> 

<!--ok, so I want to first try some stuff out to get a feel for how the form works--> 
<!--upload the form to the site somewhere--> 
<!--access and play around with it--> 
<!--then figure out how to submit to multiple php forms-->

所以我使用jQuery和Ajax，我需要自动提交表单。

我使用像document.myform.submit尝试过，但似乎并没有工作。它适用于我不使用ajax，但会导致页面刷新到php文件的目标。

我想我只是缺少一些语法。我做了一个搜索，发现像这样的几个线程： Ajax auto form submit

但我更喜欢设计师，所以我不太明白他们在说什么。我不会把我的代码固定在别人身上，但我敢肯定，这种改变是微不足道的，我一直在努力弄清楚这一点。非常感谢任何有帮助的人！请在您的指示中详细说明，如果您可以直接在代码本身中提供修复，则事实上最好。

编辑：请不要在我的意见笑得太辛苦，我理解的代码（后多使用Google）现在好多了，这是从几个小时前的修订版。

双重编辑：这里有一个名为process.php样品的PHP脚本，您将需要编辑，看是否自动提交作品虽然。如上所述，您可以使用MySQL数据库来做到这一点。

print "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>";

来源

2011-08-01 obesechicken13

对于最小的努力，我认为这会工作

<script> 

$(document).ready(function(){ 
     submit_form(); 
}); 

function submit_form() { 
    $.post('process.php', $("#myform").serialize(), function(data) { 
     $('#results').html(data); 
    }); 
} 

</script>

问：什么是验证？myForm会得到确认

A：使用validate方法，它可以确保在字段中的数据是有效的表单提交之前。

问：此消息显示在什么位置？答：当验证不通过时。例如，您将名称指定为“必需”，并且电子邮件必须是前几行的“电子邮件”。

问：什么是序列化？ myform被序列化并分配一个动作

答：Serialize读取表单中所有字段的值，并构造适用于GET和POST的查询字符串。在你的情况，系列化后，POST数据将名称=查理& [email protected]”

问：这是什么

？答：‘数据’被作为一个参数传递回调函数，在这种情况下，进程的输出。PHP将被写入＃的innerHTML（“＃结果”）

来源

2011-08-01 10:59:08 Jeremy

哇谢谢！我认为所有的答案都有效，我喜欢jQuery表单插件。我早些时候使用它。尽管这个答案是最简洁的，但它教会了我更多关于序列化的知识。我知道表单起作用了，它只是没有自动提交，我会在下一次提出这个问题时尝试更具体，更不累。谢谢！ – obesechicken13

你可以使用jQuery的$（“形式”）。submit（）方法来检查时提交表单，然后你做你的所有东西AJAX后，您return false;，防止默认提交。

来源

2011-08-01 10:56:30

这个jQuery插件应该是工作http://malsup.com/jquery/form/

只是简单的

$('#myform').submit(function() 
{ 
    $('#myform').ajaxForm(); 
    return false; 
});

和您的形式将所需提交而无需刷新页面。

来源

2011-08-01 11:01:16 vitkovskii

你的脚本工作正常。我测试了它，它工作正常。要提交表单自动在你windo.onload功能，您必须加入这一行：

$("#myform").submit();

它会自动提交表单页面加载。

要测试你的页面，并看到表单提交结果，我建议你先提交你的页面到一个简单的html文件（包含一些单词...），然后去php文件。

并更改sumbmitHandler根据您所提交网页的HTML文件的名称：（在我的文本文件是target.html上和containt只有一行字喜）

submitHandler: function(form) {//submit the form 
    // do other stuff for a valid form 
    $.post('target.html', $("#myform").serialize(), function(data) {//Q:what is serialization? myform gets serialized and assigned an action 
     alert(data); 
     $('#results').html(data);//what is this? 
    }); 
}

在页面加载你会看到并提醒包含你的html页面的内容，div结果也会被这个内容填充。

我希望它有帮助！

请率。

来源

2011-08-01 13:05:39 zelmarou

如何在不刷新页面的情况下自动提交此表单？

回答

相关问题