How to load php page and its output after post inside a div?

Question

I made the code to load the pages inside the content div; however; when I want to submit, it doesn't redirect to the div when submitting. How can I make this possible.

//test.php is the index

        <html>
          <head>
            <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
            <script type="text/javascript">
              $(document).ready(function(){
                $('#content').load('home.php');
                $('ul#menu li a').click(function(){
                  var page = $(this).attr('href');
                  $('#content').load(page + '.php');
                  return false;
                });
              });
            </script>
          </head>
          <body>
            <ul id="menu">
              <li><a href="home">Home</a></li>
              <li><a href="math">Math</a></li>
            </ul>
            Menu left
            <div id="content"></div>
            MenuRight
          </body>
        </html>

//////////////////////home.php is the first link and welcome page

   <?php
    echo "HOME PAGE";
   ?>

//////////////////////math.php is the second link and the one I'm having problems with.

   <?php
                if($_POST){
                    $a=$_POST['a'];
                    $b=$_POST['b'];
                    $c=$a+$b;
                    echo $c;
                }
                else{
                    echo"
                        <form name=f method=post                    action=math.php>
                            <input name=a>+<input name=b>=?
                            <input id='buttoncalc' name=calc type=submit value=Calc>
                        </form>
                    ";
                }
                ?>

Thank you.

http://stackoverflow.com/questions/16323360/submitting-html-form-using-jquery-ajax — Mike B, Dec 31 '13 at 20:11

score 0 · Answer 1 · answered Dec 31 '13 at 20:14

You mean that this form should works in ajax either?

$('#buttoncalc').on('click', function(e){
       e.preventDefault();
       var form = $(this).closest('form');

       $.post( form.attr('action') , form.serialize(), function( data ) {
            alert( "Data Loaded: " + data );
       });
});

Function click won't works on dynamically created content. You need to use on() and send data by post. When you receive, you can insert it into #content again.

How to load php page and its output after post inside a div?

1 Answers1