CODEWITHSUNDEEP
phpjquerymysqlajaxforms
DavidG
DavidG

Reputation: 834

Updating form fields using AJAX and PHP

Problem: How can I update a form's select input values and text input fields based on a MySQL query after select input's onchange event is fired?

What I've tried: I have tried to use AJAX with post and get data types, calling a php file that runs the query and echoes the results. Nothing displays. Any errors I have gotten along the way are usually small things that result in server 500 error. I have placed console.log statements in the function that runs the JQuery AJAX request. The change event was detected, the ajax success was called. I also tried using .load(), with GET and POST, no luck either. I have other features that implement AJAX, and I've tried modifying them to fit this scenario and have been unsuccessful.

I also tried to only use a select input that when changed would use AJAX request and .load function to display the other inputs which would be formatted on the php side and echoed to page with selected and values reflecting the db result.

What I want: I would like a simple example of a form with a select input with three options, text type input, and a submit button. The form is a client backend form to send updates to the MySQL db. Each input represents a filed in the db. The idea is that when the user changes the select inputs selected value, a query is done that uses the selected value for only returning one result. Each field of that one records values in db should now be reflected in the form. First, tell me if this is the correct way to approach this problem, and if not show me how you would.

Example index.php:

    <form action="editForm.php" method="POST" enctype="multipart/form-data">
        <select id="contact_name" name="contact_name" placeholder="Select Contact" required>
            <option value="John Smith">John Smith</option>
            <option value="Jane Doe">Jane Doe</option>
            <option value="George Washington"></option>
        </select>    
        <input type="text" name="age" placeholder="Age" required>
        <input type="text" name="race" placeholder="Select Race" required>
        <select id="veteran_status" name="veteran_status" placeholder="Select Veteran Status" required>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
        </select>
    </form>

When on change event for #contact_name is fired I need to update the fields with the values the db has.

How would you implement this? Thanks in advance.

Update: as requested here is my JQuery code, but I know my example doesn't use the same names. 

    <script type="text/javascript">
  $(document).ready(function(){
    $('#currency_select').on('change', function (e) {
      $.ajax({
        type: 'post',
        url: 'getCurrentValues.php',
        data: {currency: 'EUR'},
        success: function () {
          console.log('ajax was submitted');
        }
      });
    });
  });
</script>

Here is my understanding of how to do this:

First, detect event and pass data via ajax for the query to retrieve record. This is in the document ready function to ensure DOM is ready.

     $("#contact_name).on("change", function(e){
       $.ajax({
        type: 'post',
        url: 'editForm.php',
        data: {name: this.value},
        success: function () {
          console.log('ajax was submitted');
        }
      });
    };

editForm.php:

    include 'includes/db.php';
    $name = $_POST['contact_name'];
    $sql = "SELECT * FROM contacts;";
    $result = mysqli_query($conn, $sql);
    if (mysqli_num_rows($result) > 0) {
        $lastValues = array();
        while($row = mysqli_fetch_assoc($result)) {
          $age = $row['age'];
        }

        <input type="text" name="age" value="<?php echo $age; ?>">


        <?php
        }
        ?>

Upvotes: 2

Views: 9769

Answers (2)

Christopher Supertramp
Christopher Supertramp

Reputation: 263

your index:

<select id="contact_name" placeholder="Select Contact" required>
            <option value="John Smith">John Smith</option>
            <option value="Jane Doe">Jane Doe</option>
            <option value="George Washington"></option>
</select>  

<form action="editForm.php" id="form" method="POST" enctype="multipart/form-data">  
<select name="contact_name" id="contact_form" placeholder="Select Contact" required>
            <option value="John Smith">John Smith</option>
            <option value="Jane Doe">Jane Doe</option>
            <option value="George Washington"></option>
</select> 
        <input type="text" id="age" name="age" placeholder="Age" required>
        <input type="text" id="race" name="race" placeholder="Select Race" required>
        <select id="veteran_status" name="veteran_status" placeholder="Select Veteran Status" required>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
        </select>
    </form>

    $("#contact_name").on("change", function() {
        var selected = $(this).val();
        $("#form").load("formdata.php?contact="+selected); //normaly you do that with an id as value

        OR

        $.ajax({
           type:"POST",
           url:"formdata.php",
           data: {user: selected},
           dataType: "json",
           success: function(response){
              if(response.status == "success") {
                 $("#age").val(response.age);
                 $("#race").val(response.race); 
                 $("#veteran_status").val(response.status);
              } else {
                 alert("No data found for this user!");
           }
        });
    });

and in your formdata.php file

//make your db-query
then either make the actual input fields which will be displayed if you use load

OR make something like if you use the ajax version

if($result) {
   echo json_encode(array("status" => "success",age" => $result["age"], "race" => $result["race"], "status" => $result["status"]));
} else {
   echo json_encode(array("status" => "failed"));
}

also you can delete the action, method and enctype in your form, as this will be set in the ajax function ;)

I would advice you to use the userid as the value in your select field, and you will also need to either also fill the contact_name IN the form OR make an hidden input field so that you can submit the form and know whos data this is..

Upvotes: 3

ujjwal verma
ujjwal verma

Reputation: 307

just echo the $age variable in your editForm.php file and in the AJAX call success function alert the response. like so-

editForm.php

include 'includes/db.php';
$name = $_POST['contact_name'];
$sql = "SELECT * FROM contacts;";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
    $lastValues = array();
    while($row = mysqli_fetch_assoc($result)) {
      echo $age = $row['age'];
    }
  }
?>

Ajax file

$("#contact_name).on("change", function(e){
   $.ajax({
    type: 'post',
    url: 'editForm.php',
    data: {name: this.value},
    success: function (response) {
      alert(response);
      console.log(response);
    }
  });
};

Upvotes: 1

Related Questions