提交后表单不为空字段
Posted
技术标签:
【中文标题】提交后表单不为空字段【英文标题】：Form doesn't empty fields after submit 【发布时间】：2014-07-24 21:42:35 【问题描述】：目前我正在开发一个项目，该项目有一个连接到外部数据库的表单。 首先我做了一个例子，只是为了测试它是否有效。这很好用。
但是当我尝试实现它时，表单不再为空，而示例确实清空了字段。我的代码完全一样，所以我不明白出了什么问题。唯一的区别是一个文件在 jquery-mobile/phonegap 文件夹中，另一个在我的 htdocs 中。
（确实有效，唯一没有做的是提交后清空表单输入字段，这让用户感到困惑）
这是我的代码：
html：
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script>
function onBodyLoad()
document.addEventListener("deviceready",onDeviceReady,false);
</script>
</head>
<body onload="onBodyLoad()">
<div data-role="page" id="page7" class="pagina">
<div data-role="header">
<h1>Name</h1>
</div><!-- /header -->
<div data-role="content" id="content">
<div id="weekoverzicht">
<form id="overzicht" method="post" onsubmit="return infoOverzicht()">
<label for="fruit">
<b>Fruit</b>
<input type="text" id="fruit" name="fruit">
</label>
<label for="groente">
<b>Groente</b>
<input type="text" id="groente" name="groente">
</label>
<label for="beweging">
<b>Beweging</b>
<input type="text" id="beweging" name="beweging">
</label>
<label for="duur">
<b>Duur</b>
<input type="text" id="duur" name="duur">
</label>
<input type="submit" value="Save">
</form>
</div>
<div data-role="content">
<a data-role="button" data-transition="fade" href="#" id="button"> Data ophalen </a>
<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
<thead>
<tr>
<th data-priority="1">Fruit</th>
<th data-priority="1">Groente</th>
<th data-priority="1">Beweging</th>
</tr>
</thead>
<tbody data-role='listview' data-theme='c' id='mylist'></tbody>
</table>
<p id="showData"></p>
</div>
</div>
<div data-role="footer" style="text-align:center;" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="index.html" data-icon="home">Home</a></li>
<li><a href="test.html" data-icon="plus">Test</a></li>
<li><a href="doel.html" data-icon="star">Doel</a></li>
<li><a href="score.html" data-icon="check">Score</a></li>
</ul>
</div>
</div><!-- /footer -->
</div>
</body>
</html>
js文件：
var url = "http://example.com/";
console.log("first page initialized");
$.ajax(
type: "POST",
url: url + "complex.php",
cache: "false",
dataType: "json",
success: function(phpData)
console.log("Complex: " + phpData);
$("#showData2").append("<b>" + phpData.comments[0].sport + "</b>");
$.each(phpData.comments, function(index, berichtje)
console.log(berichtje);
$("#mylist").append(
"<tr>" +
"<td>" + berichtje.fruit + "</td>" +
"<td>" + berichtje.groente + "</td>" +
"<td>" + berichtje.beweging + "</td>" + "</tr>"
);
);
$('#mylist').listview('refresh');
,
error: errorHandling
);
function infoOverzicht()
var data = $('form#overzicht').serialize();
$('form#overzicht').unbind('submit');
$.ajax(
url: "http://example.com/save.php",
type: 'POST',
data: data,
beforeSend: function()
,
success: function(data, textStatus, xhr)
,
error: function(xhr, textStatus, errorThrown)
);
return false;
function errorHandling()
console.log('er gaat iets fout');
我尝试了这样的解决方案，但无济于事： Clear form after submission with jQuery
有谁知道我做错了什么？ 大概是个傻小子，不过我没找到，哈哈。
【问题讨论】：
【参考方案1】：我通过在提交表单后重定向到另一个页面“解决”了我的问题（申请需要，不是最好的解决方案，但它有效）.. :) 感谢您的帮助！
【讨论】：
【参考方案2】：这里的问题是你的success() 方法是空的。如果你不告诉它做任何事情，它就不会做任何事情。
如果您确实尝试了Clear form after submission with jQuery 中列出的解决方案，那么您应该展示您的工作，以便我们可以看到您尝试做什么。现在你的代码甚至会尝试做你想做的事，所以它肯定不会。 :)
谷歌搜索“使用 jQuery 重置表单”得到了一些结果。 This one 不错。
$("#overzicht").trigger('reset'); //jquery
document.getElementById("overzicht").reset(); //native JS
选择其中一个，将其放入您的success() ，您应该没问题。
【讨论】：
我是这样使用的：success: function(data, textStatus, xhr) $("#overzicht").trigger('reset'); ，但它不起作用。而我的另一个 html 文件（具有完全相同的 html 和 jquery 代码）工作正常...... 来吧，伙计，帮帮我。 “不起作用”是含糊的。你得到一个PHP错误吗？回调一定会触发吗？您是否进行了任何调试，例如成功放置了 console.log() ？网络请求失败了吗？ jQuery 可以正确找到 $('#overzicht') 吗？重置事件是否触发？【参考方案3】：也可以试试：
$('form#overzicht input').val('');
【讨论】：
以上是关于提交后表单不为空字段的主要内容，如果未能解决你的问题，请参考以下文章