提交表单以触发Ajax请求

Question

I wish to have a "Contact us" form on my jquery-mobile web page. When the user has entered all the data correctly and pressed submit, an ajax post request should be made to an asp script. If the asp script is successful, it will reply, via json, a success status to the javascript code that made the request. I will then switch to another page within the very same html document and show "You message has been sent".

I have seen an example for doing this which uses no <form> or <input> tags.

Is it possible to do what I want with a <form> ?

How would you do this in terms of html and what javascript events would you use?

Answer 1

Try this example :
HTML

<form name="contactForm" id="contactForm">
    <input type="text" name="firstname" value="">
    <input type="submit" name="submit" id="submitBtn" value="Submit">
</form>  

JS

$(document).ready(function () {
    $("#submitBtn").click(function () {
        var formData = $("#contactForm").serialize();
        $.ajax({
            type: "POST",
            url: "YOUR FILE PATH", //serverside
            data: formData,
            beforeSend: function () {
                //show loading image
            },
            success: function (result) {
                console.log(result); //use this to see the response from serverside
            },
            error: function (e) {
                console.log(e); //use this to see an error in ajax request
            }
        });
    });
});

Answer 2

as what i have understood from the line in your question--"I will then switch to another page within the very same html document and show "You message has been sent". "-- In addition to Dh...'s answer if you want to go to another page on success add this before ajax call after you serialize the form data.

var goto=$('#yourFormId').attr('href')

and in then use goto in success callback.

success: function()
{
  //at the end include this:
  location.href=goto;

}

NOTE: you can assign any address to goto and open that address at the time of success

for JQM multi page structure you can trigger an click event on ajax success. Suppose you have this in your html page.

<div data-role="page" id="page-one" data-title="Page 1">
    <div data-role="header">
        <h1>Page 1</h1>
    </div>
    <div data-role="content">
        <p>Body copy for page 1</p>
        <p><a href="#page-two" id="toPage2">Link to page 2</a></p>
    </div>
    <div data-role="footer">
        Copyright
    </div>
</div>
<div data-role="page" id="page-two" data-title="Page 2">
    <div data-role="header">
        <h1>Page 2</h1>
    </div>
    <div data-role="content">
        <p>Body copy for page 2</p>
        <a href="#page-one" id="toPage1">Link to page 1</a>
    </div>
    <div data-role="footer">
        Copyright
    </div>
</div>

And on success you want to open Page 2 whose id is page-two .Now the link of Page 2 is in the div Page 1 's <a> tag. So finally, instead of using location.href in ajax success callback you can use jquery .trigger()

success: function()
{
  $('a#toPage2').trigger('click',function(){})

}

Answer 3

1. include jquery into your html
2. use $.ajax() to send form data to your asp and handle json accordingly.

Here is the document for using $.ajax: http://api.jquery.com/jQuery.ajax/

Some examples: http://www.w3schools.com/jquery/ajax_ajax.asp