CODEWITHSUNDEEP
phpjqueryajaxjson
FinalFortune
FinalFortune

Reputation: 665

Sending html form data as JSON to PHP using JQuery/AJAX

When i click my login button, it just reloads the page for some reason. it should alert the string i echo from my php page.

This is my login.js code:

$(document).ready(function(){
    $('#login').click(function(){


        $('#msgLoginStatus').show();
        $('#msgLoginStatus').html("processing...");

        $.post('login.php',{username:"bob",password:"pass"}, function(data){
            alert(data);
        });
    });

});

my login.php:

<?php 
    echo "message";
?>

and my form:

          <form id="loginForm" action="" method="post">
             <fieldset id="body">
                        <fieldset>
                            <label for="username">Username</label>
                            <input type="text" name="username" id="username" />
                        </fieldset>
                        <fieldset>
                            <label for="password">Password</label>
                            <input type="password" name="password" id="password" />
                        </fieldset>
                        <button id="login">login</button>
                        <label for="checkbox"><input type="checkbox" id="checkbox"     />Remember me</label>
                        <br />
                        <p id="msgLoginStatus" style="display:none"></p>
                    </fieldset>
                    <span><a href="#">Forgot your password?</a></span>
                </form>

There are no errors in browser console. I tried this also using $.ajax, it returned an error, i tried putting the error variable in an alert, but when it alerted, it was an empty string. Anyone have an idea whats wrong?

Upvotes: 3

Views: 3611

Answers (4)

Asmarah
Asmarah

Reputation: 134

Or you can Just set the button type = 'Button' and not Submit. THis will also run your code

<button id="login" type="button">Login</button>

In this way you don't have to halt the browser's event

Upvotes: 0

orip
orip

Reputation: 75577

Your login button has an ambiguous action - add type="submit" like this:

<button id="login" type="submit">Login</button>

Now if you really want to execute an explicit POST with JavaScript, call e.preventDefault so the browser's automatic "submit" action will be suppressed.

e.preventDefault();
$.post(...);

But it will probably be better to let the form submit itself. To do this specify the correct action="login.php" attribute in the form:

<form id="loginForm" action="/login.php" method="post">

Keep your existing "click" handler on the login button, just remove the "$.post" part and let the browser handle the posting. You'll still get the nice "processing..." text.

Even better, handle the "submit" event on the form instead of the "click" event on the button:

$('#loginForm').submit(function(e) {
  $('#msgLoginStatus').show();
  $('#msgLoginStatus').html("processing...");
});

This way you'll get the nice updates whether the user submits the form using the button or by pressing "enter" on the keyboard.

Upvotes: 2

Daniel Baulig
Daniel Baulig

Reputation: 11009

Add e.preventDefault(); to the clck handler (and grab the event object in the handler as e).

Upvotes: 0

karim79
karim79

Reputation: 342795

Try:

$('#login').click(function(e){
    e.preventDefault();
    $('#msgLoginStatus').show();
    $('#msgLoginStatus').html("processing...");

    $.post('login.php',{username:"bob",password:"pass"}, function(data){
        alert(data);
    });
});

That prevents a "normal" submit from happening (which, I take, is why you are not getting any errors).

See http://api.jquery.com/event.preventDefault/

Upvotes: 0

Related Questions