如何重置AJAX結果輸入字段

Question

我的表格很長，有多個步驟。 用戶需要能夠單擊“重置”，以防他們需要重新開始。

我已經實現了一個非常基本的javascript，如下所示：

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

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

而且我正在使用AJAX更新價格顯示在SPAN中的表格。

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

所有的收音機，輸入字段和下拉框均已完美重置，但成功的AJAX回調生成的價格計算保持不變。 有沒有辦法重置回調部分呢？

謝謝。

Answer 1

您必須為計算的字段提供清理功能。

<script type="text/javascript">
  function resetOnlyThese(){
    document.getElementById('room_str').selectedIndex = "";
    document.getElementById('qty_str').selectedIndex = "";
    // ...
    // add some clean up code to clear the span elements
    document.getElementById('totalprice-placeholder').innerHtml = "";
  }
</script> 

<!-- when referencing a specific html element it's better to use "id"
     instead of "class"
 -->
<span id="totalprice-placeholder"></span>

Answer 2

我發現此腳本循環所有元素並非常簡單地將它們重置。

<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;
        }
    });

}