फॉर्म सबमिट करने से रोकने के लिए जावास्क्रिप्ट कोड

Question

फ़ॉर्म सबमिशन को रोकने का एक तरीका यह है कि आप अपने जावास्क्रिप्ट फंक्शन से गलत लौटें।

जब सबमिट बटन पर क्लिक किया जाता है, तो एक सत्यापन कार्य कहा जाता है। मेरे पास फॉर्म सत्यापन में एक मामला है। अगर वह शर्त पूरी हो जाती है, तो मैं एक फ़ंक्शन का नाम देता हूं जिसका नाम रिटर्नट्रेपपेज () है;

function returnToPreviousPage() {
    window.history.back();
}

मैं जावास्क्रिप्ट और Dojo टूलकिट का उपयोग कर रहा हूं ।

पिछले पृष्ठ पर वापस जाने के बजाय, यह फ़ॉर्म सबमिट करता है। मैं इस सबमिशन को कैसे समाप्त कर सकता हूं और पिछले पृष्ठ पर वापस आ सकता हूं?

Comments

आरयू सुनिश्चित करें कि यह फ़ंक्शन कॉल कर रहा है ?? चेतावनी ('परीक्षण') डालने का प्रयास करें; window.history से पहले

— samirprogrammer

हाँ मैं निश्चित हूँ; कहा जा रहा है।

— मुहम्मद इमरान तारिक

फॉर्म को जमा करने

— टीजे

Answer 1

आप फ़ार्म सबमिट करने से रोकने के लिए फ़ंक्शन के रिटर्न मान का उपयोग कर सकते हैं

<form name="myForm" onsubmit="return validateMyForm();"> 

और कार्य की तरह

<script type="text/javascript">
function validateMyForm()
{
  if(check if your conditions are not satisfying)
  { 
    alert("validation failed false");
    returnToPreviousPage();
    return false;
  }

  alert("validations passed");
  return true;
}
</script>

Chrome 27.0.1453.116 मीटर के मामले में यदि उपरोक्त कोड काम नहीं करता है, तो कृपया इसे काम पर लाने के लिए ईवेंट हैंडलर के पैरामीटर्स के रिटर्नवैल्यू क्षेत्र को गलत पर सेट करें ।

जानकारी साझा करने के लिए धन्यवाद सैम।

संपादित करें:

विक्रम को धन्यवाद देता हूं कि अगर मान्यमार्टफॉर्म () झूठा निकला तो उसके वर्कअराउंड के लिए:

 <form onsubmit="event.preventDefault(); validateMyForm();">

जहाँ validateMyForm () एक फ़ंक्शन है जो सत्यापन विफल होने पर वापस लौटता है। नाम बिंदु का उपयोग करने के लिए महत्वपूर्ण बिंदु है। हम egepreventDefault () के लिए उपयोग नहीं कर सकते

Comments

बस एक अनुमान: यह क्रोम के नवीनतम संस्करण में मेरे लिए काम नहीं करता है।

— सैम

जो भी रिटर्न देता falseहै उसका कोई असर नहीं दिखता; Chrome अभी भी फ़ॉर्म सबमिट करता है। उदाहरण के लिए, onsubmit="return false;"। हालाँकि, मेरे लिए काम करने के लिए इवेंट हैंडलर के पैरामीटर्स returnValueफ़ील्ड सेट करना false।

— सैम

हाय सैम / हेमंत, क्या आप कोड नमूना प्रदान कर सकते हैं कि कैसे ईवेंट हैंडलर के पैरामीटर के रिटर्नवैल्यू फ़ील्ड को झूठी कृपया सेट करें।

— जैकडेव

मुझे लगता है कि चूंकि यह स्वीकृत उत्तर है, इसलिए इसे यह बताना चाहिए कि इसे ठीक से कैसे किया जाए। मैं जैकडेव के साथ सोच रहा हूं कि इसे ठीक से काम करने के लिए कैसे प्राप्त किया जाए। जैसा कि, यह काम नहीं करता है

— क्रंचर

यदि validateMyForm()त्रुटियां हैं, return falseतो नहीं पहुंचेंगे। तो यह विफल हो सकता है। कई घंटों के बाद, मुझे एक समाधान मिला जो काम करता है और इसे नीचे पोस्ट किया है।

— विक्रम पुड़ी

Answer 2

डिफ़ॉल्ट का उपयोग करें

दोजो टूलकिट

dojo.connect(form, "onsubmit", function(evt) {
    evt.preventDefault();
    window.history.back();
});

jQuery

$('#form').submit(function (evt) {
    evt.preventDefault();
    window.history.back();
});

वेनिला जावास्क्रिप्ट

if (element.addEventListener) {
    element.addEventListener("submit", function(evt) {
        evt.preventDefault();
        window.history.back();
    }, true);
}
else {
    element.attachEvent('onsubmit', function(evt){
        evt.preventDefault();
        window.history.back();
    });
}

Comments

मैं कई कारणों से झूठी वापसी के लिए event.preventDefault () की सिफारिश करूंगा, यह शीर्ष उत्तर होना चाहिए: blog.nmsdvid.com/…

— acidjazz

अच्छा उत्तर। चुने हुए से बेहतर है।

— एनी मेनन

अच्छा है, लेकिन ओपी चाहता है कि आप कहां सत्यापन करेंगे?

— सहंद

@acidjazz लेकिन डिफ़ॉल्ट को रोकने के बाद फॉर्म डेटा तक कोई कैसे पहुंचता है?

— CodeAt30

@Sahand @ codeat30 आप इस कार्यक्रम तक पहुँच सकते हैं target।

— एड्रिन

Answer 3

निम्नलिखित अब (क्रोम और फ़ायरफ़ॉक्स में परीक्षण) के रूप में काम करता है:

<form onsubmit="event.preventDefault(); validateMyForm();">

जहाँ validateMyForm () एक फ़ंक्शन है जो falseसत्यापन विफल होने पर वापस लौटता है। नाम का उपयोग करने के लिए महत्वपूर्ण बिंदु है event। हम उदाहरण के लिए उपयोग नहीं कर सकते e.preventDefault()।

Answer 4

बस buttonसबमिट बटन के बजाय एक साधारण का उपयोग करें। और फ़ॉर्म सबमिट करने के लिए जावास्क्रिप्ट फ़ंक्शन को कॉल करें:

<input type="button" name="submit" value="submit" onclick="submit_form();"/>

एक scriptटैग के भीतर कार्य :

function submit_form() {
    if (conditions) {
        document.forms['myform'].submit();
    }
    else {
        returnToPreviousPage();
    }
}

आप भी आजमा सकते हैं window.history.forward(-1);

Comments

मुझे यह दृष्टिकोण पसंद है क्योंकि यह मेरे उपयोग के मामले, कॉलबैक की अनुमति देता है।

— एडी

यह फॉर्म सबमिट करने के लिए एंटर की का उपयोग करने से रोकता है। साथ ही, नई HTML5 विशेषताएँ जैसे requiredकाम नहीं करेंगी।

— सैम

Answer 5

एक आसान काम करने के लिए बहुत सारे कठिन तरीके:

<form name="foo" onsubmit="return false">

Comments

यह सटीक उत्तर (ठीक है, सटीक नहीं है, क्योंकि आपका एक अर्ध-पेटी गायब है) 8 महीने पहले प्रस्तुत किया गया था, और अच्छे कारण के लिए नकारात्मक वोट हैं। यह ज्यादातर समय काम करता है । लेकिन सभी ब्राउज़रों पर सभी समय का।

— शुभ अंक

मैंने यह नहीं कहा कि आपको अर्धविराम की आवश्यकता है; मैंने बताया कि वह सब जो आपके उत्तर के बीच अलग था और बहुत पुराना था। तथ्य यह है कि आप अब मुझे यह बताने के लिए कह रहे हैं कि कौन से ब्राउज़र इसका समर्थन नहीं करते हैं (मैंने कभी नहीं कहा था कि, मैंने केवल बताया कि यह हमेशा काम नहीं करेगा), यह साबित करता है कि आपने अभी भी इस पूरे पृष्ठ को नहीं पढ़ा है ।

— शुभांक

मैं आमतौर पर डाउन-वोट की जांच नहीं करता, सिवाय इसके कि मुझे नहीं पता था कि लोग डाउन-वोटिंग सही कोड थे। तकनीकी रूप से, अर्धविराम बाहरी है, इसलिए यह गलत है। और आपने कहा "तुम्हारा मिज़ाज़ याद आ रहा है" जिसका अर्थ है कि यह आवश्यक है, जो गलत है। आप कहते हैं कि यह "हमेशा काम नहीं करेगा" लेकिन आप एक भी मामले या ब्राउज़र को इंगित नहीं कर सकते हैं जहां यह काम नहीं करेगा? यह ध्वनि तर्क है? यह सही कोड है। इसलिए जब तक आप उस मामले को इंगित नहीं कर सकते जहां यह काम नहीं करेगा, तो आपके पास एक बिंदु नहीं है।

— Danial

यह कैसे अधिक upvotes नहीं है? यह अन्य उदाहरणों की तुलना में कहीं अधिक प्रचलित है।

— साल अल्तुरिगी

शायद इसलिए कि शीर्षक से मेल नहीं खाता है जो वास्तव में आदमी पूछ रहा था।

— दानियाल

Answer 6

आपके सभी उत्तरों ने काम करने के लिए कुछ दिया।

अंत में, यह मेरे लिए काम किया: (यदि आप कम से कम एक चेकबॉक्स आइटम नहीं चुनते हैं, तो यह चेतावनी देता है और उसी पृष्ठ पर रहता है)

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form name="helloForm" action="HelloWorld" method="GET"  onsubmit="valthisform();">
            <br>
            <br><b> MY LIKES </b>
            <br>
            First Name: <input type="text" name="first_name" required>
            <br />
            Last Name: <input type="text" name="last_name"  required />
            <br>
            <input type="radio" name="modifyValues" value="uppercase" required="required">Convert to uppercase <br>
            <input type="radio" name="modifyValues" value="lowercase" required="required">Convert to lowercase <br>
            <input type="radio" name="modifyValues" value="asis"      required="required" checked="checked">Do not convert <br>
            <br>
            <input type="checkbox" name="c1" value="maths"     /> Maths
            <input type="checkbox" name="c1" value="physics"   /> Physics
            <input type="checkbox" name="c1" value="chemistry" /> Chemistry
            <br>

            <button onclick="submit">Submit</button>

            <!-- input type="submit" value="submit" / -->
            <script>
                <!---
                function valthisform() {
                    var checkboxs=document.getElementsByName("c1");
                    var okay=false;
                    for(var i=0,l=checkboxs.length;i<l;i++) {
                        if(checkboxs[i].checked) {
                            okay=true;
                            break;
                        }
                    }
                    if (!okay) { 
                        alert("Please check a checkbox");
                        event.preventDefault();
                    } else {
                    }
                }
                -->
            </script>
        </form>
    </body>
</html>

Comments

मेरे लिए भी काम किया।

— चेतन जूल

Answer 7

@ विक्रम पुडी उत्तर के आधार पर, हम शुद्ध जावास्क्रिप्ट के साथ भी ऐसा कर सकते हैं

<form onsubmit="submitForm(event)">
    <input type="text">
    <input type="submit">
</form>

<script type="text/javascript">

    function submitForm(event){
        event.preventDefault();


    }
</script>

Answer 8

मैं onsubmitस्क्रिप्ट में किसी घटना को शामिल न करने और उपयोग न करने की सलाह दूंगा।

var submit = document.getElementById("submitButtonId");
if (submit.addEventListener) {
  submit.addEventListener("click", returnToPreviousPage);
} else {
  submit.attachEvent("onclick", returnToPreviousPage);
}

फिर preventDefault()(या returnValue = falseपुराने ब्राउज़रों के लिए) का उपयोग करें।

function returnToPreviousPage (e) {
  e = e || window.event;
  // validation code

  // if invalid
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}

Comments

क्या आप बता सकते हैं कि आप इसका उपयोग क्यों नहीं करेंगे onsubmit?

— theFreedomBanana

शायद यह सिर्फ वरीयता है, लेकिन मुझे वेब पेज की कार्यक्षमता को समझना आसान लगता है अगर सभी ईवेंट श्रोताओं को विशेषताओं का उपयोग JSकरने के बजाय संलग्न किया जाता है HTML। इस तरह से आपको किसी और के कोड को पढ़ते समय आगे और पीछे कूदने की ज़रूरत नहीं है

— इसहाक अब्रामोवित्ज़

क्या होगा यदि कोई व्यक्ति बटन क्लिक करने के बजाय किसी एक इनपुट पर प्रवेश करता है? सामान्य ii अभी भी प्रविष्टियों पर में ...

— bluejayke

Answer 9

कहते हैं कि आपके पास इसका एक रूप है

<form action="membersDeleteAllData.html" method="post">
    <button type="submit" id="btnLoad" onclick="confirmAction(event);">ERASE ALL DATA</button>
</form>

यहाँ पुष्टिकरण फ़ंक्शन के लिए जावास्क्रिप्ट है

<script type="text/javascript">
    function confirmAction(e)
    {
        var confirmation = confirm("Are you sure about this ?") ;

        if (!confirmation)
        {
            e.preventDefault() ;
            returnToPreviousPage();
        }

        return confirmation ;
    }
</script>

यह एक फ़ायरफ़ॉक्स, क्रोम, इंटरनेट एक्सप्लोरर (एज), सफारी, आदि पर काम करता है।

अगर ऐसा नहीं है तो मुझे बताएं

Comments

के संयोजन preventDefault()और returnToPreviousPage()सही और सुरुचिपूर्ण है। यह सामान्य ऑपरेशन को बाधित करता है जैसे आप काम करने के लिए कोई अपवाद पकड़ने वाला डिज़ाइन करेंगे। +1।

— 1934286

Answer 10

हेमंत और विक्रम के जवाब क्रोम में एकमुश्त काम नहीं करते थे। ईवेंट .preventDefault (); स्क्रिप्ट ने पृष्ठ को सबमिट करने या सत्यापन को विफल करने से रोकने से रोका। इसके बजाय, मुझे event.preventDefault () स्थानांतरित करना पड़ा; यदि निम्न कथन में है:

    if(check if your conditions are not satisfying) 
    { 
    event.preventDefault();
    alert("validation failed false");
    returnToPreviousPage();
    return false;
    }
    alert("validations passed");
    return true;
    }

मुझे सही रास्ते पर लाने के लिए हेमंत और विक्रम का शुक्रिया।

Comments

मेरे लिए भी काम किया। धन्यवाद।

— ivbtar 17

Answer 11

उदाहरण के लिए, यदि आपके पास फ़ॉर्म पर बटन है, तो इसके प्रचार को रोकने के लिए इन्वर्टर केवल ईवेंट लिखें ।preventDefault (); फ़ंक्शन में जिसे सबमिट बटन या एंटर बटन पर क्लिक करने पर बुलाया जाता है।

Answer 12

बस करो ...।

<form>
<!-- Your Input Elements -->
</form>

और यहाँ आपका JQuery जाता है

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    //your code goes here
    //100% works
    return;
});

Comments

क्या तुम यहाँ jquery का उपयोग करते हो?

— सेल्वा गणपति