CODEWITHSUNDEEP
jqueryjquery-mobile
Elvis
Elvis

Reputation: 289

jQuery-mobile >> loading a page with form submission

This should be a simple task. I'd like to submit a form and have the results displayed inside the "#responsediv" div, but no matter what I try all it does is reload the whole page.

I'm new to jquery-mobile; could someone please help out? Thanks in advance! :-)

<div data-role="page" id="page1" data-theme="a">
  <div data-role="content" id="content1" name="content1">
    <form id="form1" >
      <div id="text1" data-role="fieldcontain">
        <label for="text1">Text1:</label>
        <input id="text1" name="text1" type="text" />
      </div>
      <div id="text2" data-role="fieldcontain">
        <label for="text2">Text2:</label>
        <input id="text2" name="text2" type="text" />
      </div>
      <div id="submitDiv" data-role="fieldcontain">
        <button name="submitbtn" type="submit" id="submitbtn" />submit</button>
      </div>
    </form>
    <div id="responsediv"></div>
    </div>
  </div>
</div>

 <script>
    $('#form1').submit(function() {
        $.mobile.loadPage("response.php",{
           type: "post",
           data: $("#form1").serialize(),
           pageContainer: $("#responsediv")
          });
    });
  </script>

Still not working, but here's my latest try:

$('#form1').on("submit", function(e){
              e.preventDefault();
              $.mobile.loadPage("result.php",{
                    type: "post",
                    data: $("#form1").serialize(),
                    pageContainer: $("#responsediv")
                  });
        return false;
});

Upvotes: 0

Views: 1948

Answers (2)

Nirmal Patel
Nirmal Patel

Reputation: 5168

Try adding a preventDefault within your submit handler.

Edit: Calling both perventDefault and stopPropogation seems to work as you expect.

   $('#form1').submit(function(e) {
     e.preventDefault();
     e.stopPropagation();
     $.mobile.loadPage("/echo/html",{
       type: "post",
       data: $("#form1").serialize(),
       pageContainer: $("#responsediv")
     });
 });

See this sample jsfiddle.

Note that JQueryMobile loadPage inserts the response received into the target specified by pageContainer wrapped in a div with data-role=page

--- Edit 2 --- I think this example from JQueryMobile is what you are trying to achieve.

Upvotes: 1

root
root

Reputation: 1583

You should use .on() to bind the submit event when using jquerymobile instead of using .submit() short hand. Check out the jquerymobile event docs.

$('#form1').on('submit',function(e) {
                e.preventDefault();
                $.mobile.loadPage("response.php",{
                    type: "post",
                    data: $("#form1").serialize(),
                    pageContainer: $("#responsediv")
                  });       
        });

Upvotes: 0

Related Questions