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

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

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

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

请TIA帮忙。


当前回答

我只是PHP的中级水平,有点懒于钻研像JQuery这样的新语言,但下面不是一个简单而优雅的解决方案吗?

<input name="Submit1" type="submit" value="Get free quote" />
<input name="submitreset" type="submit" value="Reset" />

不知道为什么不设置两个提交按钮,只是目的不同而已。 然后简单的:

if ($_POST['submitreset']=="Reset") {
$_source = "--Choose language from--";
$_target = "--Choose language to--"; }

你只需要重新定义你的值回到默认值。

其他回答

补充接受的答案,如果你使用SELECT2插件,你需要召回SELECT2脚本来更改所有的SELECT2字段:

function resetForm(formId){
        $('#'+formId).find('input:text, input:password, input:file, select, select2, textarea').val('');
        $('#'+formId).find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
        $('.select2').select2();
    }

考虑使用验证插件——它很棒!重置表单很简单:

var validator = $("#myform").validate();
validator.resetForm();

A method I used on a fairly large form (50+ fields) was to just reload the form with AJAX, basically making a call back to the server and just returning the fields with their default values. This made is much easier than trying to grab each field with JS and then setting it to it's default value. It also allowed to me to keep the default values in one place--the server's code. On this site, there were also some different defaults depending on the settings for the account and therefore I didn't have to worry about sending these to JS. The only small issue I had to deal with were some suggest fields that required initialization after the AJAX call, but not a big deal.

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

基本上,提供的解决方案没有一个能让我满意。 正如一些人指出的那样,他们会清空表单,而不是重新设置。

然而,有一些javascript属性可以帮助你:

文本字段的defaultValue defaultChecked用于复选框和单选按钮 defaultSelected用于选择选项

它们存储页面加载时字段的值。

写一个jQuery插件现在是微不足道的: (对于没有耐心的人来说……这是一个演示http://jsfiddle.net/kritzikratzi/N8fEF/1/)

插件代码

(function( $ ){
    $.fn.resetValue = function() {  
        return this.each(function() {
            var $this = $(this); 
            var node = this.nodeName.toLowerCase(); 
            var type = $this.attr( "type" ); 

            if( node == "input" && ( type == "text" || type == "password" ) ){
                this.value = this.defaultValue; 
            }
            else if( node == "input" && ( type == "radio" || type == "checkbox" ) ){
                this.checked = this.defaultChecked; 
            }
            else if( node == "input" && ( type == "button" || type == "submit" || type="reset" ) ){ 
                // we really don't care 
            }
            else if( node == "select" ){
                this.selectedIndex = $this.find( "option" ).filter( function(){
                    return this.defaultSelected == true; 
                } ).index();
            }
            else if( node == "textarea" ){
                this.value = this.defaultValue; 
            }
            // not good... unknown element, guess around
            else if( this.hasOwnProperty( "defaultValue" ) ){
                this.value = this.defaultValue; 
            }
            else{
                // panic! must be some html5 crazyness
            }
        });
    }
} )(jQuery);

使用

// reset a bunch of fields
$( "#input1, #input2, #select1" ).resetValue(); 

// reset a group of radio buttons
$( "input[name=myRadioGroup]" ).resetValue(); 

// reset all fields in a certain container
$( "#someContainer :input" ).resetValue(); 

// reset all fields
$( ":input" ).resetValue(); 

// note that resetting all fields is better with the javascript-builtin command: 
$( "#myForm" ).get(0).reset(); 

一些笔记……

我还没有研究新的html5表单元素,有些元素可能需要特殊处理,但同样的想法应该可以工作。 元素需要直接引用。例如$("#container"). resetvalue()将不起作用。总是使用$("#container:input")代替。 如上所述,这里是一个演示:http://jsfiddle.net/kritzikratzi/N8fEF/1/