douqiao8370
2014-06-04 09:44
浏览 360

提交后表单不会清空字段

Currently I'm working on a project which has a form that connects to an external database. First I made an example, just to test if it worked. This worked fine.

But when I tried implementing it, the form doesn't empty anymore, while the example does empty the fields. My code is exactly the same, so I don't understand what's wrong. The only difference is that one file is within a jquery-mobile/phonegap folder, and the other on my htdocs.

(It does work, the only thing that it doesn't do is empty the form input fields after submitting, which is confusing for the user)

Here's my code:

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 file:

    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');

}

I tried solutions like this one, but to no avail: Clear form after submission with jQuery

Does anyone know what I'm doing wrong? It's probably some stupid little thing, but I can't find it, haha.

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • dongxinxin7809 2014-06-05 00:06
    已采纳

    I 'solved' my issue by redirecting to another page after the submitting of the form (was needed for the application, not the best solution-wise, but it works).. :) Thanks for your help!

    打赏 评论
  • dpuwov1487 2014-06-04 10:31

    The trouble here is that your success() {} method is empty. If you don't tell it to do anything, it won't do anything.

    If you did try the solution listed in Clear form after submission with jQuery then you should show your working, so we can see what you tried to do. Right now your code does even try to do what you want so it definitely wont. :)

    Googling for "Reset Form with jQuery" got me a few results. This one is good.

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

    Pick one of those, put it in your success() {} and you should be fine.

    打赏 评论
  • dongmi19720408 2014-06-04 11:21

    Can also maybe try:

    $('form#overzicht input').val('');
    
    打赏 评论

相关推荐 更多相似问题