CODEWITHSUNDEEP
phpjquery
AAB
AAB

Reputation: 1653

Loading content in div

I have the 3 php files when the user clicks a form the 2.php file is loaded to see if user can fill out the form or not if he can a form shows up and after he fills up the form I want the result displayed in the div id=content of 1.php

Is calling/opening the php file with form content in new window better practice than loading it in div.Is loading the div unnecessary hardwork? i think its better for user to click links and see what he wishes to see in the div id=content on the same page. Is it good practice?

Also i'm facing an issue with loading the form results in the div after i click submit the form disappears something i'm doing wrong?

here are the 3 files

1.php

<!DOCTYPE html>
<html>
    <head>
        <title> Test </title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <link rel="stylesheet" href="css/layout.css"; />
    </head>
    <body>
        <div id="header">
        </div>
        <div id="menu">
            <a href="#" id="l1"> Form </a>
        </div>  
        <div id="content">
        </div>  
        <div id="footer">
        </div>
    </body>
    <script>
        $(document).ready(function(){
            $('#l1').click(function(){
                $('#content').load('2.php');
            });
        });
    </script>
</html>

2.php

<?php
//code here that checks if user can fill form

echo'<script>$("#content").load("3.php");</script>';

// if user cannot
echo "You have already filled";
?>

3.php

<?php
    //check for user session and form_status using $_SESSION 
    if( isset($_POST['submit']) ){
        $form_value=array();
        foreach($_POST as $key => $value){
            $form_value[$key]=htmlspecialchars(trim($value),ENT_QUOTES);
            echo "{$form_value[$key]}<br/>";
        }

    }
?>
    <form method="post" name="stud_det" id="stud_det" 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" name="submit" value="Submit" style="font-size:16px;"/></td>
            </tr>
        </table>
    </form>

<script>
    $("#stud_det").submit(function(){
            $.ajax({
                data: $(this).serialize(),
                type: $(this).attr("post"),
                url: $(this).attr("3.php");
                success: function(response){
                    $("#content").html(response);
                }
            });
            return true;
        });
</script>

layout.css

#menu{
    position:absolute;
    top:10%;
    bottom:10%;
    left:0;
    right:90%;
    background-color:#7c7;
    font-size:18px;
}
#header{
    position:absolute;
    top:0;
    bottom:90%;
    left:0;
    right:0;
    background-color:#ff0;
}
#footer{
    position:absolute;
    top:90%;
    bottom:0;
    left:0;
    right:0;
    background-color:#fcf;
}
#content{
    position:absolute;
    top:10%;
    bottom:10%;
    left:10%;
    right:0;
    background-color:#ccc;
    text-align:center;
    font-size:18px;
}

Upvotes: 0

Views: 282

Answers (1)

Barmar
Barmar

Reputation: 780688

Loading content into the current page without reloading is often more flexible, so it's common practice.

For the last problem, in your .submit() function, change return true to return false. Returning false tells the browser not to run the default action of the submit button, which is to do a normal form submission that reloads the page.

Other errors I found when running your code:

You have an unwanted ; here:

<link rel="stylesheet" href="css/layout.css"; />

Your AJAX has:

            type: $(this).attr("post"),
            url: $(this).attr("3.php");

Those are wrong, it should be:

            type: $(this).attr("method"),
            url: "3.php",

Another issue is that when you use $(this).serialize(), it doesn't include the submit button in the data. So when 3.php does if(isset($_POST['submit'])), it doesn't succeed. I suggest you check whether one of the input fields is set instead.

So with all the fixes, 3.php now looks like:

<?php
    //check for user session and form_status using $_SESSION 
    if( isset($_POST['name']) ){
        $form_value=array();
        foreach($_POST as $key => $value){
            $form_value[$key]=htmlspecialchars(trim($value),ENT_QUOTES);
            echo "{$form_value[$key]}<br/>";
        }

    }
?>
    <form method="post" name="stud_det" id="stud_det" 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" name="submit" value="Submit" style="font-size:16px;"/></td>
            </tr>
        </table>
    </form>

<script>
    $("#stud_det").submit(function(){
            $.ajax({
                data: $(this).serialize(),
                type: $(this).attr("method"),
                url: "3.php",
                success: function(response){
                    $("#content").html(response);
                }
            });
            return false;
        });
//@ sourceURL=dynamicScript.js
</script>

Upvotes: 2

Related Questions