Question

I’m currently porting a jQTouch web project to jQuery Mobile and have run into the following issue: I need to display a form submit button in the page header, but unless I make the submit button an action in the header (instead of an input of type submit in the content) jQuery Mobile will always render that button as part of the form.

This will work (button will show on the right side of the page header):

<div data-role="header" data-theme="b">
     <a href="#" class="ui-btn-right" data-icon="check"><%: Resources.View.Account.Labels.DoLogOn %></a>
</div>

Thing is, I’d have to write custom javascript to trigger the submit, which obviously I’d rather not. If, on the other hand I handle this inside the form, i.e.

<% using (Html.BeginForm("LogOn", "Account", 
     new { returnUrl = Request.QueryString["ReturnUrl"] }, FormMethod.Post,         
     new { @class = "ui-body ui-body-c" }))
   {%>
      <fieldset class="ui-grid-a" data-theme="c">
         <input data-icon="check"
                class="ui-btn-right"
                type="submit" 
                value="<%= Resources.View.Account.Labels.DoLogOn %>" />
      </fieldset>
<% } %>  

the button will be displayed inside the content.

Is there a way to make jQuery Mobile display the submit button in the header using the latter approach?

Answer 1

I know I’m a few months late, but I came across this post researching another problem. To submit a page from a button in the header you can use the following button markup:

<a href="#" onclick="$('form#Account').trigger('submit')" class = "ui-btn-right" data-role="button" >Logon</a>