PHP HTML Input Pass Multiple Parameters to jQuery AJAX Call

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 I want it to trigger the AJAX call and pass the value of the input field as well as the value from another PHP variable.

Here's the input in question:

<td><input type="text" class="form-control" id="storeManager" name="storeManager" value="Peter McMahon"></td>

I have a PHP variable - $uuid - which I also need to pass to my AJAX script, as well as the value of the input text field.

Here's my script as it currently stands:

<script type="text/javascript">
$(document).ready(function() {
    $("#storeManager").change(function(){
        $.ajax({
        url: "editProject.php",
        data: {
            storeManager: storeManager, 
            uuid: uuid
            },
        success: function(data) {
            $("#storeManager").html(data).addClass("has-success");
        },
        error: function (data) {
            $("#storeManager").html(data).addClass("has-error");
        }
        }); 
    });
});

</script>

I'm new to jQuery and AJAX and have tried everything I can think of but not sure how to add the required parameters?

Answer 1

Hopefully I understand what you are getting at.

I am making an assumption that the markup you are providing lives in a file that is being processed by PHP and that $uuid exists in the context.

<?php
    $uuid = '22dcf5f0-cbca-4dd7-8b5e-f9ca68a301ff';
?>

<td><input type="text" class="form-control" id="storeManager" name="storeManager" value="Peter McMahon"></td>

<script type="text/javascript">
$(document).ready(function() {
    $("#storeManager").change(function(){
        var storeManager = $("#storeManager").val();
        $.post('editProject.php', { storeManager: storeManager, uuid: '<?=$uuid?>' }, function(data) {
            // cannot set $("#storeManager").html() - do something else with data.
            // if you alter the #storeManager html input in any way, you will need to rebind this eventListener.
            $("#storeManager").addClass("has-success");
        }).fail(function () {
            // no data available in this context
            $("#storeManager").addClass("has-error");
        });
     }); 
});

</script>

Answer 2

You need to get the value of your html input like this, and also you can put the $uuid value in a input field (you can hide it if you want) so you can call it in same way:

....
data:{
    storeManager:$(#storeManager).val();
    uuid: $(#uuid).val();
}
....

Hope it helped!