从1个脚本中的多个输入字段调用jQuery AJAX

Question

I'm working on my first HTML form that performs an AJAX HTTP POST using jQuery. 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.

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.

Here's my input fields:

Manager Phone

Here's my Javascript that is working on the storeManager input field:

<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.

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.

Answer 1

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.

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