Skip to content Skip to sidebar Skip to footer
Home / Forms / Html / Javascript / Jquery / Php

Form Result In Same Page

Post a Comment
I have visited the following Link Now i have 2 Sample files Contents of test2.php Form

Solution 1:

Make two changes

  1. remove action attribute value, i.e. change action="test.php" to action="" or you can remove it, its not needed.
  2. change return false; to return true; in js, $('#f1').submit(function()

(explanation of when to use return true/false, currently you requested an submit action, which was called from a jquery function, if from a javascript/jquery you are returning false it means that the current request i.e. submit will not occur. in case of true, the submit will occur. we use false if cases when we are validating something and the user has not added correct output so we don't want to submit the page until he corrects the data. also action is not required in this case as you are submitting via jquery so you can remove the action="" attribute from the form)

also you already have html tags in test.php, including it inside test2.php will create issues.

suggestion call test.php directly, you don't need test2.php.

Here's the full code for test.php,

<?phpif (isset($_POST['submit'])) {
        $arr=array();
        foreach ($_POSTas$key => $value) {
            $arr[$key]=$value;
        }
        print_r($arr);
    }
?><!DOCTYPE html><html><head><title> Form </title><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><linkrel="stylesheet"href="css/main.css" /></head><body><divid="content"id="login_form"><formmethod="post"id="f1"name="f1"action=""><table><tr><td>Name :</td><td><inputtype="text"name="name"/></td></tr><tr><td>Register Number :</td><td><inputtype="text"name="regno"/></td></tr><tr><td>Date of Birth :</td><td><inputtype="text"name="dob"/></td></tr><tr><td><inputtype="submit"id="b1"name="submit"value="Submit"style="font-size:16px;"/></td></tr></table></form></div><script>
            $('#f1').submit(function() {
                $.ajax({
                data: $(this).serialize(),
                type: $(this).attr('post'),
                url: $(this).attr('test.php'),
                success: function(response) {
                $('#content').html(response);
                }
            });
            returntrue;
            });
        </script></body></html>

Solution 2:

May be you find your solution..............

<?phpif(isset($_POST['submit'])){
        $arr=array();
        foreach( $_POSTas$key => $value ){
            $arr[$key]=$value;
        }
        print_r($arr);
    }
?><!DOCTYPE html><html><head><title> Form </title><linkrel="stylesheet"href="css/main.css" /></head><body><divid="content"id="login_form"><formmethod="post"id="f1"name="f1"action="test.php"><table><tr><td>Name :</td><td><inputtype="text"name="name"/></td></tr><tr><td>Register Number :</td><td><inputtype="text"name="regno"/></td></tr><tr><td>Date of Birth :</td><td><inputtype="text"name="dob"/></td></tr><tr><td><inputtype="submit"id="b1"name="submit"value="Submit"style="font-size:16px;"/></td></tr></table></form></div></body></html>

Solution 3:

This must fix your issue. replace the line 

<form method="post"id="f1" name="f1"  action="test.php">

with 

<formmethod="post"name="f1"action="">

you cannot use "id" in "form"

Post a Comment for "Form Result In Same Page"