[英]jQuery AJAX call from multiple input fields within the 1 script
I'm working on my first HTML form that performs an AJAX HTTP POST using jQuery. 我正在处理我的第一个使用jQuery执行AJAX HTTP POST的HTML表单。 When a user makes a change to an input text field and tabs out of the field it triggers the AJAX script which in turn calls a PHP script which performs a database update.
当用户更改输入文本字段并在该字段外进行制表时,它将触发AJAX脚本,该脚本随后调用执行数据库更新的PHP脚本。
I've got this working successfully for my first input field - I would now like to extend this to a 2nd, 3rd etc input fields but want to try and avoid having multiple scripts that perform very similar functions. 我已经在我的第一个输入字段中成功完成了此工作-现在,我想将其扩展到第二,第三等输入字段,但希望尝试避免使用多个脚本执行非常相似的功能。 I'm new to jQuery and AJAX so learning the syntax as I go.
我是jQuery和AJAX的新手,因此可以随时学习语法。
Here's my input fields: 这是我的输入字段:
Manager Phone 经理电话
Here's my Javascript that is working on the storeManager input field: 这是我在storeManager输入字段上运行的Javascript:
<script type="text/javascript">
$(document).ready(function() {
$("#storeManager").change(function(){
var storeManager = $("#storeManager").val();
$.post('editProject.php', { storeManager: storeManager, id: '1E1DDA14-D2C6-4FC8-BA5F-DBCCC7ABAF7F' }, function(data) {
$("#managerRow").addClass("success");
}).fail(function () {
// no data available in this context
$("#managerRow").addClass("danger");
$("#ajaxAlert").addClass("alert alert-danger");
});
});
});
</script>
I essentially need to branch and pass an additional POST parameter to the editProject.php script so it knows which database field to update, and then conditionally add a class to the appropriate row. 我本质上需要分支并将附加的POST参数传递给editProject.php脚本,以便它知道要更新哪个数据库字段,然后有条件地将一个类添加到适当的行。
Everything I've tried breaks the script when I try and get it to branch or pass a parameter based on the input field that is being edited. 我尝试过的所有事情都会在尝试使脚本分支或根据正在编辑的输入字段传递参数时破坏脚本。 I haven't been able to find any examples that show the correct syntax to have the one script that is called by different input fields - I'm presuming this is possible instead of having multiple versions of the same script acting on different fields.
我还没有找到任何显示正确语法的示例,以使一个脚本被不同的输入字段调用-我想这是可能的,而不是让同一脚本的多个版本作用于不同的字段。
You could do something like this using :input
or a class
that they all have 您可以使用
:input
或它们都具有的class
来做类似的事情
$(":input").on("change", function(){
var text = $(this).val();
var idOfInput = $(this).attr("id");
//your post to php function using the above variables
});
From this you could post the id
of the input to your php script using the idOfInput
variable which you could then on the php side use a case switch
to do a different query depending on which id
is sent to the php 由此,您可以使用
idOfInput
变量将输入的id
发布到您的php脚本中,然后您可以在php端使用case switch
根据发送到php的id
进行不同的查询
Here is a jsfiddle showing how it works 这是一个显示它如何工作的jsfiddle
You just try to post a value. 您只是尝试发布一个值。 for example
type
. 例如
type
。 Which should contain some value for identify the ajax call. 其中应包含一些用于标识ajax调用的值。
If it is for login, then add
type = 'login'. Then check the value of $_POST['type'] and write php according to it
如果用于登录,则添加
type = 'login'. Then check the value of $_POST['type'] and write php according to it
type = 'login'. Then check the value of $_POST['type'] and write php according to it
sample.php sample.php
if(isset($_POST['type']))
{
if($_POST['type'] == 'login')
{
//your code goes here
}
}
您可以使用这种代码:
$("#storeManager, #Manager, #Phone").change(function(){
This works for multiple fields. 这适用于多个字段。 Just call the same function from different input fields.
只需从不同的输入字段调用相同的函数即可。 I just broke your code into two parts.
我只是将您的代码分为两部分。 1. onChange function of each individual field, and 2. function call by passing the field parameters.
1.每个字段的onChange函数,以及2.通过传递字段参数来调用函数。
<script type="text/javascript">
$(document).ready(function() {
$("#storeManager").change(function(){ yourFunction(this) }):
$("#worker").change(function(){ yourFunction(this) }):
$("#someX").change(function(){ yourFunction(this) }):
yourFunction(field)
{
var value = $(field).val();
var inputId=field.id;
$.post('editProject.php', { inputValue: value, id: inputId }, function(data) {
$('#'+inputId+'Row').addClass("success"); // (this looks like: *#storeManagerRow* ) you can change your Row id's accordingly to make your work easier. Eg: for **#storeManager** make this id as **storeManagerRow**
}).fail(function () {
// no data available in this context
$('#'+inputId+'Row').addClass("danger");
$("#ajaxAlert").addClass("alert alert-danger");
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.