ล้างเขตข้อมูลฟอร์มด้วย jQuery

ฉันต้องการล้างฟิลด์อินพุตและฟิลด์ textarea ทั้งหมดในแบบฟอร์ม มันทำงานเหมือนดังต่อไปนี้เมื่อใช้ปุ่มอินพุตกับresetคลาส:

$(".reset").bind("click", function() {
  $("input[type=text], textarea").val("");
});

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

$(".reset").click(function() {
    $(this).closest('form').find("input[type=text], textarea").val("");
});

สำหรับ jQuery 1.6+ :

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

สำหรับ jQuery <1.6 :

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

โปรดดูโพสต์นี้: การรีเซ็ตฟอร์มหลายขั้นตอนด้วย jQuery

หรือ

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

ในฐานะ jQuery แนะนำ :

เพื่อดึงและคุณสมบัติการเปลี่ยนแปลง DOM เช่นchecked, selectedหรือdisabledสถานะขององค์ประกอบของแบบฟอร์มใช้.prop ()วิธีการ

ไม่ควรใช้เหตุผลนี้เพราะอะไร

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

สิ่งนี้จะไม่จัดการกรณีที่ช่องป้อนแบบฟอร์มมีค่าเริ่มต้นที่ไม่ว่าง

สิ่งที่ชอบควรทำงาน

$('yourdiv').find('form')[0].reset();

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

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

หากคุณไม่ต้องการรีเซ็ตฟอร์ม แต่กรอกข้อมูลทั้งหมดด้วยค่าบางค่าตัวอย่างเช่นค่าว่างคุณสามารถใช้โซลูชันส่วนใหญ่จากความคิดเห็นอื่น ๆ

เรียบง่าย แต่ทำงานเหมือนจับใจ

$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS

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

document.getElementById("myform").reset();

เพิ่มเติมเกี่ยวกับที่นี่: http://www.w3schools.com/jsref/met_form_reset.asp

ไชโย!

$('form[name="myform"]')[0].reset();

ทำไมมันต้องทำกับ JavaScript ใด ๆ เลย?

<form>
    <!-- snip -->
    <input type="reset" value="Reset"/>
</form>

http://www.w3.org/TR/html5/the-input-element.html#attr-input-type-keywords

พยายามที่หนึ่งก่อนจะไม่ล้างช่องด้วยค่าเริ่มต้น

นี่คือวิธีที่จะทำกับ jQuery แล้ว:

$('.reset').on('click', function() {
    $(this).closest('form').find('input[type=text], textarea').val('');
});

หากคุณต้องการล้างกล่องใส่ข้อมูลทั้งหมดโดยไม่คำนึงถึงประเภทของมันก็เป็นขั้นตอนโดย

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

ฉันมีเคล็ดลับที่ง่ายที่สุดในการรีเซ็ตแบบฟอร์ม

jQuery("#review-form")[0].reset();

หรือ

$("#review-form").get().reset();

ด้วย Javascript คุณสามารถทำได้ด้วยไวยากรณ์นี้ getElementById("your-form-id").reset();

คุณยังสามารถใช้ jquery ได้โดยเรียกใช้ฟังก์ชันรีเซ็ตด้วยวิธีนี้ $('#your-form-id')[0].reset();

[0]จำไม่ได้ที่จะลืม คุณจะได้รับข้อผิดพลาดต่อไปนี้หาก

TypeError: $ (... ). reset ไม่ใช่ฟังก์ชั่น

JQuery ยังมีกิจกรรมที่คุณสามารถใช้ได้

$ ( '# form_id') ทริกเกอร์ ( "รีเซ็ต.");

ฉันพยายามแล้วก็ใช้งานได้

หมายเหตุ: สิ่งสำคัญคือต้องสังเกตว่าวิธีการเหล่านี้รีเซ็ตฟอร์มของคุณเป็นค่าเริ่มต้นที่ตั้งโดยเซิร์ฟเวอร์เมื่อโหลดหน้าเว็บ ซึ่งหมายความว่าหากการป้อนข้อมูลของคุณถูกตั้งค่า 'ค่าการตั้งค่า' ก่อนที่คุณจะทำการเปลี่ยนแปลงแบบสุ่มฟิลด์จะถูกรีเซ็ตเป็นค่าเดียวกันหลังจากเรียกวิธีการรีเซ็ต

หวังว่ามันจะช่วย

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

ที่editPOIFormเป็นidแอตทริบิวต์ของแบบฟอร์มของคุณ

ทำไมคุณไม่ใช้document.getElementById("myId").reset();? นี่คือเรียบง่ายและสวย

รหัสผ่านการทดสอบและตรวจสอบแล้ว:

  $( document ).ready(function() {
    $('#messageForm').submit(function(e){
       e.preventDefault();
    });
    $('#send').click(function(e){
      $("#messageForm")[0].reset();
    });
  });

ต้องรวม Javascript ไว้ด้วย$(document).readyและต้องเป็นไปตามตรรกะของคุณ

ทางออกที่ง่ายที่สุดและดีที่สุดคือ -
$("#form")[0].reset();

อย่าใช้ที่นี่ -
$(this)[0].reset();

ให้เราบอกว่าถ้าคุณต้องการล้างเขตข้อมูลและยกเว้น accountType ในกล่องแบบเลื่อนลงเวลาเฉลี่ยจะถูกรีเซ็ตเป็นค่าเฉพาะเช่น 'All'.Remaining field ควรถูกรีเซ็ตเป็นช่องว่างเช่นกล่องข้อความวิธีการนี้จะใช้สำหรับการล้าง สาขาเฉพาะตามความต้องการของเรา

 $(':input').not('#accountType').each( function() {

    if(this.type=='text' || this.type=='textarea'){
             this.value = '';
       }
    else if(this.type=='radio' || this.type=='checkbox'){
         this.checked=false;
      }
         else if(this.type=='select-one' || this.type=='select-multiple'){
              this.value ='All';
     }
 });

ฉันใช้สิ่งนี้:

$(".reset").click(function() {
  $('input[type=text]').each(function(){
     $(this).val('');
  });
});

และนี่คือปุ่มของฉัน:

<a href="#" class="reset">
  <i class="fa fa-close"></i>
     Reset
</a>

ใช้รหัสนี้ในที่ที่คุณต้องการเรียกฟังก์ชั่นการรีเซ็ตปกติโดย jQuery

setTimeout("reset_form()",2000);

และเขียนฟังก์ชันนี้ออกจากไซต์ jQuery บนเอกสารพร้อม

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</script>

บางท่านบ่นว่าวิทยุและสถานะดังกล่าวถูกล้างสถานะ "ตรวจสอบ" ที่เป็นค่าเริ่มต้นแล้ว ... สิ่งที่คุณต้องทำคือเพิ่มตัวเลือกช่องทำเครื่องหมาย: วิทยุ,: ให้กับ. not และปัญหาจะได้รับการแก้ไข

หากคุณไม่สามารถใช้งานฟังก์ชั่นการรีเซ็ตอื่น ๆ ได้ฟังก์ชันนี้จะทำงาน

• ดัดแปลงมาจากคำตอบของ ngen

  function form_reset(formID){
      $(':input','#'+formID)
      .not(':button',':submit',':reset',':hidden',':radio',':checkbox')
      .val('');
  }

@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
    OnSuccess = "ClearInput",
    HttpMethod = "Post",
    UpdateTargetId = "defect-list",
    InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" })) 

1. frmID คือการระบุตัวตนของแบบฟอร์ม

2. OnSuccessของการดำเนินการที่เราเรียกใช้ฟังก์ชัน JavaScript ด้วยชื่อ " ClearInput"

   <script type="text/javascript">
       function ClearInput() {
           //call action for render create view
           $("#frmID").get(0).reset();
       }
   </script>

3. หากคุณทำทั้งสองอย่างถูกต้องคุณจะไม่สามารถหยุดทำงาน ...

โค้ดต่อไปนี้จะเคลียร์ทุกฟอร์มและฟิลด์นั้นจะว่างเปล่า หากคุณต้องการล้างเฉพาะแบบฟอร์มหากหน้ามีมากกว่าหนึ่งรูปแบบโปรดระบุ id หรือคลาสของแบบฟอร์ม

$("body").find('form').find('input,  textarea').val('');

หากฉันต้องการล้างฟิลด์ทั้งหมดยกเว้นบัญชีประเภทใช้วิธีต่อไปนี้

$q(':input','#myform').not('#accountType').val('').removeAttr('checked').removeAttr('selected');

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

การรีเซ็ตฟอร์มหมายถึงการตั้งค่าดั้งเดิมจาก HTML ดังนั้นฉันจึงรวมมันเข้าด้วยกันสำหรับโครงการเล็ก ๆ น้อย ๆ ที่ฉันทำตามรหัสข้างต้น:

            $(':input', this)
                .not(':button, :submit, :reset, :hidden')
                .each(function(i,e) {
                    $(e).val($(e).attr('value') || '')
                        .prop('checked',  false)
                        .prop('selected', false)
                })

            $('option[selected]', this).prop('selected', true)
            $('input[checked]',   this).prop('checked',  true)
            $('textarea',         this).each(function(i,e) { $(e).val($(e).html()) })

โปรดแจ้งให้เราทราบหากฉันไม่มีสิ่งใดหรือปรับปรุงได้

ไม่มีการทำงานใด ๆ ข้างต้นในกรณีง่าย ๆ เมื่อเพจมีการเรียกไปยังการควบคุมผู้ใช้เว็บที่เกี่ยวข้องกับการประมวลผลคำขอ IHttpHandler (captcha) หลังจากส่ง requsrt (สำหรับการประมวลผลภาพ) รหัสด้านล่างจะไม่ล้างฟิลด์ในแบบฟอร์ม (ก่อนส่งคำขอ HttpHandler) ทุกอย่างทำงานได้อย่างถูกต้อง

<input type="reset"  value="ClearAllFields" onclick="ClearContact()" />

 <script type="text/javascript">
       function ClearContact() {
           ("form :text").val("");
       }
    </script>

ฉันเขียนปลั๊กอิน jQuery สากล:

/**
 * Resets any input field or form
 */
$.fn.uReset = function () {
    return this.filter('form, :input').each(function () {
        var input = $(this);
        
        // Reset the form.
        if (input.is('form')) {
            input[0].reset();
            return;
        }

        // Reset any form field.
        if (input.is(':radio, :checkbox')) {
            input.prop('checked', this.defaultChecked);
        } else if (input.is('select')) {
            input.find('option').each(function () {
                $(this).prop('selected', this.defaultSelected);
            });
        } else if (this.defaultValue) {
            input.val(this.defaultValue);
        } else {
            console.log('Cannot reset to default value');
        }
    });
};

$(function () {
    // Test jQuery plugin.
    $('button').click(function (e) {
        e.preventDefault();
        
        var button = $(this),
            inputType = button.val(),
            form = button.closest('form');
        
        if (inputType === 'form') {
            form.uReset()
        } else {
            $('input[type=' + inputType + '], ' + inputType, form).uReset();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Form</h3>
<form>
    <input type="text" value="default"/><br /><br />
    Ch 1 (default checked) <input type="checkbox" name="color" value="1" checked="checked" /><br />
    Ch 2 <input type="checkbox" name="color" value="2" /><br />
    Ch 3 (default checked) <input type="checkbox" name="color" value="3" checked="checked" /><br /><br />
    <select name="time"><br />
        <option value="15">15</option>
        <option selected="selected" value="30">30</option>
        <option value="45">45</option>
    </select><br /><br />
    R 1 <input type="radio" name="color" value="1" /><br />
    R 2 (default checked) <input type="radio" name="color" value="2" checked="checked" /><br />
    R 3 <input type="radio" name="color" value="3" /><br /><br />
    <textarea>Default text</textarea><br /><br />
    
    <p>Play with form values and then try to reset them</p>
    
    <button type="button" value="text">Reset text input</button>
    <button type="button" value="checkbox">Reset checkboxes</button>
    <button type="button" value="select">Reset select</button>
    <button type="button" value="radio">Reset radios</button>
    <button type="button" value="textarea">Reset textarea</button>
    <button type="button" value="form">Reset the Form</button>
</form>

เพิ่มปุ่มรีเซ็ตที่ซ่อนอยู่ดังต่อไปนี้

<input id="resetBtn" type="reset" value="reset" style="display:none" />
// Call reset buttons click event
// Similar to ClearInputs('resetBtn');
function ClearInputs(btnSelector) {
     var btn = $("#" + btnSelector);
     btn.click();
}

$ ('ฟอร์ม'). ส่ง (ฟังก์ชั่น () {

var el = $(this);

$('<button type="reset" style="display:none; "></button>')
    .appendTo(el)
    .click()
    .remove()
;

return false;

});