0

我有一个表单的以下 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>

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

进行上述更改后，编辑 仍然无法正常工作。

4

1 回答 1

0

我注意到当我单击“清除表单”按钮时，ajax 请求被触发到服务器。

所以，我从表单（在 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>
于 2013-04-25T18:19:32.723 回答