JQuery के साथ फ़ील्ड साफ़ करें

Question

मैं एक फॉर्म में सभी इनपुट और टेक्सारिया फ़ील्ड को खाली करना चाहता हूं। यह resetकक्षा के साथ इनपुट बटन का उपयोग करते समय निम्नलिखित की तरह काम करता है :

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

इससे पृष्ठ के सभी फ़ील्ड साफ़ हो जाएँगे, न कि फ़ॉर्म से आने वाले। मेरा चयनकर्ता वास्तविक रीसेट बटन के रूप में कैसा दिखता है?

Comments

पाओलो Bergantino से जवाब की जाँच करें stackoverflow.com/questions/680241/blank-out-a-form-with-jquery

— दुष्ट सांकेतिक शब्दों में बदलनेवाला

यहां एक फॉर्म को रीसेट करने के लिए अधिक विस्तृत विधि ।

— उज्बेकन

Answer 1

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

Comments

अपने input[type=password]खेतों को मत भूलना ।

— सैमी

यह उत्तर मूल प्रश्न को कवर करता है। सिर्फ टेक्स्ट फील्ड से ज्यादा चाहने वालों को जाहिर तौर पर जरूरत के मुताबिक कोड जोड़ने होंगे ...

— शेनबेल

यह भी याद रखें कि HTML5 में टाइप = पासवर्ड (जैसे सैमीके ने कहा) के अलावा और भी कई प्रकार के इनपुट होंगे: टाइप = url, टाइप = अंक, टाइप = ईमेल, आदि http://www.w3.org/TR/html5/forms .html # स्टेट्स-ऑफ-द-टाइप-एट्रीब्यूट

— गेब्रियल

एक छोटी सी टिप: यह चयनकर्ता उन इनपुट तत्वों का चयन नहीं करेगा जो अंतर्निहित प्रकार = पाठ पर निर्भर हैं, आपको अपने मार्कअप पर टाइप = पाठ को स्पष्ट रूप से शामिल करना होगा। यह स्पष्ट हो सकता है, लेकिन यह मेरे लिए नहीं था, अभी-अभी :-)

— एलबिन

@CaptSaltyJack: यह उन्हें डिफ़ॉल्ट मानों पर रीसेट करता है जो उन्हें साफ़ करने के समान नहीं है ...

— शेनलेक

Answer 2

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 का सुझाव है :

प्राप्त करने के लिए और इस तरह के रूप परिवर्तन डोम गुण checked, selectedया disabledप्रपत्र तत्वों का राज्य है, का उपयोग .prop () विधि।

Comments

कोड का पहला टुकड़ा चेकबॉक्स के मानों को केवल अनचेक करने के बजाय "" सेट करेगा। और यह चयनों को प्रभावित नहीं करेगा, क्योंकि यह विकल्प टैग हैं जो चयनित होते हैं।

चेकबॉक्स मूल्यों को हटाने से बचने के लिए, मैंने आपके उत्तर से प्रेरित होकर निम्नलिखित का उपयोग किया $(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, select').val('').removeAttr('value');:। यह डिफ़ॉल्ट मानों को हटा देगा (अर्थात value="something", चेकबॉक्स या चयन के लिए नहीं।

— जेपी मैरीगेर-लैम

यदि आपके पास रेडियो, चेकबॉक्स या चयन हैं, तो इस विकल्प (1) का उपयोग न करें, उनके मानों के गायब होने के बाद आपको एक अजीब बग ढूंढने में बहुत समय बर्बाद होगा। सही संस्करण, जो उनके मूल्यों को बरकरार $(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, :radio, select').val('');रखता है: (जेपी मारीगर-लैम की टिप्पणी के आधार पर)

— कोन्स्टेंटिन पेरियासलोव

दूसरे विकल्प से बचने का कोई कारण?

— रिनेज़

आपका दूसरा समाधान वास्तविक उत्तर है

— अबजरक

Answer 3

किसी भी कारण से इसका उपयोग नहीं किया जाना चाहिए?

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

Comments

@ pythonian29033: और अपने दृष्टिकोण के साथ, आप पृष्ठ के सभी रूपों को डिफ़ॉल्ट पर रीसेट कर देंगे ... जो निश्चित रूप से एक सामान्य डेवलपर नहीं चाहता है। मुझे लगता है कि एक jQuery डेवलपर को इस तथ्य पर ध्यान देना चाहिए कि उसे चयनकर्ता को एक उदाहरण कोड से उपयुक्त एक में बदलने की आवश्यकता है ...

— Sk8erPeter

@ Sk8erPeter यदि आपके पास आईडी वाले पृष्ठ पर कई तत्व हैं form, तो आप इसे गलत कर रहे हैं। यदि चयनकर्ता था form, तो आप सही होंगे , लेकिन यह आईडी चयनकर्ता नहीं है #form।

— ब्रैंडन

@brandones: आपको इस बात पर ध्यान देना चाहिए था कि आप क्या उत्तर दे रहे थे, क्योंकि आप गलत हैं ... :) उस कोड की जांच करें जिसे pythonian29033 ने लिखा था (जो मैंने पहले उत्तर दिया था): $("form").trigger('reset');वास्तव में सभी <form>तत्वों पर "रीसेट" घटना को ट्रिगर करता है। ज्यादातर मामलों में, यह गलत हो सकता है। लेकिन $("#form").trigger('reset');(मूल उत्तर में दिखाया गया है) केवल "रीसेट" ईवेंट को उस तत्व पर चलाता है जिसमें "फॉर्म" आईडी सेट ( #formचयनकर्ता के साथ पहुंच योग्य ) है। और हाँ, एक आईडी का उपयोग केवल एक बार किया जाना चाहिए, यही कारण है कि वे इसे "आईडी" कहते हैं, क्योंकि यह एक तत्व को असमान रूप से पहचानता है।

— Sk8erPeter

Answer 4

यह उन मामलों को हैंडल नहीं करेगा जहां फॉर्म इनपुट फ़ील्ड में रिक्त रिक्त मान नहीं हैं।

कुछ ऐसा काम करना चाहिए

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

Comments

मेरे पास अपनी पहली पोस्ट से सिर्फ js कोड है और चाहते हैं कि यह प्रत्येक पृष्ठ पर कई रूपों में कई रीसेट बटन के साथ काम करे। तो यह सिर्फ चयनकर्ता है जिसे कुछ योगदान की आवश्यकता है।

— tbuehlmann 21

Answer 5

यदि आप चयनकर्ताओं का उपयोग करते हैं और रिक्त मानों को मान देते हैं, तो यह फ़ॉर्म को रीसेट नहीं कर रहा है, यह सभी फ़ील्ड खाली कर रहा है। रीसेट फॉर्म बनाना है क्योंकि सर्वर साइड से फॉर्म लोड होने के बाद यह उपयोगकर्ता की किसी भी संपादन क्रिया से पहले था। यदि नाम "उपयोगकर्ता नाम" के साथ एक इनपुट है और उस उपयोगकर्ता नाम को सर्वर साइड से प्रीफ़िल्ड किया गया था, तो इस पृष्ठ के अधिकांश समाधान इनपुट से उस मूल्य को हटा देंगे, इसे उस मूल्य पर रीसेट नहीं करेंगे, जो उपयोगकर्ता के परिवर्तनों से पहले था। यदि आपको फ़ॉर्म को रीसेट करने की आवश्यकता है, तो इसका उपयोग करें:

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

यदि आपको फ़ॉर्म को रीसेट करने की आवश्यकता नहीं है, लेकिन सभी इनपुट को कुछ मूल्य के साथ भरें, उदाहरण के लिए रिक्त मान, तो आप अन्य टिप्पणियों के अधिकांश समाधानों का उपयोग कर सकते हैं।

Answer 6

सरल लेकिन आकर्षण की तरह काम करता है।

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

Comments

सिवाय इसके कि यह खेतों को साफ नहीं करता है। यह उन्हें उनकी चूक के लिए तैयार करता है।

— मार्क फ्रेजर

Answer 7

यदि कोई अभी भी इस धागे को पढ़ रहा है, तो यहां jQuery का उपयोग नहीं करके सबसे सरल समाधान है, लेकिन सादे जावास्क्रिप्ट। यदि आपके इनपुट फ़ील्ड एक फ़ॉर्म के अंदर हैं, तो एक साधारण जावास्क्रिप्ट रीसेट कमांड है:

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

इसके बारे में यहाँ और अधिक: http://www.w3schools.com/jsref/met_form_reset.asp

चीयर्स!

Comments

जैसा वह कहता है। यह जन्मजात रूप मूल्य के अनुरूप है और मूल्यों को खाली नहीं करता है। लेकिन हां, यदि आपने डिफ़ॉल्ट मानों के साथ फॉर्म भरा है, तो उन्हें मंजूरी नहीं दी जाएगी। संभवतः एक जेएस लूप जो सभी इनपुटों को गर्त में ले जाता है और उन्हें साफ करता है

— टारमो सालस्टे

Answer 8

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

Answer 9

इसे किसी भी जावास्क्रिप्ट के साथ करने की आवश्यकता क्यों है?

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

Comments

कोशिश की है कि पहले एक, यह डिफ़ॉल्ट मान के साथ फ़ील्ड्स को साफ़ नहीं करेगा।

— tbuehlmann 21

एक और कारण है कि आपको अक्सर इस एक के लिए जावास्क्रिप्ट की आवश्यकता होती है। फ़ॉर्म एक "फ़ॉर्म" नहीं हो सकता है। उदाहरण के लिए, आपका फॉर्म वास्तव में Backbone.js / Ember.js / AngularJS ऐप के लिए इनपुट का एक संग्रह है और डेटा को सर्वर को पारंपरिक रूप में कभी भी प्रस्तुत नहीं किया जाएगा, लेकिन इसे जावास्क्रिप्ट क्लाइंट पक्ष के साथ कड़ाई से संसाधित करने की आवश्यकता है। इस तरह के मामलों में रीसेट करने के लिए कोई फॉर्म नहीं है।

— जॉन मुन्सच

.live()घटाया हुआ है, और यह भी धीमा / अनावश्यक है। आप बस .bind()या उपयोग कर सकते हैं .on()।

— केविन बील

Answer 10

यदि आप इसके प्रकार के बावजूद सभी इनपुट बॉक्स खाली करना चाहते हैं तो यह एक मिनट का कदम है

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

Answer 11

मुझे फॉर्म रीसेट करने की सबसे आसान ट्रिक मिली

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

या

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

Answer 12

जावास्क्रिप्ट के साथ आप बस इस सिंटैक्स के साथ कर सकते हैं getElementById("your-form-id").reset();

आप इस तरह से रीसेट फ़ंक्शन को कॉल करके भी jquery का उपयोग कर सकते हैं $('#your-form-id')[0].reset();

याद रखना नहीं भूलना चाहिए [0]। आपको निम्न त्रुटि मिलेगी अगर

TypeError: $ (...)। रीसेट एक फ़ंक्शन नहीं है

JQuery भी एक घटना प्रदान करता है जिसका आप उपयोग कर सकते हैं

$ ( '# Form_id') ट्रिगर ( "रीसेट")।;

मैंने कोशिश की और यह काम करता है।

नोट: यह नोट करना महत्वपूर्ण है कि ये विधियाँ पृष्ठ लोड पर सर्वर द्वारा निर्धारित आपके प्रारंभिक मूल्य को केवल आपके फॉर्म को रीसेट करती हैं। इसका मतलब है कि यदि आपका इनपुट 'सेट वैल्यू' पर सेट किया गया था इससे पहले कि आप एक यादृच्छिक परिवर्तन करें, रीसेट विधि कहा जाता है के बाद फ़ील्ड उसी मूल्य पर रीसेट हो जाएगी।

आशा है ये मदद करेगा

Answer 13

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

आपके फॉर्म editPOIFormकी idविशेषता कहां है ।

Comments

केवल कभी एक होगा #editPOIFormऔर इसलिए .each()विधि का कोई मतलब नहीं है। यहां तक ​​कि अगर आपने इस आईडी को कई रूपों में जोड़ा है, तो यह केवल उनमें से एक को वापस करेगा।

— केविन बील

प्रत्येक () आपको अंतर्निहित डोम ऑब्जेक्ट पर प्राप्त करने के लिए ($ (इस)) का उपयोग करने की अनुमति देता है, और कॉल रीसेट ()। यह मानकर कि आप सब कुछ साफ़ करने के बजाय डिफ़ॉल्ट मानों पर रीसेट करना चाहते हैं, यह एक अच्छा समाधान है।

— डेव

@ क्या आप बस इस्तेमाल कर सकते हैं$('#editPOIForm').get(0).reset();

— थॉमस Daugaard

@ThomasDaugaard: सिवाय इसके कि यदि आप उपयोग करते हैं (0) या बस $ ('# editPOIForm') [0] तो आपको एक स्क्रिप्ट त्रुटि मिलेगी यदि $ ('# editPOIForm') बिना किसी तत्व से मेल खाता है, जबकि प्रत्येक () बिना असफल होगा एक त्रुटि। तो मुझे लगता है कि यह आपकी प्राथमिकताओं पर निर्भर करता है जहां तक ​​त्रुटि से निपटने की बात है।

— डेव

Answer 14

आप उपयोग क्यों नहीं करते document.getElementById("myId").reset();? यह सरल और सुंदर है

Answer 15

परीक्षण किया और सत्यापित कोड:

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

जावास्क्रिप्ट को इसमें शामिल किया $(document).readyजाना चाहिए और यह आपके तर्क के साथ होना चाहिए।

Answer 16

सबसे आसान और सबसे अच्छा उपाय है-
$("#form")[0].reset();

यहाँ का उपयोग न करें -
$(this)[0].reset();

Comments

बस थोड़ी सी चेतावनी: यदि आपके पास इनपुट के लिए डिफ़ॉल्ट मान हैं, तो मान लें कि सर्वर-रेंडर किया गया है, तो form.reset();उन मानों पर रीसेट कर देंगे, और इनपुट्स को साफ नहीं करेंगे।

— Evil_Bengt

Answer 17

अगर आप फ़ील्ड्स को साफ़ करना चाहते हैं तो हमें बताएं और खाता अपवाद को छोड़कर, समय के साथ ड्रॉपडाउन बॉक्स को विशेष मूल्य पर रीसेट कर दिया जाएगा, अर्थात 'All'.Remaining के फ़ील्ड्स को खाली यानी टेक्स्ट बॉक्स पर रीसेट कर दिया जाना चाहिए। इस दृष्टिकोण का उपयोग क्लियरिंग के लिए किया जाएगा। विशेष क्षेत्रों हमारी आवश्यकता के रूप में।

 $(':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';
     }
 });

Comments

सबसे पूरा जवाब। धन्यवाद।

— RationalRabbit

एक प्रश्न: यदि आप इसे प्रोग्रामिक रूप से कर रहे थे, तो एक बटन क्लिक के बजाय आप इसे एक विशिष्ट रूप में कैसे निर्देशित करेंगे?

— RationalRabbit

Answer 18

मैं इसका उपयोग करता हूं:

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

और यहाँ मेरा बटन है:

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

Comments

एक रीसेट इनपुट प्रकार उपलब्ध है w3.org/TR/html-markup/input.reset.html

— थॉमस वेल्टन

Answer 19

इस कोड का उपयोग करें जहाँ आप सामान्य रीसेट फ़ंक्शन को jQuery द्वारा कॉल करना चाहते हैं

setTimeout("reset_form()",2000);

और तैयार दस्तावेज़ पर साइट jQuery के बाहर इस समारोह लिखें

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

Answer 20

आप में से कुछ लोग शिकायत कर रहे थे कि रेडियो और ऐसे डिफॉल्ट "चेक किए गए" स्टेटस को क्लियर कर रहे हैं ... आपको बस इतना करना है: नोट: रेडियो, चेकबॉक्स चयनकर्ताओं को .not और प्रॉब्लम सॉल्व करना।

यदि आपको काम करने के लिए अन्य सभी रीसेट फ़ंक्शंस नहीं मिल सकते हैं, तो यह एक होगा।

• Ngen के जवाब से अनुकूलित

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

Answer 21

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

1. frmID रूप की पहचान है

2. OnSuccessऑपरेशन को हम " ClearInput" नाम के साथ जावास्क्रिप्ट फ़ंक्शन कहते हैं

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

3. यदि आप इन दोनों को सही करते हैं, तो आप इसे काम करने से नहीं रोक पाएंगे ...

Answer 22

निम्न कोड सभी फ़ॉर्म को साफ़ करता है और यह फ़ील्ड खाली हो जाएगा। यदि आप केवल एक विशेष प्रपत्र को साफ़ करना चाहते हैं यदि पृष्ठ एक से अधिक फ़ॉर्म है, तो कृपया फॉर्म की आईडी या वर्ग का उल्लेख करें

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

Answer 23

यदि मैं खाता को छोड़कर सभी क्षेत्रों को साफ़ करना चाहता हूँ .. तो निम्न का उपयोग करें

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

Comments

आप चेकबॉक्स के लिए मान को खोना नहीं चाहते हैं, लेकिन

— रेडियोबुटन को

Answer 24

कोड मैं यहाँ और संबंधित एसओ सवालों पर अधूरा लगता है।

फ़ॉर्म को रीसेट करने का अर्थ है 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()) })

कृपया मुझे बताएं कि क्या मुझे कुछ याद आ रहा है या कुछ भी सुधार किया जा सकता है।

Answer 25

उपरोक्त में से कोई भी एक साधारण मामले पर काम नहीं करता है जब पृष्ठ में वेब उपयोगकर्ता नियंत्रण के लिए कॉल शामिल होता है जिसमें IHttpHandler अनुरोध प्रसंस्करण (कैप्चा) शामिल होता है। रेकुशर्ट भेजने के बाद (इमेज प्रोसेसिंग के लिए) नीचे दिए गए कोड फॉर्म पर फ़ील्ड्स (HttpHandler अनुरोध भेजने से पहले) को साफ नहीं करता है।

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

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

Answer 26

मैंने एक सार्वभौमिक 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>

Answer 27

निम्न के रूप में छिपा हुआ रीसेट बटन जोड़ें

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

Answer 28

$ ('फ़ॉर्म') सबमिट करें (फ़ंक्शन () {

var el = $(this);

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

return false;

});