Home/ Questions/Q 9117147
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T04:50:21+00:00

I am trying to add ajax into my form so I can submit the

  • 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0