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、他の回答の 1 つから使用したところ、すべてが機能するようになりました。見ることはあまりありませんが、単なる学習ツールです。

<!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 に答える