Question

目前我正在开发一个项目，其中包含一个连接到外部数据库的表单。首先我做了一个例子，只是为了测试它是否有效。这很好。

但是当我尝试实现它时，表单不再为空，而示例会清空字段。我的代码完全一样，所以我不明白什么是错的。唯一的区别是一个文件位于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

有谁知道我做错了什么？，这可能是一些愚蠢的小事，但我找不到它，哈哈。

Answer 1

我解决了＃39;我提出的问题是在提交表单后重定向到另一个页面（应用程序需要，而不是最好的解决方案，但它有效）.. :) 谢谢你的帮助！

Answer 2

此处的问题是您的success() {}方法为空。如果你不告诉它做任何事情，它就什么都不做。

如果你确实尝试了Clear form after submission with jQuery中列出的解决方案，那么你应该展示你的工作，这样我们就能看到你试图做的事情。现在你的代码甚至尝试做你想要的，所以它肯定不会。：）

Google搜索“使用jQuery重置表单”得到了一些结果。 This one很好。

$("#overzicht").trigger('reset'); //jquery
document.getElementById("overzicht").reset(); //native JS

选择其中一个，将其放入success() {}，你应该没问题。

Answer 3

也可以尝试：

$('form#overzicht input').val('');

提交后表单不会为空字段

3 个答案: