javascript - 如何重置 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;
        }
    });

}