Member Avatar for thak123

i have a webpage in html5 with various divs made into pages with data-role="page" and each page having id="second" "third etc...

Now i want to use the inbuilt validations..but for that i have to use the form tag...which redirects my pages to the html5 homepage..which is undesirable...can anyone help.

<div data-role="page" id="third" data-theme="b" >
<a href="#first" data-role="button" data-transition="fade" data-inline="true">Go home</a>
<form id="test" name="myForm" method="POST">
<div data-role="header" data-theme="b"> <h1>What Is Your Name ?</h1>
</div>
<div data-role="content" data-theme="b">
<div data-roie="fieldcontain" data-theme="b">
<input type="text" name="name" id="name" value="" required />
</div>
<button onClick="submit_form(this.form)">submit</button>
</div>
</form>
<div data-role="footer" data-theme="b"> <h1>This is a Copyrighted Product</h1>
</div>
</div>

submit_form fn is a javascript function to check for validation and redirect to mobile page
  • 2 Contributors
  • 3 Replies
  • 117 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by ShadyTyrant

Dani AI

Generated

hit the classic jQuery Mobile trap: a multi-"page" HTML5 file (data-role="page") plus a normal form submit can change the URL but leave the visible page on the first <div> because jQuery Mobile hijacks navigation and loads the first page it finds in the response. 's action/type hints are useful, but the real fixes are either (A) stop the normal submit and run HTML5 validation client-side, then navigate via jQuery Mobile; or (B) force a full HTTP submit so jQuery Mobile does not intercept it.

Client-side approach (keep validation and stay single-page):

  • Prevent the form's default submit.
  • Use the constraint validation API to run/trigger native validation.
  • If valid, tell jQuery Mobile to change page (or update the hash if jQM isn't available).

Example (attach to the actual form element):

document.querySelector('form').addEventListener('submit', function (e) {
  var f = e.target;
  if (!f.checkValidity()) {
    e.preventDefault();
    if (f.reportValidity) f.reportValidity(); // shows native UI where supported
    return;
  }
  e.preventDefault(); // stop real POST
  if (window.$ && $.mobile && $.mobile.changePage) {
    $.mobile.changePage('#fourth', { transition: 'fade' });
  } else {
    location.hash = '#fourth';
  }
});

Server-roundtrip approach (do a true POST and land on the anchor):

  • Add the jQuery Mobile attribute to disable Ajax handling on submit (data-ajax="false") so the browser performs a normal POST and the returned document is shown as a full page. Ensure the server returns a page containing the element with id "fourth" (anchors only work if the element exists).

Notes and troubleshooting:

  • Be explicit with button types: use type="submit" for real submits and type="button" for JS-driven actions to avoid accidental submits.
  • reportValidity() shows messages in modern browsers; checkValidity() only returns true/false.
  • If problems persist, check the browser console for JS errors and verify the target page actually contains the anchor id that jQuery Mobile is expected to show.

Recommended Answers

All 3 Replies

Member Avatar for thak123

I used action="mypage.html#fourth"but i get only the url changed but the display in the browser still remains of the home page

pageToPostBackTo.html

Member Avatar for ShadyTyrant

Only two things I can think of is try removing the hash id. Or more likely instead of using the <button> tag, try using <input type="submit"> instead

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.