0

I am trying to add ajax into my form so I can submit the form without refreshing, however the php echo command is not working. if I take out the ajax it works fine but refreshes on submission. I think it's a case of trying to get them to work together. I am just learning ajax right now so I dont really know much about it all. Please take a look to see where I'm going wrong

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('form').bind('submit', function(){ $.ajax({ type: "POST", url: "ajax.html", data: $("form").serialize(), success: function() { alert("form was submitted"); } }); return false; }); }); </script> <?php if(isset($_POST['submit'])){ $a=$_POST['a']; $b=$_POST['b']; echo $a.$b; } ?> <html> <form method='POST'> first name:<input type="text" name="a"> last name: <input type="text" name="b"> <input type='submit' name='submit'> </form> </html>
Improve this question
2
  • You are attempting to run a PHP script located in 'ajax. html '. That's not gonna work. Commented Jan 9, 2013 at 15:42
  • @F4r-20 why not be constructive and help someone out and tell them why it is not working ? Commented Jan 9, 2013 at 15:47

4 Answers 4

Reset to default
3

Looking at it, you are sending an ajax request to "ajax.html" and have your php tags inside "ajax.html" you need to rename it to "ajax.php" to allow php tags to work.

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

Comments

2

Your success function just fires an alert containing static text.

success: function() { alert("form was submitted"); }

You have to do something with the response data if you want to see it.

success: function(data) { alert(data); }
Improve this answer

Comments

1

It's probably worth noting that your echo'd PHP code will not be visible, since the ajax response will be getting that information. This isn't a good example of how to use ajax, since you're not displaying your result from the ajax call. Something like this would make more sense:

"ajax.php" PHP file:

<?php if(isset($_POST['submit'])) { $a=$_POST['a']; $b=$_POST['b']; //Add user name to database here or something die($a." ".$b); //Prevents anything after this from being returned } ?> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('form').bind('submit', function(){ $.ajax({ type: "POST", url: "ajax.php", data: $("form").serialize(), success: function(data) { alert("Hello " + data); } }); return false; }); }); </script> <html> <form method='POST'> first name:<input type="text" name="a"> last name: <input type="text" name="b"> <input type='submit' name='submit'> </form> </html>
Improve this answer

Comments

1
  1. Change .html to .php or it will not get parsed by the php interpreter. Unless of course you have configured apache to parse .html files.
  2. Are you making an ajax request to the page mentioned above ? You know you're going to get more than just an echo of $a.$b right ? You will get the html portion sent back as well. I suggest creating another script and posting to that, one without the form tags.
  3. In your ajax request, you need to console.log( data ) or alert( data )
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.