Jquery onchange select 向 PHP 提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10397925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery onchange select submit a form to PHP
提问by Student
I have no code to really show you here, but let's say I have a form with 3 HIDDEN fields that contain date, city and address. I also have a select with 3 options (let's say Apple, Microsoft and Google).
我没有真正向您展示的代码，但假设我有一个包含 3 个包含日期、城市和地址的 HIDDEN 字段的表单。我还有一个包含 3 个选项的选择（比如说 Apple、Microsoft 和 Google）。
What I want is that when a user changes the select to a different option, jquery should send the value of the selectbox + the 3 hidden fields to a PHP page, say proces.php. Proces.php handles the mysql_query etc, and it doesn't give anything back.
我想要的是，当用户将选择更改为不同的选项时，jquery 应该将选择框的值 + 3 个隐藏字段发送到 PHP 页面，比如 proces.php。Proces.php 处理 mysql_query 等，它不回馈任何东西。
Can anyone show me how this is done? I don't expect anyone to write a whole script for me since I didn't provide any html code, but just the outline, or maybe a link to a tutorial or something.
谁能告诉我这是如何完成的？我不希望有人为我编写整个脚本，因为我没有提供任何 html 代码，而只是提供了大纲，或者可能是教程的链接或其他内容。
回答by Rory McCrossan
First of all your form should look something like this:
首先，您的表单应如下所示：
<form action="process.php" method="post" id="myForm">
<select name="site" id="site">
<option>Apple</option>
<option>Google</option>
<option>Microsoft</option>
</select>
<input type="hidden" name="date" value="01/05/2012" />
<input type="hidden" name="city" value="London" />
<input type="hidden" name="address" value="[... address ...]" />
</form>
Then to submit via AJAX you would use the serialize()method to gather the form data:
然后通过 AJAX 提交，您将使用该serialize()方法来收集表单数据：
$("#site").on("change", function() {
var $form = $("#myForm");
var method = $form.attr("method") ? $form.attr("method").toUpperCase() : "GET";
$.ajax({
url: $form.attr("action"),
data: $form.serialize(),
type: method,
success: function() {
// do stuff with the result, if you want to
}
});
});
Alternatively if you don't want to use AJAX, just the standard form submission, you can trigger the form to submit, like this:
或者，如果你不想使用 AJAX，只是标准的表单提交，你可以触发表单提交，如下所示：
$("#site").on("change", function() {
$("#myForm").submit();
});
回答by Parv Sharma
if you want to send the form using jquery you can use Jquery Form plugin<
http://jquery.malsup.com/form/so what basically u can do is to use
如果你想使用 jquery 发送表单，你可以使用 Jquery 表单插件<
http://jquery.malsup.com/form/所以基本上你可以做的是使用
$(document).ready(function(){
$('form selector').ajaxForm(opts);
//u can define the opt urself itz easy look at the link
$("selects selector").change(function(){
$(form selector).ajaxSubmit(function(){//something you wanna do if form is submitted successfully})
});
});
回答by Robert
Let's see, so it's a form, and it's submitted when the dropdown select is changed? You don't really need tu use AJAX for that. You can use the jquery .change() method like this:
让我们看看，所以它是一个表单，并且在更改下拉选择时提交？您真的不需要为此使用 AJAX。您可以像这样使用 jquery .change() 方法：
$('.mydropdown').change(function() {
// Also do some checking to see if the values are not empty
// and then submit the form using:
$('#myform').submit();
});
in the php file you can get them using the $_POST variable.
在 php 文件中，您可以使用 $_POST 变量获取它们。
回答by mrbinky3000
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="#">
<label for="brand">Brand</label>
<select name="brand" id="brand">
<option>Apple</option>
<option>Microsoft</option>
<option>Google</option>
</select>
<input type="hidden" name="date" id="date" value="7/4/1776" />
<input type="hidden" name="city" id="city" value="My City" />
<input type="hidden" name="address" id="address" value="123 Fake Street" />
</form>
<script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
$('#brand').on('change',function() {
$.post("process.php", $("#form1").serialize());
});
</script>
</body>
</html>
