Form entries to query via PHP file and output result of PHP file using JQuery AJAX

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!

Your code seems okay; are you sure that PHP receives the right values? — Ja͢ck, May 24 '12 at 02:19
Try `url: 'details.php'` if the php file is in the same folder. — Fabrício Matté, May 24 '12 at 02:20
I'm not sure about anything, pulling my hair out trying to work out whats going wrong because it looks all good to me! Argh! I'm slightly sceptical whether my PHP is obtaining the correct values. However, Firebug suggest that no AJAX request is being performed on submit. Any ideas? — cbarlow123, May 24 '12 at 02:22

Ja͢ck · Accepted Answer · 2012-05-24T02:32:33.137

2

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/

edited May 24 '12 at 02:32

answered May 24 '12 at 02:23

Ja͢ck

170,779
38
263
309

Thanks, something as simple as that! Second problem, now I have my contents of my PHP file in the DIV, I have another form in the DIV 'results'. Any suggestion to then pass the result of this form to a file 'details2.php' and then putting the result in the same DIV 'results'. I'm guessing its quite similar! – cbarlow123 May 24 '12 at 02:44
@cbarlow123 yes, after `$('#result').html(response);` you have to find the form and hook up an `onsubmit` handler again. – Ja͢ck May 24 '12 at 03:10

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

Try using a callback or change to POST.

Callback: Simple jQuery, PHP and JSONP example?

Using post... HTML

<form id="form1" method="POST">
          <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>

JS

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

and in your PHP

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

edited May 23 '17 at 12:07

Community

1
1

answered May 24 '12 at 02:24

The GET works fine, see my answer for the working fiddle (while ignoring the 404 you see of course) – Ja͢ck May 24 '12 at 02:29
GET or POST shouldn't matter; cross-domain matters though, big time! :) – Ja͢ck May 24 '12 at 02:34
Check here to see what I mean: http://stackoverflow.com/questions/8903221/jquery-get-not-working-in-ie8-9-wont-load-cached-pages-304-not-modified – May 24 '12 at 02:38
Obviously when using GET you have to use `cache: false` if you need several requests; this is avoided by using POST. But both methods work :) – Ja͢ck May 24 '12 at 02:42

score 0 · Answer 3 · answered May 24 '12 at 02:27

0

change:

<form id="form1">

to

<form id="form1" onsubmit="return false;">

then do you javascript in "success" of jquery ajax

answered May 24 '12 at 02:27

This is the same as `e.preventDefault()` he already has in his `on submit` handler. – Ja͢ck May 24 '12 at 02:28
it didnt worked in my firefox 12.0 actually; i mean, form was posted and page reloaded – May 24 '12 at 02:29
funny, worked to me too after i deleted the onsubmit but not in first time. – May 24 '12 at 02:35

score 0 · Answer 4 · answered May 24 '12 at 02:31

try adding a echo in the php file before anythings is done to make sure you are getting to the page and add

if (window.console != undefined) {
    console.log(response);
}

just under the $('#result').html(response); line to see what the php spites out. You may also what to add another console.log('whatever') as the last line in the $('#form1').submit(function(e) { function to help narrow it down a bit.

Form entries to query via PHP file and output result of PHP file using JQuery AJAX

4 Answers4