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
– Ja͢ck, Commented May 24, 2012 at 2:19
Try url: 'details.php' if the php file is in the same folder. — Fabrício Matté
– Fabrício Matté, Commented May 24, 2012 at 2: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
– cbarlow123, Commented May 24, 2012 at 2:22

Ja͢ck · Accepted Answer · 2012-05-24 02:32:33Z

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, 2012 at 2:32

answered May 24, 2012 at 2:23

Ja͢ck

174k39 gold badges269 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cbarlow123 Over a year ago

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!

Ja͢ck Over a year ago

@cbarlow123 yes, after $('#result').html(response); you have to find the form and hook up an onsubmit handler again.

user1299518 · Accepted Answer · 2012-05-24 02:27:40Z

0

change:

<form id="form1">

to

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

then do you javascript in "success" of jquery ajax

answered May 24, 2012 at 2:27

user1299518

3 Comments

Ja͢ck Over a year ago

This is the same as e.preventDefault() he already has in his on submit handler.

user1299518 Over a year ago

it didnt worked in my firefox 12.0 actually; i mean, form was posted and page reloaded

user1299518 Over a year ago

funny, worked to me too after i deleted the onsubmit but not in first time.

webLacky3rdClass · Accepted Answer · 2012-05-24 02:31:38Z

0

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.

answered May 24, 2012 at 2:31

webLacky3rdClass

64910 silver badges27 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:07:31Z

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, 2017 at 12:07

CommunityBot

11 silver badge

answered May 24, 2012 at 2:24

user1403947

4 Comments

Ja͢ck Over a year ago

The GET works fine, see my answer for the working fiddle (while ignoring the 404 you see of course)

Ja͢ck Over a year ago

GET or POST shouldn't matter; cross-domain matters though, big time! :)

user1403947 Over a year ago

Check here to see what I mean: stackoverflow.com/questions/8903221/…

Ja͢ck Over a year ago

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 :)

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

3 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related