Question

我有一个表格的以下JavaScript和html：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <!--<script src="./_js/jquery-1.7.2.min.js"></script>-->
    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            $("#clear_form").click(function(){   
                var resetForms = function () {
                    $('form').each(function() {
                        this.reset();
                    }); // end earch
                 }; // end var resetForms
                 resetForms(); 

// ************edit based on questions responses *************
                 var x = document.getElementById("all_clear");
                 x.innerHTML = '';


// *** still not working *** **
//******************** end edit based on responses *****************



            });// end clear form


            $("#t_form").submit(function(){
                var user_input = $("#u_input").val();
                $.ajax({
                      type: "POST",
                      url: "response.php",
                      dataType: 'json',
                      data: {email: user_input},
                      success: function(msg){
                          $("#all_clear").replaceWith(msg.email);
                      }, // end success

                      error: function(requestObject, error, errorThrown) {
                        alert(error);
                        alert(errorThrown);
                      } // end error
                });// end ajax
            }); // end submit



        });// end ready 
    </script> 
</head>
<body>
    <form id="t_form" onsubmit="return false;">
    <p>Email: <input id="u_input" type="text" value="Your email"></p>
    <p id="first">Click this button when you are done.</p>
    <br />
    <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
    <input type="submit" anme="reset" class="button" id="clear_form" value="Clear Form" />
    <br />
    <p id="all_clear"></p>
    </form>

</body>
</html>

当我点击“清除表单”按钮时，用户输入字段会重置，但不会重置<p id="all_clear"></p>

我正在尝试重置整个表单。

修改在上述变化之后仍然没有工作。

Answer 1

我注意到当我点击“清除表格”时按钮，ajax请求正在向服务器发送。

所以，我删除了＆＃34;清除表格＆＃34;来自表单的按钮（在HTML中）并使用来自其他答案之一的getelementbyid，现在整个过程都有效。它看起来并不多，但它只是一种学习工具。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <!--<script src="./_js/jquery-1.7.2.min.js"></script>-->
    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            $("#clear_form").click(function(){ 

                var x = document.getElementById("all_clear");
                x.innerHTML = '';

                var resetForms = function () {
                    $('form').each(function() {
                        this.reset();
                    }); // end earch
                 }; // end var resetForms
                 resetForms(); 
            });// end clear form

            $("#t_form").submit(function(){
                var user_input = $("#u_input").val();
                $.ajax({
                      type: "POST",
                      url: "response.php",
                      dataType: 'json',
                      data: {email: user_input},
                      success: function(msg){
                          var new_message = msg.email;
                          var x = document.getElementById("all_clear");
                          x.innerHTML = msg.email;
                      }, // end success

                      error: function(requestObject, error, errorThrown) {
                        alert(error);
                        alert(errorThrown);
                      } // end error
                });// end ajax
            }); // end submit  
        });// end ready 
    </script> 
</head>
<body>

    <form id="t_form" onsubmit="return false;">
    <p>Email: <input id="u_input" type="text" value="Your email"></p>
    <p id="first">Click this button when you are done.</p>
    <br />
    <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
    </form>

     <input type="submit" anme="reset" class="button" id="clear_form" value="Clear Form" />
    <br />
    <p id="all_clear"></p>
</body>
</html>

使用jquery重置表单的最佳方法

1 个答案: