提交后表单不为空字段答案

【问题标题】：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

有谁知道我做错了什么？大概是个傻小子，不过我没找到，哈哈。

【问题讨论】：

标签： php jquery html jquery-mobile cordova

【解决方案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('');

【讨论】：