การรีเซ็ตฟอร์มหลายขั้นตอนด้วย jQuery

ฉันมีแบบฟอร์มที่มีปุ่มรีเซ็ตมาตรฐานเขียนไว้ดังนี้:

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

ปัญหาคือรูปแบบที่กล่าวมานั้นเป็นแบบหลายสเตจดังนั้นหากผู้ใช้กรอกสเตจ & จากนั้นกลับมาใหม่ค่า 'จำได้' สำหรับฟิลด์ต่างๆจะไม่รีเซ็ตเมื่อคลิกปุ่มล้าง

ฉันคิดว่าการแนบฟังก์ชั่น jQuery เพื่อวนรอบทุกฟิลด์และการล้างด้วยตนเอง 'ด้วยตนเอง' จะเป็นการหลอกลวง ฉันใช้ jQuery อยู่ในแบบฟอร์มแล้ว แต่ฉันเพิ่งจะได้รับความเร็วและไม่แน่ใจว่าจะทำยังไงนอกจากการอ้างอิงแต่ละ ID ด้วย ID ซึ่งไม่ใช่วิธีที่มีประสิทธิภาพมาก

TIA สำหรับความช่วยเหลือใด ๆ

อัปเดตเมื่อมีนาคม 2555

ดังนั้นสองปีหลังจากที่ฉันตอบคำถามนี้ฉันกลับมาเพื่อดูว่ามันกลายเป็นเรื่องใหญ่มาก ฉันรู้สึกว่ามันเป็นเวลาที่ฉันจะกลับมาและทำให้คำตอบของฉันถูกต้องอย่างแท้จริงเพราะมันเป็นที่ยอมรับ + ​​ที่โหวตขึ้นมากที่สุด

สำหรับบันทึกนั้นคำตอบของ Titi นั้นผิดเพราะไม่ใช่สิ่งที่ผู้โพสต์ดั้งเดิมถาม - มันถูกต้องที่จะสามารถตั้งค่ารูปแบบใหม่โดยใช้วิธีการตั้งค่าดั้งเดิม () แต่คำถามนี้พยายามที่จะลบรูปแบบออกจากความทรงจำ ค่าที่จะยังคงอยู่ในแบบฟอร์มหากคุณรีเซ็ตด้วยวิธีนี้ นี่คือเหตุผลที่จำเป็นต้องรีเซ็ต "แบบแมนนวล" ฉันคิดว่าคนส่วนใหญ่ลงเอยด้วยคำถามนี้จากการค้นหาของ Google และกำลังมองหาวิธีการรีเซ็ต () อย่างแท้จริง แต่มันไม่ทำงานในกรณีเฉพาะที่ OP กำลังพูดถึง

คำตอบเดิมของฉันคือ:

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

ซึ่งอาจใช้งานได้หลายกรณีรวมถึง OP แต่ที่ระบุไว้ในความคิดเห็นและคำตอบอื่น ๆ จะล้างองค์ประกอบวิทยุ / ช่องทำเครื่องหมายจากแอตทริบิวต์ค่าใด ๆ

คำตอบที่ถูกต้องมากขึ้น(แต่ไม่สมบูรณ์) คือ:

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

// to call, use:
resetForm($('#myform')); // by id, recommended
resetForm($('form[name=myName]')); // by name

การใช้:text, :radioการปฏิบัติที่ไม่ดี ฯลฯ เตอร์ด้วยตัวเองคือการพิจารณาโดย jQuery ที่พวกเขาจบลงด้วยการประเมินไป*:textซึ่งจะทำให้มันใช้เวลานานกว่าที่ควร ฉันชอบวิธีการที่อนุญาตพิเศษและหวังว่าฉันจะใช้มันในคำตอบเดิมของฉัน อย่างไรก็ตามด้วยการระบุinputส่วนของตัวเลือกรวมถึงแคชขององค์ประกอบแบบฟอร์มสิ่งนี้ควรทำให้เป็นคำตอบที่มีประสิทธิภาพดีที่สุดที่นี่

คำตอบนี้อาจยังมีข้อบกพร่องบางอย่างหากค่าเริ่มต้นของผู้ใช้สำหรับองค์ประกอบที่เลือกไม่ใช่ตัวเลือกที่มีค่าว่าง แต่แน่นอนว่าเป็นเรื่องทั่วไปตามที่จะได้รับและสิ่งนี้จะต้องได้รับการจัดการเป็นกรณี ๆ ไป .

จากhttp://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea :

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

การตั้งค่าmyinput.val('')อาจไม่เลียนแบบ "รีเซ็ต" 100% หากคุณมีอินพุตดังนี้:

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

เช่นการเรียกmyinput.val('')อินพุตที่มีค่าเริ่มต้นที่ 50 จะตั้งเป็นสตริงว่างขณะที่การโทรmyform.reset()จะรีเซ็ตเป็นค่าเริ่มต้นที่ 50

มีปัญหาใหญ่กับคำตอบที่ได้รับการยอมรับของเปาโล พิจารณา:

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

ทาง.val('')สายก็จะเคลียร์ ๆvalue 's ได้รับมอบหมายให้ทำเครื่องหมายในช่องและปุ่มวิทยุ ดังนั้นถ้า (เช่นฉัน) คุณทำอะไรแบบนี้:

<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />

การใช้คำตอบที่ยอมรับจะเปลี่ยนอินพุตของคุณเป็น:

<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />

อ๊ะ - ฉันใช้ค่านั้นแล้ว!

ต่อไปนี้เป็นรุ่นที่ได้รับการแก้ไขซึ่งจะรักษาช่องทำเครื่องหมายและค่าวิทยุของคุณ:

// Use a whitelist of fields to minimize unintended side effects.
$('INPUT:text, INPUT:password, INPUT:file, SELECT, TEXTAREA', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$('INPUT:checkbox, INPUT:radio', '#myFormId').removeAttr('checked').removeAttr('selected');

ปลั๊กอิน 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();

รูปแบบการหักบัญชีนั้นค่อนข้างยุ่งยากและไม่ง่ายอย่างที่คิด

ขอแนะนำให้คุณใช้ปลั๊กอิน jQuery รูปแบบและการใช้งานclearFormหรือresetForm การทำงาน จะดูแลกรณีมุมส่วนใหญ่

document.getElementById ( 'FRM). รีเซ็ต ()

ฉันมักจะทำ:

$('#formDiv form').get(0).reset()

หรือ

$('#formId').get(0).reset()

นี่คือสิ่งที่จะช่วยให้คุณเริ่มต้นได้

$('form') // match your correct form 
.find('input[type!=submit], input[type!=reset]') // don't reset submit or reset
.val(''); // set their value to blank

แน่นอนถ้าคุณมีช่องทำเครื่องหมาย / ปุ่มตัวเลือกคุณจะต้องแก้ไขสิ่งนี้เพื่อรวมไว้ด้วยและตั้งค่า .attr({'checked': false});

แก้ไข คำตอบของเปาโลกระชับยิ่งขึ้น คำตอบของฉันคือคำที่มากขึ้นเพราะฉันไม่ทราบเกี่ยวกับ:inputตัวเลือกและฉันไม่คิดว่าเพียงแค่ลบคุณลักษณะที่เลือก

พิจารณาใช้ปลั๊กอินการตรวจสอบ - มันยอดเยี่ยมมาก! และแบบฟอร์มการรีเซ็ตนั้นง่าย:

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

ฉันพบว่ามันใช้งานได้ดี

$(":input").not(":button, :submit, :reset, :hidden").each( function() {
    this.value = this.defaultValue;     
});

โดยทั่วไปไม่มีวิธีแก้ปัญหาใดที่ทำให้ฉันมีความสุข มีคนเพียงไม่กี่คนที่ชี้ให้เห็นว่าพวกเขาล้างข้อมูลฟอร์มแทนที่จะรีเซ็ต

อย่างไรก็ตามมีคุณสมบัติจาวาสคริปต์บางอย่างที่ช่วยได้:

• 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 ใหม่บางคนอาจต้องการการดูแลเป็นพิเศษ แต่ความคิดเดียวกันควรใช้งานได้
• องค์ประกอบจะต้องมีการอ้างอิงโดยตรง ie $( "#container" ).resetValue()จะไม่ทำงาน ใช้$( "#container :input" )แทนเสมอ
• ดังกล่าวข้างต้นนี่คือตัวอย่าง: http://jsfiddle.net/kritzikratzi/N8fEF/1/

คุณอาจพบว่าวิธีนี้แก้ไขได้ง่ายกว่าโดยไม่ต้อง jQuery

ใน JavaScript ปกติสิ่งนี้ง่ายเหมือน:

document.getElementById('frmitem').reset();

ฉันพยายามจำไว้เสมอว่าในขณะที่เราใช้ jQuery เพื่อปรับปรุงและเร่งความเร็วการเขียนโค้ดของเราบางครั้งมันก็ไม่ได้เร็วขึ้นจริง ในกรณีเหล่านั้นมักใช้วิธีอื่นดีกว่า

ฉันทำเปลี่ยนแปลงเล็กน้อยของการแก้ปัญหาที่ดีฟรานซิสลูอิส สิ่งที่โซลูชันของเขาไม่ทำคือตั้งค่าแบบเลื่อนลงเลือกเป็นว่าง (ผมคิดว่าเมื่อคนส่วนใหญ่ต้องการที่จะ "ชัดเจน" พวกเขาอาจต้องการที่จะทำให้ค่าทั้งหมดที่ว่างเปล่า.) .find('select').prop("selectedIndex", -1)หนึ่งนี้ไม่ได้กับ

$.fn.clear = function()
{
    $(this).find('input')
            .filter(':text, :password, :file').val('')
            .end()
            .filter(':checkbox, :radio')
                .removeAttr('checked')
            .end()
        .end()
    .find('textarea').val('')
        .end()
    .find('select').prop("selectedIndex", -1)
        .find('option:selected').removeAttr('selected')
    ;
    return this;
};

ปกติฉันจะเพิ่มปุ่มรีเซ็ตที่ซ่อนอยู่ในแบบฟอร์ม เมื่อต้องการเพียง: $ ('# รีเซ็ต') คลิก ();

การแก้ไขคำตอบที่โหวตมากที่สุดสำหรับ$(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();
});

เพียงใช้สิ่งที่jQuery Trigger eventชอบดังนี้:

$('form').trigger("reset");

การดำเนินการนี้จะรีเซ็ตช่องทำเครื่องหมาย radiobuttons textboxes ฯลฯ ... โดยพื้นฐานแล้วฟอร์มของคุณจะเปลี่ยนเป็นสถานะเริ่มต้น เพียงใส่#ID, Class, elementภายในjQueryตัวเลือก

สิ่งนี้ใช้งานได้สำหรับฉันคำตอบ 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 เพื่อสร้างปุ่มหน้าจะไม่รีเฟรชเมื่อคลิก ขอขอบคุณเปาโลอีกครั้งสำหรับข้อมูลของคุณ ปัญหาเดียวคือถ้าฉันมีค่าเริ่มต้นในรูปแบบ

ฉันใช้โซลูชันด้านล่างและใช้งานได้สำหรับฉัน (ผสมจาวาสคริปต์แบบดั้งเดิมกับ jQuery)

$("#myformId").submit(function() {
    comand="window.document."+$(this).attr('name')+".reset()";
    setTimeout("eval(comando)",4000);
})

ฉันเป็นแค่สื่อกลางใน 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--"; }

คุณเพิ่งกำหนดค่าของคุณกลับไปเป็นค่าเริ่มต้นที่ควรจะเป็น

วิธีที่ฉันใช้ในแบบฟอร์มที่มีขนาดค่อนข้างใหญ่ (50+ ช่อง) คือการโหลดแบบฟอร์มใหม่ด้วย AJAX โดยทั่วไปแล้วทำการโทรกลับไปที่เซิร์ฟเวอร์และส่งคืนค่าฟิลด์ด้วยค่าเริ่มต้น สิ่งนี้ทำง่ายกว่าการพยายามคว้าแต่ละเขตข้อมูลด้วย JS แล้วตั้งค่าเป็นค่าเริ่มต้น นอกจากนี้ยังอนุญาตให้ฉันเก็บค่าเริ่มต้นไว้ในที่เดียว - รหัสของเซิร์ฟเวอร์ ในเว็บไซต์นี้มีค่าเริ่มต้นแตกต่างกันไปตามการตั้งค่าของบัญชีและดังนั้นฉันจึงไม่ต้องกังวลเกี่ยวกับการส่งสิ่งเหล่านี้ไปยัง JS ปัญหาเล็ก ๆ อย่างเดียวที่ฉันต้องจัดการคือมีฟิลด์แนะนำที่ต้องเริ่มต้นหลังจากการโทร AJAX แต่ไม่ใช่เรื่องใหญ่

คำตอบทั้งหมดนี้เป็นสิ่งที่ดี แต่วิธีที่ง่ายที่สุดในการทำเช่นนี้คือการรีเซ็ตของปลอมนั่นคือคุณใช้ลิงก์และปุ่มรีเซ็ต

เพียงเพิ่ม CSS เพื่อซ่อนปุ่มรีเซ็ตจริงของคุณ

input[type=reset] { visibility:hidden; height:0; padding:0;}

และจากนั้นในลิงก์ของคุณคุณเพิ่มดังต่อไปนี้

<a href="javascript:{}" onclick="reset.click()">Reset form</a>

<input type="reset" name="reset" id="reset" /><!--This input button is hidden-->

หวังว่านี่จะช่วยได้! A.

<script type="text/javascript">
$("#edit_name").val('default value');
$("#edit_url").val('default value');
$("#edit_priority").val('default value');
$("#edit_description").val('default value');
$("#edit_icon_url option:selected").removeAttr("selected");
</script>

ที่นี่พร้อมรีเฟรชช่องทำเครื่องหมายและเลือก:

$('#frm').find('input:text, input:password, input:file, textarea').val('');
$('#frm').find('input:radio, input:checkbox').attr("checked",false).checkboxradio("refresh");
$('#frm').find('select').val('').selectmenu('refresh');

ฉันมีปัญหาเดียวกันและโพสต์ของเปาโลช่วยฉันออก แต่ฉันต้องปรับสิ่งหนึ่ง แบบฟอร์มของฉันที่มี id Advancedindexsearch มีเฉพาะฟิลด์อินพุตและรับค่าจากเซสชัน ด้วยเหตุผลบางอย่างต่อไปนี้ใช้ไม่ได้สำหรับฉัน:

$("#advancedindexsearch").find("input:text").val("");

หากฉันใส่การแจ้งเตือนหลังจากนี้ฉันเห็นค่าที่ถูกลบอย่างถูกต้อง แต่หลังจากนั้นพวกเขาจะถูกแทนที่อีกครั้ง ฉันยังไม่รู้ว่าจะทำอย่างไรหรือทำไม แต่บรรทัดต่อไปนี้ได้ทำการหลอกลวงสำหรับฉัน:

$("#advancedindexsearch").find("input:text").attr("value","");

คำตอบของเปาโลไม่ได้คำนึงถึงตัวเลือกวันที่เพิ่มใน:

$form.find('input[type="date"]').val('');

ฉันทำการปรับปรุงเล็กน้อยในคำตอบดั้งเดิมของ Paolo Bergantino

function resetFormInputs(context) {
    jQuery(':input', context)
    .removeAttr('checked')
    .removeAttr('selected')
    .not(':button, :submit, :reset, :hidden')
    .each(function(){
         jQuery(this).val(jQuery(this).prop('defautValue'));
    });
}

ด้วยวิธีนี้ฉันสามารถส่งองค์ประกอบบริบทใด ๆ ไปยังฟังก์ชัน ฉันสามารถรีเซ็ตทั้งฟอร์มหรือเฉพาะชุดของฟิลด์ที่กำหนดตัวอย่างเช่น:

resetFormInputs('#form-id'); // entire form
resetFormInputs('.personal-info'); // only the personal info field set

นอกจากนี้ค่าเริ่มต้นของอินพุตยังคงอยู่

นี่คือโซลูชันของฉันซึ่งใช้งานกับอินพุต html5 ใหม่ได้ด้วย:

/**
 * removes all value attributes from input/textarea/select-fields the element with the given css-selector
 * @param {string} ele css-selector of the element | #form_5
 */
function clear_form_elements(ele) {
    $(ele).find(':input').each(function() {
        switch (this.type) {
            case 'checkbox':
            case 'radio':
                this.checked = false;
            default:
                $(this).val('');
                break;
        }
    });
}

การเติมเต็มคำตอบที่ยอมรับถ้าคุณใช้ปลั๊กอิน 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();
    }

$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);