JQuery 移动表单提交不起作用

发布于 2024-11-02 23:29:00 字数 1765 浏览 2 评论 0原文

我在这里看到了其他类似的问题，这些问题已经找到了解决方案，但在尝试之后，没有一个对我的案例起作用。

我正在使用 JQuery Mobile 提交表单。

提交后，我收到一条加载消息，但没有其他消息。

有人有什么想法吗？

以下是相关代码：

在 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>

然后是表单：

<form name="form1" method="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>

注意：我已在操作页面上添加了 Echo，但它永远不会到达那里。

请问有人有什么想法吗？

谢谢

原文

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" method="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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

故事灯 2024-11-09 23:29:00

jquery mobile 在传递表单时使用 ajax，只需将其关闭即可开始

回复收藏 0 原文

二手情话 2024-11-09 23:29:00

您的“checklogin.php”文件是否有

标记？如果您希望它加载“checklogin.php”，那么该 php 文件应该包含一些 jQuery mobile 可以识别的 HTML。然后它会将其拉入您的页面。如果您检查网络对“checklogin.php”的 POST 请求的响应，您可能会在那里看到回显，但它不会显示在页面上。尝试一下。

回复收藏 0 原文

山色无中 2024-11-09 23:29:00

这是导致 jQuery Mobile 中提交点击无法触发的一种方法：只需将 CSS 边距添加到您的

发生了什么：

jQM 的可见包装元素复制了应用于实际输入元素的所有类，jQM 和应用程序 css 样式也应用到了该元素上。如果为按钮提供上边距或左边距，则会导致实际输入元素的位置在包装元素“内”移动，从而使可见元素的顶部和左侧的单击错过实际的提交元素！这是一种在现场产生看似随机失败的绝佳方法。

您可以在随附的调试屏幕截图中看到这一点，并突出显示实际的提交元素几何形状。

修复方法是：

    $("#createButton").parent().click(function() {$("#createButton").click()});

捕获包装元素上的点击并将其转发到实际的提交元素。

显然 jQM 的设计很糟糕。如果他们要将装饰“移动”到包装元素，则需要将它们从包装元素中删除。网络上有很多关于 jQM 提交未触发的抱怨，我怀疑很多都是这个问题。

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.

回复收藏 0 原文