Question

This is my html- simple form with two text inputs:

    <div id="content">
      <div id="options">
        <form id="form1">
          <table>
            <tr>
              <td>Date:</td>
              <td><input name="date" type="text" id="datepicker" /></td>
            </tr>
            <tr>
              <td>Size:</td>
              <td><input name="size" type="text" /></td>
            </tr>
            <tr>
              <td colspan="2"><input name="submit" type="submit" value="Submit"/></td>
            </tr>
          </table>
        </form>
      </div>
      <div id="result"> </div>
    </div>

And I’m trying to get the results of this form on submit to query a MySQL database ‘/details.php’ and then output the results of the PHP file into the DIV ‘result’. I’m struggling on the passing the variables to the PHP file and outputting the results into the DIV. I know I have to use some JQuery AJAX but I’m struggling to get it to work.

This is my current AJAX script:

     <script>
    $('#form1').submit(function(e) {
        e.preventDefault(); // stops form from submitting naturally
        $.ajax({
            data: $(this).serialize(),
            url: '/details.php',
            success: function(response) {
                $('#result').html(response); 
            }
        });
    });
    </script>   

And on my PHP file im trying to aquire the variables with:

     $date=$_GET['date'];
     $size=$_GET['size'];

And then my connection to the database with SQL query and echoing out results. Any suggestions to where I might be going wrong. Thanks for the help!

Answer 1

Edit

You have to wrap your jQuery code in a domReady event handler, like so:

$(function() {
    // all your jQuery code goes here!
});

Here’s a fiddle that works with your existing code: http://jsfiddle.net/89A2m/