पेज के रिफ्रेश को रोकने के लिए जब फॉर्म के अंदर बटन क्लिक किया जाता है

Question

फॉर्म के अंदर बटन का उपयोग करते समय मेरे पास एक मुद्दा है। मैं उस बटन को फ़ंक्शन को कॉल करना चाहता हूं। यह करता है, लेकिन अवांछित परिणाम के साथ यह पृष्ठ को ताज़ा करता है।

मेरा सिंपल कोड ऐसे ही जाता है

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

बटन पर क्लिक करने पर, फ़ंक्शन को पेज रिफ्रेश्ड के साथ बुलाया जाता है, जो मेरे पिछले सभी अनुरोधों को रीसेट करता है जो वर्तमान पृष्ठ को प्रभावित करता है जो पिछले अनुरोध का परिणाम था।

पृष्ठ को ताज़ा करने से रोकने के लिए मुझे क्या करना चाहिए?

Comments

आपको मापदंडों को निर्दिष्ट करना होगा, यदि आप सरल उपयोग करते हैं window.location = window.location.href; यह पूरे पृष्ठ को ताज़ा कर देगा और यह आपके सभी पिछले अनुरोधों को फिर से सेट कर देगा। कृपया इसे देखें: stackoverflow.com/questions/133925/…

— linguini

मैं एक HTML बटन कैसे बना सकता हूँ के

— एलेक्स एंगस

@ बंकडेथ: सेक जवाब स्वीकार किया जाना चाहिए।

— जद चहाइन

@ जैदाचिन क्षमा करें, मुझे महसूस नहीं हुआ कि मैंने उत्तर स्वीकार नहीं किया है, इस ओर इशारा करने के लिए धन्यवाद। मैं एक शुरुआती था और मुझे नहीं पता था कि मैंने क्या किया या फिर वापस नहीं किया। लेकिन मैं आपके द्वारा दिए गए उत्तर को स्वीकार नहीं करूंगा, बल्कि मैं उस समय को स्वीकार करने में मदद करूंगा, जो :)

— bunkdeath

Answer 1

getData()झूठे को लौटा दो । इसे ठीक कर देंगे।

<form method="POST">
    <button name="data" onclick="return getData()">Click</button>
</form>

Comments

वास्तव में। onclickसमारोह झूठी वापस जाने के लिए, नहीं है getData।

— क्वेंटिन

यही मैं उल्लेख करता हूं, लेकिन ठीक है, उत्तर को संशोधित किया ताकि यह अधिक स्पष्ट हो।

— JNDPNT

आपको फ़ंक्शन को बदलने की आवश्यकता नहीं है - आप बस onclick = "getData () का उपयोग कर सकते हैं; गलत लौटें;"

type="button"वास्तव में पकड़ है।

— गहरा

Answer 2

type="button"बटन में जोड़ें ।

<button name="data" type="button" onclick="getData()">Click</button>

typeएक बटन के लिए डिफ़ॉल्ट मान है submit, जो स्वयं आपके मामले में प्रपत्र पोस्ट करता है और इसे ताज़ा जैसा दिखता है।

Comments

यहाँ दिया गया सही उत्तर

— टिम्बरलेक

इसके अलावा एचटीएमएल 5 फॉर्म सत्यापन (जैसे कि टाइप = "ईमेल" के इनपुट के लिए) को रोकता है।

— 2540625

आप return false;onclick="getData(); return false;"

— ऑन्कलिक में

यह सबसे अच्छा विकल्प है। हालांकि "वापसी झूठी" काम कर सकता है इनलाइन ऐसा कोई विकल्प नहीं है, जो मुझे पता है, जब घटना श्रोताओं को जोड़ते हैं। प्रकार = "बटन" निर्दिष्ट करना वास्तव में दिन बचाता है।

— फॉरएवर नोब

यह वास्तव में इस तरह की समस्या का "आधिकारिक" समाधान है। गलत MIGHT लौटना भी काम करता है, लेकिन टाइप बटन कभी भी विफल नहीं होगा।

— छात्र ०४

Answer 3

आपको बस एक प्रकार का टैग लगाना है और टाइप बटन बनाना है।

<button id="btnId" type="button">Hide/Show</button>

इस मुद्दे को हल करती है

Comments

क्या आप विस्तृत और समझा सकते हैं कि क्यों?

— mjk

बटन का डिफ़ॉल्ट व्यवहार एक प्रकार का होता है, जब एक फॉर्म के अंदर होता है, इसे बटन प्रकार में बदलने पर, पोस्ट से बचा जा सकता है

— गणेश कोडिगंती

Answer 4

समस्या यह है कि यह फ़ॉर्म सबमिशन को ट्रिगर करता है। यदि आप getDataफ़ंक्शन बनाते हैंreturn false तो उसे फ़ॉर्म सबमिट करने से रोकना चाहिए।

वैकल्पिक रूप से, आप preventDefaultईवेंट ऑब्जेक्ट की विधि का उपयोग भी कर सकते हैं :

function getData(e) {
    e.preventDefault();
}

Comments

क्लिक इवेंट जो पास हो जाएगा।

— JNDPNT

सिवाय इसके कि (और संशोधनों के बिना) ईवेंट ऑब्जेक्ट पास नहीं किया जाएगा।

— क्वेंटिन

<बटन का नाम = "डेटा" onclick = "getData ($ घटना)"> क्लिक करें </ बटन>

— RoboMex

Answer 5

एचटीएमएल

<form onsubmit="return false;" id="myForm">
</form>

jQuery

$('#myForm').submit(function() {
    doSomething();
});

Comments

$ ('। myForm) $ होना चाहिए (' # myForm)

— उत्परिवर्ती

Answer 6

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

बटन टैग का उपयोग करने के बजाय, इनपुट टैग का उपयोग करें। ऐशे ही,

<form method="POST">
    <input type = "button" name="data" onclick="getData()" value="Click">
</form>

Comments

लेकिन इसने बटन नहीं बनायाbutton type='button'

— परदीप जैन

Answer 7

यदि आपका बटन डिफॉल्ट "बटन" है, तो सुनिश्चित करें कि आप एक्सप्लिसिटी को टाइप एट्रिब्यूट सेट करते हैं, अन्यथा WebForm इसे डिफॉल्ट रूप से सबमिट माना जाएगा।

अगर आप js का उपयोग करते हैं तो इस तरह करें

<form method="POST">
   <button name="data"  type="button" id="btnData" onclick="getData()">Click</button>
</form> 

**If you use jquery use like this**


<form method="POST">
   <button name="data"  type="button" id="btnData">Click</button>
</form>




$('#btnData').click(function(e){
   e.preventDefault();
   // Code goes here
getData(); // your onclick function call here

});

Answer 8

बटन को स्वयं अक्षम करने के लिए एक जावास्क्रिप्ट विधि

document.getElementById("ID NAME").disabled = true;

एक बार सभी फ़ॉर्म फ़ील्ड्स ने आपके मानदंड को पूरा कर लिया है, तो आप बटन को फिर से सक्षम कर सकते हैं

Jquery का उपयोग कुछ इस तरह होगा

$( "#ID NAME" ).prop( "disabled", true);

Answer 9

फ़ायरफ़ॉक्स में किसी भी कारण से भले ही मेरे पास है return false;और myform.preventDefault();फ़ंक्शन में, यह फ़ंक्शन चलने के बाद पृष्ठ को ताज़ा करता है। और मुझे नहीं पता कि यह एक अच्छा अभ्यास है, लेकिन यह मेरे लिए काम करता है, मैं javascript:this.preventDefault();एक्शन विशेषता में सम्मिलित करता हूं ।

जैसा कि मैंने कहा, मैं सभी अन्य सुझावों की कोशिश की और वे सभी ब्राउज़रों में ठीक काम करते हैं लेकिन फ़ायरफ़ॉक्स, यदि आप एक ही मुद्दा है, कार्रवाई विशेषता या तो में घटना को रोकने के जोड़ने का प्रयास करें javascript:return false;या javascript:this.preventDefault();। ऐसा प्रयास न करें javascript:void(0);जिससे आपका कोड टूट जाए। मुझे मत पूछो क्यों :-)।

मुझे नहीं लगता कि ऐसा करने का यह एक सुंदर तरीका है, लेकिन मेरे मामले में मेरे पास कोई और विकल्प नहीं था।

अपडेट करें:

यदि आपको कोई त्रुटि मिली ... ajax के संसाधित होने के बाद, तो विशेषता कार्रवाई को हटा दें और onsubmitविशेषता में, अपने कार्य को निष्पादित करें और उसके बाद झूठी कार्रवाई करें:

onsubmit="functionToRun(); return false;"

मुझे नहीं पता कि फ़ायरफ़ॉक्स से यह सब क्यों परेशान है, लेकिन उम्मीद है कि यह काम करेगा।

Answer 10

सभी मामलों में रिटर्न फंक्शन काम नहीं कर रहा है। मैंने यह कोशिश की:

<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>

यह मेरे लिए काम नहीं किया।

मैंने फंक्शन के अंदर गलत वापसी की कोशिश की और यह मेरे लिए काम कर गया।

function Reset()
{
    .
    .
    .
    return false;
}

Answer 11

मैं उसी समस्या का सामना कर रहा था। समस्या onclickफ़ंक्शन के साथ है । फ़ंक्शन के साथ कोई समस्या नहीं होनी चाहिए getData। इसने onclickफंक्शन रिटर्न को झूठा बनाकर काम किया ।

<form method="POST">
    <button name="data" onclick="getData(); return false">Click</button>
</form>

Answer 12

यह सबसे अच्छा समाधान है:

<form  method="post"> 
    <button  type="button" name="data" onclick="getData()">Click Me</button>
</form>

नोट: मेरा कोड बहुत सरल है।

Answer 13

आप इस समस्या को हल करने के लिए ajax और jquery का उपयोग कर सकते हैं:

<script>
    function getData() {
        $.ajax({
            url : "/urlpattern",
            type : "post",
            success : function(data) {
                alert("success");
            } 
        });
    }
</script>
<form method="POST">
    <button name="data" type="button" onclick="getData()">Click</button>
</form>

Comments

यह उत्तर अत्यधिक जटिल है, अकेले ओपी के मुद्दे को रोकने के लिए एक बाहरी पुस्तकालय की आवश्यकता है जहां अन्य, सरल, विधियों का उपयोग किया जा सकता है।

— ज़क