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

}

如何重置AJAX结果输入字段

2 个答案: