dongzhang6021 2011-08-01 10:48
浏览 119
已采纳

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

This is all in a php file

<!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="obesemuleaccount@yahoo.com"/> 
    <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-->

So I'm using Jquery and Ajax, and I need to submit the form automatically.

I've tried using things like document.myform.submit, but that doesn't seem to work. It works when I am not using ajax, but that causes the page to refresh to the target of the php file.

I think I'm just missing some syntax. I did a search and found a few threads like this one: Ajax auto form submit

But I'm more of a hobbyist designer, so I don't really understand what they are saying. I wouldn't put the task of fixing my code on others, but I'm pretty sure the change is minor, and I've been up a while trying to figure this out. Many thanks to anyone that helps! Please be very detailed in your directions, it'd be best in fact if you could provide the fix directly in the code itself.

edit: please don't laugh too hard at my comments, I understand the code (after much googling) much better now, that was a revision from a few hours ago.

double edit: here's a sample php script called process.php, you will need to edit it to see if the autosubmit works though. As mentioned above, you can do this with a MySQL database.

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

4条回答 默认 最新

  • douweng9427 2011-08-01 10:59
    关注

    For minimal effort I think this will work

    <script>
    
    $(document).ready(function(){
            submit_form();
    });
    
    function submit_form () {
        $.post('process.php', $("#myform").serialize(), function(data) {
            $('#results').html(data);
        });
    }
    
    </script>
    

    Q: what is validate?, myform gets validated

    A: Using the validate method, it ensures that the data in the fields are valid before the form is submitted.

    Q: at what point is this message displayed?

    A: When the validation does not pass. For example you specified the name to be "required" and the email must be an "email" a few lines earlier.

    Q: what is serialization? myform gets serialized and assigned an action

    A: Serialize reads the value of all the fields in the form and constructs the query string suitable for GET and POST. In your case, after serialization, the POST data will be name=Charlie&email=obesemuleaccount@yahoo.com"

    Q: what is this?

    A: "data" is passed as a parameter to the callback function. In this case, the output of process.php will be written into the innerHTML of #('#results')

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥15 stable diffusion
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题:求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题:怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab,jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿