Question

I have a very lengthy form with multiple steps. User needs to be able to click Reset in case they need to start over fresh.

I’ve implemented a very basic javascript like the one below:

<script type="text/javascript">
  function resetOnlyThese(){
  document.getElementById('room_str').selectedIndex = "";
  document.getElementById('qty_str').selectedIndex = "";
  // ...
  }
</script> 

<input type="button" value="Reset" onclick="resetOnlyThese()">

and I am using AJAX to update the form with calculations for price which displays in a SPAN.

<span class="totalprice-placeholder"></span>

All of the radios, input fields, and dropdown boxes reset perfectly but the price calculation generated from the successful AJAX callback remains the same. Is there a way to reset the callback part too?

Thank you.

Answer 1

I found this script which loops through all the elements and resets them all very simply.

<script type="text/javascript">
function clear_form_elements(ele) {
    $(ele).find(':input').each(function() {
        switch(this.type) {
            case 'password':
            case 'select-multiple':
            case 'select-one':
            case 'text':
            case 'textarea':
                $(this).val('');
                break;
            case 'checkbox':
            case 'radio':
                this.checked = false;
        }
    });

}