JQuery Mobile Form Submit not working
I've seen other similar issues here that have found solutions but after trying them, none work on my case.
I am submitting a form using JQuery Mobile.
After I submit I get a loading message and nothing else.
Does anyone have any ideas?
Here is the relevan code:
in the head:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script>
//reset type=date inputs to text
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = true;
});
</script>
</head>
Then the form:
<form name="form1" meth开发者_JAVA百科od="post" rel="external" action="checklogin.php">
<div class="ui-field-contain ui-body ui-br" data-role="fieldcontain">
<label class="ui-input-text" for="name">Username:</label>
<input name="myusername" id="myusername" value="" type="text">
</div>
<div class="ui-field-contain ui-body ui-br" data-role="fieldcontain">
<label class="ui-input-text" for="name">Username:</label>
<input name="mypassword" id="mypassword" value="" type="text">
</div>
<fieldset class="ui-grid-a">
<div><input value="" name="" type="hidden"><button aria-disabled="false" class="ui-btn-hidden" type="submit" data-theme="a">Login</button></div></div>
</fieldset>
</form>
Note: I've added an Echo on the action page but it never gets there.
Any ideas anyone please?
Thanks
jquery mobile use ajax in passing forms, just turn it off and you're good to go
<form action="form1" method="post" data-ajax="false">
Does your "checklogin.php" file have any <div data-role="page"> tag? If you expect it to load "checklogin.php", then that php file should have some HTML that jQuery mobile recognizes. It will then pull it into your page. If you check your network response to the POST request for "checklogin.php" you will probably see your echo there, but it won't show on the page. Try it.
Here's one way to cause submit clicks to fail to fire in jQuery Mobile: just add CSS margins to your
What's happening:
jQM’s visible wrapper element copies all the classes applied to the actual input element, to which jQM and app css styling is applied. If you give the button a top or left margin, it causes the position of the actual input element to shift “within” the wrapper element, so that clicks in the top and left of the visible element miss the actual submit element! A terrific way to produce what seems like a random failure in the field.
You can see this in the attached debug screenshot, with the actual submit element geometry highlighted.
A fix is:
$("#createButton").parent().click(function() {$("#createButton").click()});
Thus catching a click on the wrapper element and forwarding it to the actual submit element.
Clearly a bad design in jQM. If they are going to "move" decorations to a wrapper element, they need to remove them from the wrappered element. There are many complaints about jQM submit not firing on the web, and I suspect that many are this problem.
Use Javascript submit instead of Jquery submit, as it is an issue with jquery mobile.
use
document.getElementById("formID").submit();
instead of
$("#formID").submit();
加载中,请稍侯......
精彩评论