フォームに次の 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>
フォーム全体をリセットしようとしています。
上記の変更後も編集 は機能しません。