Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Form submit with AJAX passing form data to PHP without page refresh

Can anyone tell me why this bit of code isn't working?

<html>   <head>     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>     <script>       $(function () {         $('form').bind('submit', function () {           $.ajax({             type: 'post',             url: 'post.php',             data: $('form').serialize(),             success: function () {               alert('form was submitted');             }           });           return false;         });       });     </script>   </head>   <body>     <form>       <input name="time" value="00:00:00.00"><br>       <input name="date" value="0000-00-00"><br>       <input name="submit" type="button" value="Submit">     </form>   </body> </html> 

When I push submit nothing happens. In the receiving php file I'm using $_POST['time'] and $_POST['date'] to put the data in a mysql query but it's just not getting the data. Any suggestions? I'm assuming it's something to do with the submit button but I can't figure it out

like image 951
GlassHalfAwesome Avatar asked May 17 '13 19:05

GlassHalfAwesome


People also ask

How can we submit a form without refreshing the page in php?

php', type: 'POST', data: { email: '[email protected]', message: 'hello world! ' }, success: function(msg) { alert('Email Sent'); } }); }); The form will submit in the background to the send_email. php page which will need to handle the request and send the email.

How can I submit a form without refreshing the page?

Sometimes, when a form is submitted, you don't want to reload the page, instead you want to execute a javascript function only. Here are ways of executing a javascript function on form submit without reload the html page. return false; is the key to prevent the from to reolad the html page.

How do I stop a refresh page after AJAX call?

Adding type="button" attribute to button solved my problem.


2 Answers

The form is submitting after the ajax request.

<html>   <head>     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>     <script>       $(function () {          $('form').on('submit', function (e) {            e.preventDefault();            $.ajax({             type: 'post',             url: 'post.php',             data: $('form').serialize(),             success: function () {               alert('form was submitted');             }           });          });        });     </script>   </head>   <body>     <form>       <input name="time" value="00:00:00.00"><br>       <input name="date" value="0000-00-00"><br>       <input name="submit" type="submit" value="Submit">     </form>   </body> </html> 
like image 136
Kevin Bowersox Avatar answered Oct 03 '22 14:10

Kevin Bowersox


<html>   <head>     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>     <script>       $(function () {         $('form').bind('click', function (event) {         // using this page stop being refreshing          event.preventDefault();            $.ajax({             type: 'POST',             url: 'post.php',             data: $('form').serialize(),             success: function () {               alert('form was submitted');             }           });         });       });     </script>   </head>   <body>     <form>       <input name="time" value="00:00:00.00"><br>       <input name="date" value="0000-00-00"><br>       <input name="submit" type="submit" value="Submit">     </form>   </body> </html> 

PHP

<?php  if(isset($_POST["date"]) || isset($_POST["time"])) { $time=""; $date=""; if(isset($_POST['time'])){$time=$_POST['time']} if(isset($_POST['date'])){$date=$_POST['date']}  echo $time."<br>"; echo $date; } ?> 
like image 33
underscore Avatar answered Oct 03 '22 15:10

underscore