Submitting a form to trigger an ajax request

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?

http://stackoverflow.com/questions/16323360/submitting-html-form-using-jquery-ajax — Tushar Gupta - curioustushar, Oct 17 '13 at 05:47
jQuery's [`.submit()`](http://api.jquery.com/submit/) and [`$.ajax()`](http://api.jquery.com/jQuery.ajax/) functions should get you started. — Alexis King, Oct 17 '13 at 05:49
@ The example you link to is not what I'm looking for as it transitions to another url. I want to remain at the same url, since jquery-mobile docs can have multiple pages: jquerymobile.com/demos/1.2.1/docs/pages/multipage-template.html — Baz, Oct 17 '13 at 12:39

score 1 · Answer 1 · answered Oct 17 '13 at 06:10

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
            }
        });
    });
});

Udit Bhardwaj · Answer 2 · 2013-10-17T14:47:59.977

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(){})

}

You can have multiple pages in a jquery-mobile doc: http://jquerymobile.com/demos/1.2.1/docs/pages/multipage-template.html — Baz, Oct 17 '13 at 12:28
@Baz I missed to read that your question is about jquery mobile. This is first time i am using jquery mobile and after reading some examples and documentation i have edited my answer. Hoping this will help. However i found this youtube tutorial very useful please have a look if you are interested http://www.youtube.com/watch?v=3AlvL7HuwqE — Udit Bhardwaj, Oct 17 '13 at 14:55

score -1 · Answer 3 · answered Oct 17 '13 at 06:01

-1

include jquery into your html
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

answered Oct 17 '13 at 06:01

F.Z

83
6

Submitting a form to trigger an ajax request

3 Answers3