我有一个标准的重置按钮的形式编码如下:

<input type="reset" class="button standard" value="Clear" />

问题是,所述表单是多阶段排序的,所以如果用户填写了一个阶段,然后稍后返回,当单击Clear按钮时,各个字段的“记住”值不会重置。

我在想,附加一个jQuery函数循环所有的字段和清除他们'手动'将做的技巧。我已经在使用jQuery的形式,但我只是刚刚赶上速度&所以我不知道如何做到这一点,除了单独引用每个字段的ID,这似乎不是很有效。

请TIA帮忙。


当前回答

jQuery插件

我创建了一个jQuery插件,这样我就可以在任何需要的地方轻松使用它:

jQuery.fn.clear = function()
{
    var $form = $(this);

    $form.find('input:text, input:password, input:file, textarea').val('');
    $form.find('select option:selected').removeAttr('selected');
    $form.find('input:checkbox, input:radio').removeAttr('checked');

    return this;
}; 

所以现在我可以通过调用:

$('#my-form').clear();

其他回答

对paolo的答案进行了轻微的更新,以适应新的输入类型,如“tel”和电子邮件,以下代码片段也将选择这些类型:

function resetForm(form) {
    form.find('input:text, input[type=email], input[type=tel], input:password, input:file, select, textarea').val('');
    form.find('input:radio, input:checkbox')
         .removeAttr('checked').removeAttr('selected');
}

这对我有用,pyrotex回答没有“重置选择字段,取他的,在这里”我的编辑:

// Use a whitelist of fields to minimize unintended side effects.
$(':text, :password, :file', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$(':input,select option', '#myFormId').removeAttr('checked').removeAttr('selected');
//this is for selecting the first entry of the select
$('select option:first', '#myFormId').attr('selected',true);

我用的是Paolo Bergantino的解决方案,它很棒,但做了一些调整……特别是使用表单名称代替id。

例如:

function jqResetForm(form){
   $(':input','form[name='+form+']')
   .not(':button, :submit, :reset, :hidden')
   .val('')
   .removeAttr('checked')
   .removeAttr('selected');
}

现在当我想用它的时候

<span class="button" onclick="jqResetForm('formName')">Reset</span>

如你所见,这适用于任何表单,因为我使用css样式来创建按钮,页面在单击时不会刷新。再次感谢Paolo的建议。唯一的问题是,如果我在表单中有默认值。

修改$(document).ready()情况投票最多的答案:

$('button[type="reset"]').click(function(e) {
    $form = $(this.form);
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
    e.preventDefault();
});

简单地这样做

$('#myform')[0].reset();

更多的信息

如果你有这样的输入,设置myinput.val(")可能不能100%模拟"reset":

<input name="percent" value="50"/>

例如,在一个默认值为50的输入上调用myinput.val(")会将其设置为空字符串,而调用myform.reset()则会将其重置为初始值50。