CODEWITHSUNDEEP
phpjqueryajaxforms
ayush
ayush

Reputation: 14588

Form submit without page refresh

Can someone show me a tutorial of using jquery to display successful form submission without refreshing the page. Something like that happens on gmail when a message is delivered and the yellow overlay that shows that you message was delivered and then fade outs. I want the message to be displayed depending on the result of the form submission.

Upvotes: 2

Views: 5173

Answers (2)

Jan W
Jan W

Reputation: 958

The answer of jatt is almost right. But don't forget to set the url attribute into '' This might saves you some minutes of debugging hopefully

Upvotes: 0

jatt
jatt

Reputation: 398

Ok ... something like this ... but I didn't try it ... so use it just like tutorial.. You can also use json

js:

function processForm() { 
        $.ajax( {
            type: 'POST',
            url: form_process.php,
            data: 'user_name=' + encodeURIComponent(document.getElementById('user_name').value),
            success: function(data) {
                $('#message').html(data);
            }
        } );
}

html:

<form action="" method="post" onsubmit="processForm();return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>
<div id='message'></div>

form_process.php

$user_name = $_POST['user_name'];
if(do something){
     echo "login success";
else{
     echo "login unsuccessful";
}

Upvotes: 5

Related Questions