.Reset () विधि के साथ jQuery का उपयोग करके किसी फॉर्म को रीसेट कैसे करें

Question

मेरे पास काम करने वाला कोड था जो रीसेट बटन पर क्लिक करने पर मेरा फॉर्म रीसेट कर सकता था। हालाँकि मेरा कोड लंबा होने के बाद, मुझे एहसास हुआ कि यह अब काम नहीं करता है।

 <div id="labels">
        <table class="config">
            <thead>
                <tr>
                    <th colspan="4"; style= "padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Control Buttons Configuration</th>
                </tr>
                <tr>
                    <th>Index</th>
                    <th>Switch</th>
                    <th>Response Number</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>

                <form id="configform" name= "input" action="#" method="get">
                <tr><td style="text-align: center">1</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" value="" id="number_one"></td>
                    <td><input style="background: white; color: black;" type="text"  id="label_one"></td>
                </tr>
                <tr>
                    <td style="text-align: center">2</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id = "number_two" value=""></td>
                    <td><input style="background: white; color: black;" type="text"  id = "label_two"></td>
                </tr>
                <tr>
                    <td style="text-align: center">3</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id="number_three" value=""></td>
                    <td><input style="background: white; color: black;" type="text" id="label_three"></td>
                </tr>
                <tr>
                    <td style="text-align: center">4</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id="number_four" value=""></td>
                    <td><input style="background: white; color: black;" type="text" id="label_three"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" id="configsubmit" value="Submit"></td>
                </tr>
                <tr>
                    <td><input type="reset" id="configreset" value="Reset"></td>
                </tr>

                </form>
            </tbody>
        </table>

    </div>

और मेरा jQuery:

 $('#configreset').click(function(){
            $('#configform')[0].reset();
 });

क्या कोई स्रोत है जिसे मुझे अपने कोड में .reset()काम करने की विधि के लिए शामिल करना चाहिए ? पहले मैं उपयोग कर रहा था:

<script src="static/jquery.min.js">
</script>
<script src="static/jquery.mobile-1.2.0.min.js">
</script>

और यह .reset() विधि काम कर रही थी।

वर्तमान में मैं उपयोग कर रहा हूं

<script src="static/jquery-1.9.1.min.js"></script>      
<script src="static/jquery-migrate-1.1.1.min.js"></script>
<script src="static/jquery.mobile-1.3.1.min.js"></script>

क्या यह संभवतः इसका एक कारण हो सकता है?

Comments

क्या आप काम नहीं करने का एक उदाहरण दे सकते हैं? क्या कोई फ़ील्ड रीसेट हो रही है?

— अरुण पी जॉनी

यह कुछ इस तरह है, लेकिन यह यहाँ ठीक काम कर रहा है jsfiddle.net/chJ8B :( शायद स्क्रिप्ट के अन्य भागों की वजह से? लेकिन मेरे पास केवल 1 रूप है

— yvonnezoe

मेरा सवाल यह है कि क्या कोई भी क्षेत्र रीसेट नहीं किया गया है / कुछ काम कर रहे हैं

— अरुण पी जॉनी

आपका HTML अमान्य है । कोई फ़ॉर्म किसी TBODY तत्व का बच्चा नहीं हो सकता है, और TR एक FORM तत्व का बच्चा नहीं हो सकता है। फॉर्म टैग्स को टेबल के बाहर रखें (यानी टेबल को फॉर्म में रखें)। संभवतः संभवतः प्रपत्र को तालिका के बाहर ले जाया जा रहा है, लेकिन प्रपत्र नियंत्रण कक्षों में रह रहे हैं, इसलिए वे प्रपत्र में नहीं हैं।

— रॉब

@ रोब: ओ अच्छी बात! मैं कोशिश करूँगा कि धन्यवाद! मैं इस उपयोगी टिप्पणी को याद कर सकता था यदि मैं अपनी फिडल लिंक प्राप्त करने के लिए यहाँ वापस नहीं आता: s

— yvonnezoe

Answer 1

आप ट्रिगर () संदर्भ लिंक का उपयोग करने का प्रयास कर सकते हैं

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

Comments

बस जादुई और सीधे आगे! साझा करने के लिए बहुत सराहना की।

— अजय कुमार

प्रिय मतदाताओं, क्या आप मुझे अपने डाउन-वोट के पीछे का कारण बता सकते हैं, ताकि मैं अपने उत्तर को बेहतर बना सकूं।

— सागरपंचल

मैं $ ('। Profile_img_form') का उपयोग कर रहा हूं। ट्रिगर ('रीसेट'); मैंने अपने फॉर्म में प्रोफाइल_इम_फॉर्म नाम की क्लास जोड़ी है, फिर उसे कॉल किया। यह मेरे फ़ॉर्म और रिटर्निंग त्रुटि संदेश को रीसेट नहीं करता है जैसे अनकांशेड सिन्टैक्सेरर: अमान्य नियमित अभिव्यक्ति: /(^pg\.)bs\.(?:*..pg)fileinput(\.pg$)/: कृपया सुझाव दें कि क्या है मुद्दा। धन्यवाद।

— कमलेश

@ कमलेश को यह काम करना चाहिए, मैंने आपके लिए एक डेमो बनाया है, jsfiddle.net/Lkt4eq9y/2

— सागरपंचल

जवाब के लिए धन्यवाद। Googling / SO'ing :) के घंटे बच गए

— अंजना सिल्वा

Answer 2

http://jsfiddle.net/8zLLn/

  $('#configreset').click(function(){
        $('#configform')[0].reset();
  });

इसे JS fiddle में रखें। इच्छानुसार काम किया।

इसलिए, ऊपर दिए गए मुद्दों में से कोई भी यहां गलती नहीं है। हो सकता है कि आपको एक परस्पर विरोधी आईडी समस्या हो? क्या वास्तव में क्लिक निष्पादन है?

संपादित करें: (क्योंकि मैं उचित टिप्पणी क्षमता के बिना एक उदास बोरी हूँ) यह सीधे आपके कोड के साथ कोई समस्या नहीं है। यह ठीक काम करता है जब आप इसे उस पृष्ठ के संदर्भ से बाहर निकालते हैं जो आप वर्तमान में उपयोग कर रहे हैं, इसलिए, इसके बजाय विशेष jQuery / javascript और एट्रिब्यूट फॉर्म डेटा के साथ कुछ होने के कारण, इसे कुछ और होना चाहिए। मैं इसके चारों ओर के कोड को बाइसेक्ट करना शुरू करूंगा और यह पता लगाने की कोशिश करूंगा कि यह कहां चल रहा है। मेरा मतलब है, बस 'सुनिश्चित करें', मुझे लगता है कि आप कर सकते हैं ...

console.log($('#configform')[0]);

क्लिक फ़ंक्शन में और सुनिश्चित करें कि यह सही फ़ॉर्म को लक्षित कर रहा है ...

और अगर यह है, तो यह कुछ ऐसा है जो यहां सूचीबद्ध नहीं है।

भाग 2 को संपादित करें: एक चीज जिसे आप आज़मा सकते हैं (यदि वह इसे सही ढंग से लक्षित नहीं कर रहा है) " जो आप उपयोग कर रहे हैं उसके बजाय " इनपुट: रीसेट " का उपयोग करें ... यह भी, मैं सुझाव दूंगा क्योंकि यह लक्ष्य नहीं है जो गलत तरीके से पता लगाने के लिए काम कर रहा है। वास्तविक क्लिक लक्ष्यीकरण क्या है। बस फायरबग / डेवलपर टूल खोलें, जो आपके पास है, टॉस करें

console.log($('#configreset'))

और देखें कि क्या चबूतरे हैं। और फिर हम वहां से जा सकते हैं।

Comments

कोई परस्पर विरोधी ID :( मैं परत-दर-परत का चयन करने की कोशिश कर रहा हूं और

— जांचता हूं

हम्म क्लिक क्लिक काम की तरह लगता है! मैंने $('#ptest').html("clicked reset")क्लिक (फ़ंक्शन () {}) में जोड़ा ; जहां इसे "क्लिक किया हुआ रीसेट" दिखाना चाहिए, लेकिन यह प्रदर्शित नहीं हुआ

— yvonnezoe

मेरा यहाँ एक प्रश्न है। हर बार मैं कंसोल का उपयोग करता हूं। मुझे पता नहीं है कि इसके लिए कहां देखना है। मैं अजगर स्क्रिप्ट को चलाने के लिए अजगर आईडीएल और एक टर्मिनल का उपयोग कर रहा हूं। जावास्क्रिप्ट इसमें है। वैसे भी, जब मैं `अलर्ट ($ (# कॉन्फ़िगरेशन)) [0] का उपयोग करता हूं, तो यह मुझे [ऑब्जेक्ट HTMLFormElement] देता है

— yvonnezoe

चेतावनी का उपयोग करने का प्रयास करें (JSON.stringify ($ '# कॉन्फ़िगरेशन') [0]))। बहुत सुंदर मुद्रण वस्तुओं के लिए अलर्ट बहुत परवाह नहीं करता है (या आपको बता रहा है कि इसमें क्या है)। यह आपको केवल यह बताता है कि यह एक वस्तु है।

— FullOnFlatWhite

@DylanChensky jQuery का जादू है कि सब कुछ एक सेट (सरणी) है। जैसे कि आप jQuery में एक नियमित सरणी का उपयोग कर रहे थे [0], पहला तत्व चुनता है। लेकिन jQuery में, यह तत्व के वास्तविक HTML का चयन करता है। तो, [0]आपको html दे रहा है , जिससे आप html कह सकते हैं, jQuery नहीं, जिसे विधि कहा जाता है reset। अधिक जानकारी के लिए नीचे देखें @kevin का उत्तर।

— FullOnFlatWhite

Answer 3

यहाँ इस पोस्ट के अनुसार , jQuery की कोई reset()विधि नहीं है; लेकिन देशी जावास्क्रिप्ट करता है। इसलिए, jQuery तत्व को या तो प्रयोग करके जावास्क्रिप्ट ऑब्जेक्ट में बदलें:

$("#formId")[0].reset()
// or
$("#formId").get(0).reset()

Comments

यह काम करता है और मैं सहमत हूँ, jQuery में कोई रीसेट () विधि नहीं है। आप यह देख सकते हैं कि w3school doc पर मूल जावास्क्रिप्ट के साथ कैसे किया जाए: w3schools.com/jsref/met_form_reset.asp

— serfer2

मैं यह नोट करना चाहूंगा कि यह केवल फॉर्म को रीसेट करेगा , इसे स्पष्ट नहीं करेगा। यानी, अगर फॉर्म में अनुरोध के साथ मूल्य भेजे गए थे, तो उन्हें बहाल कर दिया जाएगा।

— रक्षा एक

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

— रामरतन गुप्ता

Answer 4

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

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

यदि आप इसे jQuery के माध्यम से करते हैं (जैसा कि यहां अन्य उत्तरों में देखा $('#configform')[0].reset()गया [0]है:), तो वही फॉर्म DOM तत्व प्राप्त कर रहा है जिसे आप सीधे प्राप्त करेंगे document.getElementById। उत्तरार्द्ध दृष्टिकोण अधिक कुशल और सरल दोनों है हालांकि (क्योंकि jQuery दृष्टिकोण के साथ आपको पहले एक संग्रह मिलता है और फिर इसमें से एक तत्व प्राप्त करना होता है, जबकि वेनिला जावास्क्रिप्ट के साथ आपको बस सीधे तत्व मिलता है)।

Answer 5

एक रीसेट बटन को किसी भी स्क्रिप्ट की आवश्यकता नहीं है (या नाम या आईडी):

<input type="reset">

और आपने कल लिया। लेकिन अगर आपको वास्तव में स्क्रिप्ट का उपयोग करना चाहिए , तो ध्यान दें कि हर फॉर्म कंट्रोल में एक फॉर्म प्रॉपर्टी होती है जो उस फॉर्म का संदर्भ देती है, जिससे आप ऐसा कर सकते हैं:

<input type="button" onclick="this.form.reset();">

लेकिन एक रीसेट बटन एक बेहतर विकल्प है।

Comments

यू का मतलब बस इतना है कि रेखा क्या करेगी? तो मेरे html सही से ऊपर है?

— yvonnezoe

"काम नहीं" को परिभाषित करें। आपको क्या त्रुटि मिल रही है? क्या काम नहीं कर रहा है? रीसेट बटन हमेशा के लिए HTML रूपों का एक हिस्सा रहा है, वे काम करते हैं।

— रात्रि

"काम नहीं कर रहा है" - यह कुछ भी रीसेट नहीं करता है, फॉर्म में कोई बदलाव नहीं देखा गया था।

— yvonnezoe

ध्यान देने योग्य बात यह है कि "रीसेट" का मतलब "मेरा फॉर्म क्लियर नहीं है" है। "रीसेट" के शब्दार्थ वास्तव में क्या करते हैं, सभी "फ़ॉर्म" तत्वों को उनके मूल "मान" विशेषताओं पर वापस कर देते हैं। कि कम से कम कुछ मिनट के लिए मुझे उलझन में!

— जोकुल्ल

@ jocull- जब अन्य सभी विफल हो जाते हैं, तो HTML मानक का हमेशा W3C या WHATWG संस्करण होता है। ;-)

— रॉबिन

Answer 6

मैं अंत में समस्या का समाधान करूँगा !! @RobG formटैग और tableटैग के बारे में सही था । टैग तालिका के बाहर रखा जाना चाहिए। उस के साथ,form

<td><input type="reset" id="configreset" value="Reset"></td>

jquery या कुछ और की आवश्यकता के बिना काम करता है। बटन पर साधारण क्लिक करें और टाडा ~ पूरा फॉर्म रीसेट है;) शानदार

Comments

आप आमतौर पर यह पुष्टि कर सकते हैं कि स्रोत कोड का निरीक्षण हो रहा है (पृष्ठ स्रोत को नहीं देख रहा है, क्योंकि यह दिखाएगा कि क्या उत्पन्न हुआ था, बल्कि डेवलपर टूल <kbd> F12 </ kbd>) जैसी किसी चीज़ का उपयोग कर रहा है, जो आपको दिखाता है "क्या ब्राउज़र देखता है "- किस मामले में यह आपको दिखाएगा (क्रोम में, कम से कम) कि formटैग tbodyको इनपुट तत्वों को छोड़कर, स्वचालित रूप से शुरुआत में बंद कर दिया गया था ।

— ड्रूज़

संगतता की जाँच करें: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset

— डिएगो अविला

Answer 7

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

//reset form 
$("#mybutton").click(function(){
    $("#myform").find('input:text, input:password, input:file, select, textarea').val('');
    $("#myform").find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
});

Comments

एल्ड्रिन के उत्तर पर समान टिप्पणी

— डैन डस्केलस्क्यू

Answer 8

Jquery फ़ंक्शन का उपयोग करके .closest (तत्व) और .find (...) ।

हो रही माता पिता तत्व और की तलाश में बच्चे ।

अंत में, फ़ंक्शन की आवश्यकता है।

$("#form").closest('form').find("input[type=text], textarea").val("");

Comments

हालांकि यह कोड ब्लॉक प्रश्न का उत्तर दे सकता है, आपको हमेशा ऐसा करने के लिए कुछ स्पष्टीकरण देना चाहिए।

— साशा वुल्फ

$("#form").find("input[type=text], textarea").val("");मैंने इस तरह से किया

— बीरा

Answer 9

पहली पंक्ति प्रपत्र इनपुट रीसेट करेगी

$('form#myform').trigger("reset"); //Line1
$('form#myform select').trigger("change"); //Line2

दूसरा वाला select2 रीसेट करेगा

वैकल्पिक: यदि आप अलग-अलग घटनाओं के साथ पंजीकृत हैं, तो आप इसे उपयोगकर्ता कर सकते हैं

$('form#myform select, form input[type=checkbox]').trigger("change"); //Line2

Answer 10

इस jQuery रीसेट फ़ंक्शन के साथ प्रपत्र फ़ील्ड का एक त्वरित रीसेट संभव है।

जब आपको सफलता की प्रतिक्रिया मिली तो कोड के नीचे आग।

$(selector)[0].reset();

Answer 11

आप बस एक इनपुट प्रकार जोड़ सकते हैं = इस तरह एक आईडी = रीसेटफॉर्म के साथ रीसेट करें

<html>
<form>
<input type = 'reset' id = 'resetform' value = 'reset'/>
<!--Other items in the form can be placed here-->
</form>
</html>

फिर jquery के साथ आप केवल .click () फ़ंक्शन पर id = resetform के साथ तत्व पर निम्नानुसार उपयोग करते हैं

<script> 
$('#resetform').click();
</script>

और फ़ॉर्म रीसेट करता है नोट: आप अपने सीएसएस का उपयोग करके रीसेट बटन को आईडी = रिसेटफॉर्म के साथ भी छिपा सकते हैं

<style>
#resetform
{
display:none;
}
</style>

Comments

इसे छिपाने के लिए ... इसे और अधिक आधुनिक रूप देने के लिए क्षमा न करें। <इनपुट प्रकार = 'रीसेट' आईडी = 'रीसेटफॉर्म' मूल्य = 'रीसेट' / शैली = 'प्रदर्शन: कोई नहीं? ’>

— आम

Answer 12

यहां जकुरी के साथ सरल समाधान है। यह विश्व स्तर पर काम करता है। कोड पर एक नजर है।

$('document').on("click", ".clear", function(){
   $(this).closest('form').trigger("reset");
})

हर रूप में एक स्पष्ट वर्ग को एक बटन में जोड़ें, जिसे आपको इसे रीसेट करने की आवश्यकता है। उदाहरण के लिए:

<button class="button clear" type="reset">Clear</button>

Answer 13

jQuery कीreset() विधि नहीं है ; लेकिन देशी जावास्क्रिप्ट करता है। इसलिए, jQuery तत्व को या तो उपयोग करके जावास्क्रिप्ट ऑब्जेक्ट में बदलें:

$("#formId")[0].reset();

$("#formId").get(0).reset();

हम बस जावास्क्रिप्ट कोड का उपयोग कर सकते हैं

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

Answer 14

<button type="reset">Reset</reset>

सबसे आसान तरीका मैं सोच सकता हूं कि यह मजबूत है। प्रपत्र टैग के भीतर रखें।

Answer 15

आप निम्नलिखित का उपयोग कर सकते हैं।

@using (Html.BeginForm("MyAction", "MyController", new { area = "MyArea" }, FormMethod.Post, new { @class = "" }))
{
<div class="col-md-6">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
        @Html.LabelFor(m => m.MyData, new { @class = "col-form-label" })
    </div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
        @Html.TextBoxFor(m => m.MyData, new { @class = "form-control" })
    </div>
</div>
<div class="col-md-6">
    <div class="">
        <button class="btn btn-primary" type="submit">Send</button>
        <button class="btn btn-danger" type="reset"> Clear</button>
    </div>
</div>
}

फिर फ़ॉर्म को साफ़ करें:

    $('.btn:reset').click(function (ev) {
        ev.preventDefault();
        $(this).closest('form').find("input").each(function(i, v) {
            $(this).val("");
        });
    });

Comments

लगता है यहाँ बहुत सारे फ्रेमवर्क-विशिष्ट कोड हैं। मैं SO पर प्रश्नों का उत्तर देते समय ऐसी चीजों से बचने की सलाह देता हूं, क्योंकि यह प्रश्न निर्दिष्ट नहीं करता है कि वे jQuery से अलग किसी भी ढांचे का उपयोग कर रहे थे

— Lazerbeak12345

Answer 16

आपका कोड काम करना चाहिए। सुनिश्चित करें कि static/jquery-1.9.1.min.jsमौजूद है। इसके अलावा, आप करने की कोशिश कर सकते हैं static/jquery.min.js। यदि वह समस्या को ठीक करता है तो आपने समस्या को इंगित किया है।

Comments

एकमात्र अन्य समस्या जो मैं सोच सकता हूं, वह यह है कि आपके पास उसी आईडी ( configform) के साथ एक और रूप है । आपको कंसोल का उपयोग करके कुछ जांच करनी चाहिए। पहले प्रयास करें $। यदि आप Chrome का उपयोग कर रहे हैं, $तो कंसोल में टाइपिंग एक संदर्भ-संवेदनशील सूची को सक्रिय करेगा यदि jQuery लोड किया गया है। यदि आप टाइप करते हैं $और रिटर्न दबाते हैं, तो यह एक फ़ंक्शन का मूल्यांकन करेगा यदि jQuery लोड किया गया है। अगला कोशिश $("#configform")। परिणाम पर राइट-क्लिक करें और चुनें Reveal in Elements panel।

— ic3b3rg

धन्यवाद :) लेकिन मेरे पास क्रोम नहीं है। क्या यह फायरबग का उपयोग करने के समान है? (मैंने इसे स्थापित किया है, लेकिन पहले कभी इसका इस्तेमाल नहीं किया है)

— yvonnezoe