CODEWITHSUNDEEP
phpjquerysqlajax
Jeff Walters
Jeff Walters

Reputation: 161

Simplest way to update an input field using an AJAX call through jQuery from an SQL database using PHP

I'm building an inventory system for the company I work for, and I have a problem that I was hoping could be solved with as little coding as possible. I want to make it so when someone clicks on an option from a select tag, an AJAX call using $.ajax() from jQuery would update

<input id="cratesRemaining">

Can I get the input field to update on selection of the option I guess would be the easiest way to ask.

Here's some of the code:

              <select id="busShell">
                        <option disabled selected="selected" class="default">
                            --- Choose Shell Index ---
                        </option>
              </select>

The select list will be generated using the shell_index column of each row in the SQL database.

Example of the resulting code:

    <option value="0">0488</option>

Would return the result "1.03" from the database column crate_stock when column shell_index is referenced.

Here is the jQuery script I have setup to call the php file:

                        <script>

                            $.ajax({
                                url: '/php/busSubmit.php',

                                success: function(data) {
                                $('#cratesRemaining').val(data);
                                }
                            });

                        </script>

For some added information the database is named paper_inventory and the table is bus_shells. All shell indexes are 4-digit numbers, and it's only those two columns in that table. I have another table with 7 fields for paper selection, but I want to get the simple one working first.

Upvotes: 0

Views: 7807

Answers (3)

Jeff Walters
Jeff Walters

Reputation: 161

There were some syntax errors in the code you provided. I fixed them though. as such:

 $("#busShell").on("change", function(){ 

 $.ajax({                                           
         url: "/php/busSubmit.php",
         dataType:"datatype you expect",
         success: function(data) {
              $("#cratesRemaining").val(data)}
         });
 });`

Upvotes: 0

Coderaemon
Coderaemon

Reputation: 3867

As mentioned by Jeremy in comment.

$('#busShell').on('change', function(){ 
   $.ajax({
      url: '/php/busSubmit.php',
      dataType:'datatype you expect'
      success: function(data) {
      $('#cratesRemaining').val(data);
      })
});

Upvotes: 1

Karl
Karl

Reputation: 833

In the HTML just edit so the value in the option-tags is the same value as the value displayed. Like <option value="0488">0488</option>

JS/jQuery

$('#busShell').on('change', function() {
    $.post('foo.php', { shellIndex: $(this).val() }, function(data) {
        $('#cratesRemaining').val(data.crates);
    });
});

You now get $_POST['shellIndex'] in your PHP script, so query your database with that and then return a json string with crates = remaining crates. Then it should be done! Look at json_encode() and don't forget to send the right headers header('Content-type: application/json');.

Upvotes: 0

Related Questions