Form result in Same page

Question

I have visited the following Link

Now i have 2 Sample files Contents of test2.php

<!DOCTYPE html>
<html>
    <head>
        <title> Form </title>
    </head>
    <body>
        <?php include_once("test.php"); ?>
    </body>
</html>

Content of test.php

<?php
    if (isset($_POST['submit'])) {
        $arr=array();
        foreach ($_POST as $key => $value) {
            $arr[$key]=$value;
        }
        print_r($arr);
    }
?>
<!DOCTYPE html>
<html>
    <head>
        <title> Form </title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <link rel="stylesheet" href="css/main.css" />
    </head>
    <body>
        <div id="content" id="login_form">
            <form method="post" id="f1" name="f1"  action="test.php">
                <table>
                    <tr>
                        <td>Name :</td><td><input type="text" name="name"/></td>
                    </tr>
                    <tr>
                        <td>Register Number :</td><td><input type="text" name="regno"/></td>
                    </tr>
                    <tr>
                        <td>Date of Birth :</td><td><input type="text" name="dob"/></td> 
                    </tr>
                    <tr>
                        <td><input type="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); 
        }
    });
    return false; 
});
        </script>
    </body>
</html>

test2.php displays the form.I want to display the values entered in the form and the form after I click submit but I keep seeing the form only. is it because $_POST is empty or because I have made mistakes in the structure of the page itself?

Edit : I want the result of the form submit loaded in test2.php page.

There is no mistake in the form itself, What you want to submit form values with AJAX or PHP ? — Noor, Dec 31 '13 at 12:23
You have invalid HTML like this.. you can't have 2 doctypes etc. — putvande, Dec 31 '13 at 12:26
@ Noor I just wanna get the result of test.php page in test2.php page any means to do this is fine with me — AAB, Dec 31 '13 at 12:28
@putvande whats the correct way to include another html file in a page is it fine to have the head and body tags? — AAB, Dec 31 '13 at 12:29
No, a page can only have 1 doctype, 1 head tag and 1 body tag. — putvande, Dec 31 '13 at 12:32

Deepika Janiyani · Accepted Answer · 2013-12-31T12:52:51.830

Make two changes

remove action attribute value, i.e. change action="test.php" to action="" or you can remove it, its not needed.
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,

<?php
    if (isset($_POST['submit'])) {
        $arr=array();
        foreach ($_POST as $key => $value) {
            $arr[$key]=$value;
        }
        print_r($arr);
    }
?>
<!DOCTYPE html>
<html>
    <head>
        <title> Form </title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <link rel="stylesheet" href="css/main.css" />
    </head>
    <body>
        <div id="content" id="login_form">
            <form method="post" id="f1" name="f1" action="">
                <table>
                    <tr>
                        <td>Name :</td><td><input type="text" name="name"/></td>
                    </tr>
                    <tr>
                        <td>Register Number :</td><td><input type="text" name="regno"/></td>
                    </tr>
                    <tr>
                        <td>Date of Birth :</td><td><input type="text" name="dob"/></td>
                    </tr>
                    <tr>
                        <td><input type="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);
                }
            });
            return true;
            });
        </script>
    </body>
</html>

score 0 · Answer 2 · answered Dec 31 '13 at 12:16

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

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

I don`t understand what do you mean? I`m aware that running this page only gets the desired result but I want the result in test.php only don`t want a new page loaded :) — AAB, Dec 31 '13 at 12:18

score 0 · Answer 3 · answered Dec 31 '13 at 12:47

0

This must fix your issue. replace the line

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

with

<form method="post" name="f1"  action="">

you cannot use "id" in "form"

answered Dec 31 '13 at 12:47

Praveen Kumar

206
4
14

Form result in Same page

3 Answers3

Linked