Simple Form Submit in Jquery Mobile

Question

I'm trying to submit a simple form using a ajax call to a asp.net webservice but i'm receiving 'error' alert on form submit. Can some one please tell me what's the issue with below code.

HTML:

<html> 
    <head> 
    <title>Facility</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head> 
<body> 

<div data-role="page" id="arealistpage">

  <div data-role="header" data-theme="b">
      <a href="Facility.aspx" class='ui-btn-left ui-btn-back' data-icon='arrow-l' rel="external">Back</a>
   </div><!-- /header -->

    <div data-role="content">  
  <form id="form1" data-ajax="false" method="post">
    <div id="AreaNoDiv" data-role="fieldcontain" class="field">
        <label for="Facility">Facility*</label>     
        <input id="Facility" name="shipNo_r" type="text" required/>
    </div>

     <div id="desDiv" data-role="fieldcontain" class="field">

        <label for="des" id="Label1" name="fnameLabel">Description*</label>     
        <input id="des" name="fname_r" type="text" required/>

    </div>
     <div id="submitDiv" data-role="fieldcontain" style="width: 30%">    
     <input type="submit" value="Add Facility" data-inline="true" id="submit"/>
    </div>

    </form>

    </div><!-- /content -->

    <div data-role="footer" data-theme="b" data-position="fixed">

            <div data-role="navbar">
            <ul>

               <li><a href="" data-role="tab" data-icon="arrow-u" class="returnTopAction">Top</a></li>
            </ul>
        </div>
    </div>
</div><!-- /page -->
<script src="Submitscript.js" type="text/javascript"></script>
</body>
</html>

Form Submit Script:

$("#form1").submit(function () {
    var serviceURL = 'service1.asmx/SubmitList';
    var name = "chamara";
    $.ajax({
        type: "POST",
        url: serviceURL,
        data: '{"name":"' + name + '"}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: successFunc,
        error: errorFunc
    });

    function successFunc(data, status) {

        // parse it as object
        var outStr = JSON.parse(data.d);
        alert(outStr);
    }

    function errorFunc() {
        alert('error');
    }
});

Web Service:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]

  public class Service1 : System.Web.Services.WebService {

    [WebMethod]
    public string SubmitList(string name)
    {
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        string str = "Your Name is"+name;
        string jsonString = serializer.Serialize(str);
        return jsonString;
    }

}

UPDATE: Navigation page after form submit

<html> 
    <head> 
    <title>Facility</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
 <script type="text/javascript">
     $('#arealistpage').live('pageshow', function (event) {
         $('div[id="primaryList"] ul[data-role="listview"] a').bind("click", function () {
             var facilityid = $(this).data("facilityid");
             sessionStorage.facilityid = facilityid;
            });
     });
</script>

</head> 
<body> 

<div data-role="page" id="arealistpage">

  <div data-role="header" data-theme="b">
        <h1><a name="top"></a>Facility</h1>
       <a href="../MenuePages/Dictionaries.aspx" class='ui-btn-left ui-btn-back' data-icon='arrow-l' rel="external">Back</a>
   <a href="AddFacility.aspx" data-role="button" data-icon="plus" data-theme="d" style="float:left;"  rel="external" data-transition="slide" data-ajax="false">Add</a>
    </div><!-- /header -->

    <div data-role="content">  
     <div id="primaryList">
    <ul data-role="listview" data-inset="true" data-theme="c"  data-filter="true" id="areaList" data-split-icon="gear" data-split-theme="d">

    </ul>

        </div>
    </div><!-- /content -->

    <div data-role="footer" data-theme="b" data-position="fixed">

            <div data-role="navbar">
            <ul>

               <li><a href="" data-role="tab" data-icon="arrow-u" class="returnTopAction">Top</a></li>
            </ul>
        </div>
    </div>
   <script src="FacilityScript.js" type="text/javascript"></script>

</div><!-- /page -->
  <div data-role="page" id="dialog">
  <div data-role="header" data-theme="b">
    <h1>Options</h1>
  </div>   
 <ul data-role="listview" data-inset="false"
                data-theme="c">
               <li data-icon="false"><a href="UpdateFacility.aspx"  data-ajax="false">Edit</a></li>

              <li data-icon="false"><a href="#divMsg" data-rel="dialog" data-transition="pop">Delete</a></li>

            </ul>   
</div> 
<div data-role="page" id="divMsg">
  <div data-role="header" data-theme="b">
    <h1>Confirmation</h1>
  </div>   

  <div data-role="content">  
  <a href="Facility.aspx" onclick="DeleteFacility(); return true" data-role="button"  data-ajax="false">Delete Record?</a>
  </div>
   <script src="FacilityScript.js" type="text/javascript"></script>
</div>
</body>
</html>

Can you check the server logs to make sure what is coming in and what is being printed out (if anything at all) when you submit the form? — Sudipta Chatterjee, Mar 06 '13 at 10:01

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

Your code is correct so I would guess problem occurs during the ajax call.

First take a look at my other answer, I made a working example of jQuery Mobile ajax form submition: https://stackoverflow.com/a/15205612/1848600. My example uses PHP but logic is the same.

My call looks like this:

$.ajax({url: 'check.php',
    data: {action : 'login', formData : $('#check-user').serialize()}, // Convert a form to a JSON string representation
        type: 'post',                   
    async: true,
    beforeSend: function() {
        // This callback function will trigger before data is sent
        $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
    },
    complete: function() {
        // This callback function will trigger on data sent/received complete
        $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
    },
    success: function (result) {
            resultObject.formSubmitionResult = result;
                        $.mobile.changePage("#second");
    },
    error: function (request,error) {
        // This callback function will trigger on unsuccessful action                
        alert('Network error has occurred please try again!');
    }
});

Debugging with Firebug :

Your next step should be error debugging.

If you are using Firefox or Chrome install a plugin called Firebug.

Here's a link: https://addons.mozilla.org/en-US/firefox/addon/firebug/
Install firebug, Firefox version is better then a Chrome one.
Open your page and Firebug plugin.
Inside a firebug window there's a tab bar on the top that starts with Console, HTML, CSS .. up to Cookies. Click on a Net tab. New tab bar will open below the main one. Now click on XHR tab and click on clear button (same tab bar, clear button is on the left side).
Click Submit form. Inside a firebug windows a new log line should appear something like "POST ..." or "GET ...". Click on it.
New content will be shown. Inside a new tab bar there's a Request (or Post or Get) tab. It is your request. If ajax call has reached its destination another tab should exist by the name Response.
Open Response and take a look. There should be error or real response like this JSON: {"message":"0","draftSaved":true,"disableEditor":false}. In case your response has a proper JSON output than an ajax call is a successful one.

Debugging with FIDLER :

You can even use tool called FIDLER: http://www.fiddler2.com/fiddler2/, it is a much better tool but it requires more time to get used to.

Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and "fiddle" with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.

Here's a video tutorial of Fiddler usage: http://www.youtube.com/watch?v=YkJ_Wsd-rtM

score 1 · Accepted Answer · answered Mar 06 '13 at 10:26

I changed your html as below

<html> 
    <head> 
    <title>Facility</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head> 
<body> 

<div data-role="page" id="arealistpage">

  <div data-role="header" data-theme="b">
      <a href="Facility.aspx" class='ui-btn-left ui-btn-back' data-icon='arrow-l' rel="external">Back</a>
   </div><!-- /header -->

    <div data-role="content">  
  <form id="form1" method="post">
    <div id="AreaNoDiv" data-role="fieldcontain" class="field">
        <label for="Facility">Facility*</label>     
        <input id="Facility" name="shipNo_r" type="text" required/>
    </div>

     <div id="desDiv" data-role="fieldcontain" class="field">

        <label for="des" id="Label1" name="fnameLabel">Description*</label>     
        <input id="des" name="fname_r" type="text" required/>

    </div>
     <div id="submitDiv" data-role="fieldcontain" style="width: 30%">    
     <button class="btnLogin" data-theme="b" type="submit" id='mysubmit'>submit</button>
    </div>

    </form>

    </div><!-- /content -->

    <div data-role="footer" data-theme="b" data-position="fixed">

            <div data-role="navbar">
            <ul>

               <li><a href="" data-role="tab" data-icon="arrow-u" class="returnTopAction">Top</a></li>
            </ul>
        </div>
    </div>
</div><!-- /page -->
<script src="Submitscript.js" type="text/javascript"></script>
</body>
</html>

and your js as below

$('#arealistpage').live('pageshow',function(event){
var serviceURL = 'service1.asmx/SubmitList';
    $('#mysubmit').bind('click', function(e){
        var name = "chamara";
        e.preventDefault();
            $.ajax({
            type: "POST",
            url: serviceURL,
            data: '{"name":"' + name + '"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: successFunc,
            error: errorFunc
        });
    });

    function successFunc(data, status) {

        // parse it as object
        var outStr = JSON.parse(data.d);
        alert(outStr);
    }

    function errorFunc() {
        alert('error');
    }
});

and it works just fine.

Btw why do you serialise a string in your service. Serialise will helpful when you wanna convert C# objects into JSON string. Hope it would help you out.

hi! Thanks for the help. you'r solution is working but having a new issue.on the form submit i have the form action="Facility.aspx".on that form i'm using dialog popups.after the form submit those dialogs are not working.I have updated my question to show you Facility.aspx. — chamara, Mar 06 '13 at 13:13
You can't go on updating questions men :) u must ask new question. — Jay Mayu, Mar 06 '13 at 13:16
OK thanks. Here is my new question.can you please help me to solve it http://stackoverflow.com/questions/15261618/popup-dialogs-not-working-after-form-submit-in-jquery-mobile — chamara, Mar 07 '13 at 01:49

score 1 · Answer 3 · answered Aug 16 '13 at 17:21

Is there a problem with simply using a standard button for your form submit, writing a click function for it, and then calling form submit when you are done validating? Something simple like this where I have a button named "inquire"

  $("#inquire").click(function () {
    if (validates()) {
        $("form").submit();
    } else showValidationErrors();

});

Simple Form Submit in Jquery Mobile

3 Answers3

Debugging with Firebug :

Debugging with FIDLER :