professional_javascript_for_web/ch14/FormResetExample01.htm

<!DOCTYPE html>
<html>
<head>
    <title>Form Reset Example</title>
    <script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
    <form method="post" action="javascript:alert('Form submitted!')" id="myForm">
        <p>This button will reset the form. Change the value in the textbox to something else and then click the button.</p>
        <p><input type="text" value="Default value"></p>
        <input type="reset" value="Reset Form">    
    </form>
    <p>This button determines if the form can be reset.</p>
    <input type="button" value="Block reset" id="myBtn">
    <p>This button always reset the form as if it were a reset button.</p>
    <input type="button" value="Reset Form via JavaScript" id="myForceBtn">
      
    <script type="text/javascript">
        (function(){
            function handleSubmitEvent(event){
                event = EventUtil.getEvent(event);
                EventUtil.preventDefault(event);                
            }
            
            var btn = document.getElementById("myBtn");
            EventUtil.addHandler(btn, "click", function(event){
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);
                
                var form = document.getElementById("myForm");
                if (target.value == "Block reset"){
                    EventUtil.addHandler(form, "reset", handleSubmitEvent);
                    target.value = "Allow reset";
                } else {
                    EventUtil.removeHandler(form, "reset", handleSubmitEvent);
                    target.value = "Block reset";
                }
            });
            
            var forceBtn = document.getElementById("myForceBtn");
            EventUtil.addHandler(forceBtn, "click", function(event){
                var form = document.getElementById("myForm");
                form.reset();
            });
        
        })();

    </script>
</body>
</html>