Post form data to another PHP page, Get the JSON and direct based on parsing the JSON

Question

Ok So I have a basic login page with a form:

<form name="register" class="form-horizontal" id="signup" onsubmit="return validateForm(this);" action="check.php">
                <div class="control-group input-append">
                <label for="text" class="control-label">Name</label>
                    <div class="controls">

                                <input id="name" name="name" type="name" placeholder="Enter your name"/> 

                    </div>
             </div>
                 <br>
             <div class="control-group input-append">
                <label for="passwd" class="control-label">Password</label>
                    <div class="controls">

                                <input id="pass" name="pass" type="pass" placeholder="Enter your password"/> 

                    </div>
                </div>
            <br>
            <div class="control-group">
                <div class="controls">
                    <div class="left1">
                        <input type="submit" name="submit" class="btn btn-success"/>
                     </div>
                </div>
                </div>
                <br> 


    </form>

On clicking submit I need to post the name and password to check.php. I do not want the browser to refresh the page to check.php.

It should get the resulting JSON array, parse it and based on that redirect if the login is successful.

Right now i can either post or get but not both. And I don't want the browser to refresh the page to check.php.

UPDATE:

I'm still not getting this to work. Have a look please.

        <form class="form-horizontal" id="login-form">
                <div class="control-group input-append">
                <label for="text" class="control-label">Email</label>
                    <div class="controls">

                                <input name="email" id="email" type="email" value="" placeholder="Enter your email"/> 

                    </div>
             </div>
                 <br>
             <div class="control-group input-append">
                <label for="passwd" class="control-label">Password</label>
                    <div class="controls">

                                <input name="passwd" id="passwd" type="password" value="" placeholder="Enter your password"/> 

                    </div>
                </div>
            <br>
            <div class="control-group">
                <div class="controls">
                    <div class="left1">
                        <input type="button" id="login" value="Login" class="btn btn-success"/>
                     </div>
                </div>
                </div>
                <br>    
        </form>
    </div>
</div>

</body>
<script>



$('#login').click(function(){
    $.ajax({
        url:"login.php",
        type:'POST',
        data: $("#login-form").serialize()
        }).done(function(data){
              alert(JSON.stringify(data)); 
       });
    }
});
</script>

form page -> check.php -> redirect to success.php OR fail.php. You don't need ajax to achieve this. — STT LCU, Sep 26 '13 at 12:12
possible duplicate of [Capture all of the form's data and submit it to a PHP script - jQuery Ajax POST example](http://stackoverflow.com/questions/5004233/capture-all-of-the-forms-data-and-submit-it-to-a-php-script-jquery-ajax-post) — NullPoiиteя, Sep 26 '13 at 12:12

Eugine Joseph · Accepted Answer · 2013-09-26T13:06:04.797

TRY THIS ONE
add jquery-1.9.1.js

       <form class="form-horizontal" id="login-form">
            <div class="control-group input-append">
                <label for="text" class="control-label">Email</label>
                <div class="controls">
                    <input name="email" id="email" type="email" value="" placeholder="Enter your email"/> 
                </div>
            </div>
            <br>
            <div class="control-group input-append">
                <label for="passwd" class="control-label">Password</label>
                <div class="controls">
                    <input name="passwd" id="passwd" type="password" value="" placeholder="Enter your password"/> 
                </div>
            </div>
            <br>
            <div class="control-group">
                <div class="controls">
                    <div class="left1">
                        <input type="button" id="login" value="Login" class="btn btn-success"/>
                    </div>
                </div>
            </div>
        </form>

<script>
$('#login').click(function(){
    $.ajax({
        url:"login.php",
        type:'POST',
        dataType:"json",
        data: $("#login-form").serialize()
    }).done(function(data){
        var json_text = JSON.stringify(data, null, 2);
        obj = JSON.parse(json_text);
        if(obj.status == 'done') 
            alert('you are logged in'); 
    });
});
</script>

In the login page use like this

    <?php 
    $login = $_POST['email']; 
    $pass = $_POST['passwd'];
// LOGIN CHECKING 
    $data['status'] = 'done';
    echo json_encode($data);
    ?>

I want to post the data as form data itself, not as JSON how do I do this? — Anon, Sep 26 '13 at 12:06
We have to use "dataType:'json'" to recieve as json array. "echo json_encode($data);" will create json array in php. — Eugine Joseph, Sep 26 '13 at 13:08
how do I just print the JSON that I am getting from the other page? — Anon, Sep 26 '13 at 13:15
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/38105/discussion-between-eugine-joseph-and-paulie) — Eugine Joseph, Sep 26 '13 at 13:17

score 0 · Answer 2 · answered Sep 26 '13 at 12:11

Since you dont want the page to reload, i would go for ajax posting this to the php-script that handles the login.

<form id="login-form">
    <input type="text" name="user_name" value=""/>
    <input type="password" name="password" value=""/>
    <input type="button" id="login" value="Login"/>
</form>

Then i would suggest you use jquery to make the ajax-handling easier. And it should look something like this:

  $('#login').click(function(){
    $.ajax({
        url: PHP_PAGE_THAT_HANDLES_LOGIN.php,
        type:'POST',
        data: $("#login-form").serialize()
        }).done(function(data){
               /* Here you will recieve the data that 
               *  has been returned from the php page.
               *  so if its a success you can redirect 
               *  here with a window.location = "www.site.com/welcome.php";
               */
       });
    }
});

The attributes added in the ajax call under the param data will be recieved in the php page as $_POST["user_name"] and $_POST["password"]

how can I print the JSON that I am getting back? This does not seem to be working: alert(data); — Anon, Sep 26 '13 at 12:23
You can print json data like this: alert(JSON.stringify(data)); — Karlton, Sep 26 '13 at 12:35
do i need to include the jquery script to make this work? right now clicking the button is not working for me. — Anon, Sep 26 '13 at 12:46

Post form data to another PHP page, Get the JSON and direct based on parsing the JSON

2 Answers2

Linked