submit a form to a php script using ajax

[dagogodboss]

I have a form that is a
chat apps am building
for project. Now
everything seems to be
working fine to best of
my ability.
Now i want to submit
the data from the form
into my php script
without any form of
reload. That means i
don't want redirection
to the action page and
back to the chat page.
What i want is for the
page to submit the
form at the background.
And i know i need ajax
to this bt i cnt get it
right. Here is my form

<form method="post"
id='chatbox'
action="reply.php">
<input type="text"
id="text"
name="adchat"/>
<input type='hidden'
id='user_id' name='id'
value='1'>
<input type='hidden'
id='user_name' name='id'
value='Ben'>
<input type='submit'
id='submit' name='chat'
value='send'></form>
What i need is an ajax
code to submit d
variable to the reply.php
scrit and maybe a
message to display
when the form it been
submitted say
something like
(sending...). Thanks for
assiting

[Ajay Gokhale]

Hi,

I will provide prototype example: Form Code

<form name="frmcontact" id="frmcontact" method="post">
  <p>First Name:
    <input name="fname" type="text" id="fname" placeholder="First Name" />
  </p>
  <p>Last Name:
    <input name="lname" type="text" id="lname" placeholder ="Last Name" />
  </p>
  <p>Email:
    <input name="email" type="text" id="email" placeholder="Email" />
  </p>
  <p>Comment:
    <textarea name="comments" id="comments" placeholder="Comments" class="txtarea"></textarea>
  </p>
  <a href="javascript:void(0);" id="submit" class="btn1 left">Submit</a>
</form>

Javascript function to submit form:

<script type="text/javascript">
$(document).ready(function() {
    $("#submit").click( function() {
        //alert('New Registration');

        var url = 'formpost.php';
        var frmdata = $("#frmcontact").serialize() ;
        $.ajax({
            url: url,
            dataType: 'json',
            type: 'POST',
            data: frmdata,
            success: function(response) {
                    alert(response); // For test
                    if( response.status == 'Y' ) {
                        $("#div_form").html('<h2>Your request is submitted successfully./h2>');

                    }
                    else {
                        $("#div_form").html('<h2>Error in process. Please try later.</h2>');
                    }
                }   
        });

    });


/*** End document ready **/
});
</script>

Sample of formpost.php

<?php
$response = array();
// Do some Mail Procedure

If mail( .. ) {
    $response['status'] = 'Y';
}
else {
    $response['status'] = 'N';
}

die(json_encode($response));
?>

Please Note:

1. All input fields have ID and Name (Required)
2. <form> did not require action tag
3. Did not use submit button. (Submit button try submit the form as a result page get refresh.
4. var frmdata = $("#frmcontact").serialize() get all from data have name=>value pair
5. Please include jQuery.

Please check and let me know.
Thanks,
Ajay