How do I use AJAX to print out data inside a div?

Question

I have two files. One file is named index.php and another file is named process.php.

I have a form that submits to process.php in index.php:

<form class="form" action="process.php" method="POST" name="checkaddress" id="checkaddress">
 <table>
     <tr class="element">
          <td><label>Address</label></td>
          <td class="input"><input type="text" name="address" /></td>
     </tr>
 </table>


 <input type="submit" id="submit" value="Submit"/>


 </form>
 <div class="done"></div>

I also have a process in process.php to echo some data based off of the input. How would I be able to use AJAX to submit the form without leaving the page?

Is it something like:

$.ajax({
        url: "process.php", 
        type: "GET",
        data: data,     
        cache: false,
        success: function (html) {
            $('.done').fadeIn('slow');
        }
 });

What page would I put the above code on if it was right? Also, how do I change the above code to say what the process.php outputted? For example, if I echo "Hello" on process.php, how do I make it say it in the done div?

I have seen many responses regarding AJAX, but they all rely on data that is pre-made like APIs. I need to do a database query and fetch the data dependent on the address entered and print the data out.

Answer 1

You need to collect the data in the form so that you can submit them to the process page, and you need to run your code when submitting the form (and cancel the default form submission)

$('#checkaddress').on('submit', function(e){
    // get formdata in a variable that is passed to the ajax request
    var dataToPassToAjax = $(this).serialize();

    $.ajax({
        url: "process.php", 
        type: "GET",
        data: dataToPassToAjax,     
        cache: false,
        success: function (resultHtml) {
            // add the returned data to the .done element
            $('.done').html( resultHtml ).fadeIn('slow');
          }
    });

  // cancel the default form submit
  return false;
});

---

[update]

If you want to modify the data before submitting them, you will have to manually create the parameters to pass to the ajax

$('#checkaddress').on('submit', function(e){
    // get formdata in a variable that is passed to the ajax request
    var dataToPassToAjax = {};
    var address = $('input[name="address"]', this).val();

    // alter address here
    address = 'something else';

    dataToPassToAjax.address = address;

    $.ajax({
        url: "process.php", 
        type: "GET",
        data: dataToPassToAjax,     
        cache: false,
        success: function (resultHtml ) {
            // add the returned data to the .done element
            $('.done').html(resultHtml ).fadeIn('slow');
          }
    });

  // cancel the default form submit
  return false;
});

Answer 2

You could use the jQuery form plugin: http://jquery.malsup.com/form/

Let me know if you want example code.