Question

我正在使用Jquery，我有一个用于搜索值的输入文本类型和一个用于清除搜索字符串的按钮。

我遇到的问题是，当我单击清除搜索按钮清除搜索字段时，输入文本中的值被清除，但是表单数据没有被清除，在浏览器控制台中我可以看到我输入的文本用于搜索领域。

以下代码用于清除输入文本中的值

$(':input','#myform')
    .not(':button, :submit, :reset, :hidden')
    .val('')
    .removeAttr('checked')
    .removeAttr('selected');

我尝试过使用

$( '#myform' ).each(function(){
    this.reset();
});

然而，它也没有解决问题。

单击清除搜索按钮时，如何清除输入文本字段以及表单数据？

表单元素

<form id="myform">
<input id="desc">       
<a href="#" class="easyui-linkbutton" onclick="getSearch()">Filter</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
onclick="removeFilter()">Clear</a>  
</form>

修改1

function getSearch(){
            $('#dg').datagrid('reload',{
                desc: $('#desc').val(),
                            search: 'true',                                
                            loadValues: 'false'
            });
        }

Answer 1

您可以使用以下内容清理字段和表单：

function clearForm() {
    // restore comboboxes to original value
    $("form select").each(function(){
          var id = $(this).attr('id');
          $(this).val($("#"+id +" option:first").val());
          $(this).trigger("change");
    });

    // empty form fields
    $("#myform").find(":input[type=text]").val("");
    $('.combo-value').each(function() {
        $(this).val("");
    });
    $('#myform').find(':checked').each(function() {
        $(this).removeAttr('checked');
    });
    // clear dateboxes - do not delete either line!
    $('.easyui-datebox').each(function(){
            //just type something random to force the hidden field to update
        $(this).datebox('setValue', 'dummy');
        $(this).datebox('setValue', '');
    });
}

清除搜索字段而不删除表单数据

1 个答案: