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

发布于 2024-11-27 04:50:55 字数 3701 浏览 0 评论 0原文

这一切都在一个 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 自动表单提交

但我更像是一个业余设计师，所以我真的不知道明白他们在说什么。我不会把修复我的代码的任务交给其他人，但我很确定更改很小，而且我已经花了一段时间试图解决这个问题。非常感谢任何提供帮助的人！请非常详细地说明您的指示，事实上，如果您可以直接在代码本身中提供修复程序，那就更好了。

编辑：请不要对我的评论笑得太厉害，我现在更好地理解了代码（经过多次谷歌搜索），这是几个小时前的修订。

双重编辑：这是一个名为 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>";

原文

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="[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-->

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无言温柔 2024-12-04 04:50:56

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

<script>

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

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

</script>

问：什么是验证？，myform 得到验证

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

问：什么时候显示此消息？

A：当验证未通过时。例如，您将名称指定为“必需”，并且电子邮件必须是前面几行的“电子邮件”。

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

A：序列化读取表单中所有字段的值并构造适合 GET 和 POST 的查询字符串。在您的情况下，序列化后，POST 数据将为 name=Charlie&[email protected]"

问：这是什么？

答：“data”作为参数传递给回调函数。在这种情况下，输出为process.php将被写入#('#results')的innerHTML中

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 protected]"

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

回复收藏 0 原文

Smile简单爱 2024-12-04 04:50:56

您可以使用 jQuery $('form').submit() 方法来检查表单何时提交，然后在完成所有 AJAX 操作后，返回 false; 并阻止默认提交。

回复收藏 0 原文

凉栀 2024-12-04 04:50:56

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

只是简单

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

和你的表单将在不刷新页面的情况下提交。

this jquery plugin should be work http://malsup.com/jquery/form/

Just simple

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

and your form will be submited without refreshing the page.

回复收藏 0 原文

等你爱我 2024-12-04 04:50:56

您的脚本运行正常。我测试了一下，效果很好。
要自动提交表单，您必须在windo.onload 函数中添加此行：

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

它将在页面加载时自动提交您的表单。

为了测试您的页面并查看表单提交结果，我建议您首先将页面提交到一个简单的 html 文件（包含一些单词...），然后转到 php 文件。

并根据您要提交页面的 html 文件的名称更改您的 sumbmitHandler：
（在我的例子中，文本文件是 target.html 并且仅包含单词“Hi”）

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 结果也将填充此内容。

我希望它有帮助！

请评价。

Your script is working correctly. I tested it and it works fine.
To submit your form automatically you must add this line in you windo.onload function:

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

It will submit your form automatically on page load.

To test you page and see the form submit result i suggest you to submit your page for to a simple html file first ( containing some words ... ) and then go for the php file.

And change you sumbmitHandler according to the name of the html file you are submitting page to:
(in my case the text file is target.html and containt ONLY the words Hi)

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?
    });
}

On page load you will see and alert containt the content of your html page and the div results will also be filled with this content.

I hope it helps !

Please rate.

回复收藏 0 原文

~没有更多了~