फ़ॉर्म को सबमिट करने से कैसे रोका जाए?

Question

मेरे पास एक फॉर्म है जिसमें कहीं एक सबमिट बटन है।

हालाँकि, मैं किसी भी तरह से ईवेंट को प्रस्तुत करना चाहता हूँ और इसे होने से रोकता हूँ।

क्या कोई ऐसा तरीका है जिससे मैं यह कर सकता हूं?

मैं सबमिट बटन को संशोधित नहीं कर सकता, क्योंकि यह एक कस्टम नियंत्रण का हिस्सा है।

Comments

आप अभी भी सबमिट बटन तक पहुंच सकते हैं। पेज रेंडर करें और पेज सोर्स को देखकर उसके क्लायंट को पकड़ें। फिर, jQuery जैसे कुछ का उपयोग करके आप $ ('# ctl01_cph01_controlBtn1') कुछ कर सकते हैं।

— विद्रोही जूल

@ राफेल: सच ... लेकिन यह एक अंतिम उपाय होगा - यह एक बहुत ही जटिल नियंत्रण है।

— नाथन उस्मान

@ राफ कि asp.net आधारित है, और यह भी एक सबसे अच्छा अभ्यास नहीं है। लेकिन यह अनिवार्य रूप से सही है। मैं सिर्फ स्रोत पर झांकने और नियंत्रण नाम का उपयोग करने से बचता हूँ, क्योंकि यदि कोई पृष्ठ संपादित करता है तो यह बदल सकता है। अनपेक्षित दुष्प्रभाव और ऐसे।

Answer 1

अन्य उत्तरों के विपरीत, वापसी falseकेवल उत्तर का हिस्सा है। उस परिदृश्य पर विचार करें जिसमें एक जेएस त्रुटि रिटर्न स्टेटमेंट से पहले होती है ...

एचटीएमएल

<form onsubmit="return mySubmitFunction(event)">
  ...
</form>

लिपि

function mySubmitFunction()
{
  someBug()
  return false;
}

falseयहां लौटने पर निष्पादित नहीं किया जाएगा और फॉर्म को किसी भी तरह से सबमिट किया जाएगा। preventDefaultअजाक्स फॉर्म सबमिशन के लिए डिफ़ॉल्ट फॉर्म कार्रवाई को रोकने के लिए भी आपको कॉल करना चाहिए ।

function mySubmitFunction(e) {
  e.preventDefault();
  someBug();
  return false;
}

इस मामले में, बग के साथ भी फॉर्म सबमिट नहीं होगा!

वैकल्पिक रूप से, एक try...catchब्लॉक का उपयोग किया जा सकता है।

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}

Comments

falseसीधे क्यों नहीं लौटे onsumbit?

— प्रोफ।

हो सकता है कि आप ओनसुबमिट में उपयोगकर्ता को एक त्रुटि संदेश दिखाना चाहें। हमेशा उदाहरण, "इस अनिवार्य क्षेत्र को पूरा करें फिर सबमिट करें"। उस स्थिति में घटना। TheventventDefault बहुत काम आएगी

— मार्क चोरले

@ProfK अगर आप इवेंट का उपयोग करते हैं ।preventDefault () यह परवाह किए बिना मायने नहीं रखेगा, कोशिश / पकड़ सिर्फ आपकी त्रुटि से निपटने का हिस्सा होगा

— बेन रोवे

<फॉर्म ऑनसुबमिट = "रिटर्न मायसुमिटफंक्शन (घटना)"> काम किया ... को फ़ायरफ़ॉक्स में कोष्ठक में शब्द घटना का उपयोग करना था

— danday74

@BenRowe आपको evt पैरामीटर को विधि में जोड़ना चाहिए। (<form onsubmit="return mySubmitFunction(evt)">).अन्यथा यह अपरिभाषित त्रुटि देता है।

— उफुकसुरेन

Answer 2

आप इनलाइन इवेंट का उपयोग onsubmitइस तरह कर सकते हैं

<form onsubmit="alert('stop submit'); return false;" >

या

<script>
   function toSubmit(){
      alert('I will not submit');
      return false;
   }
</script>

<form onsubmit="return toSubmit();" >

डेमो

अब, बड़े प्रोजेक्ट बनाते समय यह एक अच्छा विचार नहीं हो सकता है। आपको इवेंट श्रोताओं का उपयोग करने की आवश्यकता हो सकती है।

कृपया के बारे में और अधिक पढ़ बनाम घटना श्रोता (addEventListener और IE attachEvent) इनलाइन घटनाक्रम यहाँ । क्योंकि मैं क्रिस बेकर से ज्यादा इसे समझा नहीं सकता ।

दोनों सही हैं, लेकिन उनमें से कोई भी प्रति "सर्वश्रेष्ठ" नहीं है, और एक कारण हो सकता है कि डेवलपर ने दोनों दृष्टिकोणों का उपयोग करने के लिए चुना।

Comments

सड़क पर जल्दी, अच्छा समाधान।

— फर्नांडो टॉरेस

किसी कारण से, <form onsubmit="return false;" >मेरे लिए काम नहीं करता है।

— रुआन

Answer 3

ईवेंट श्रोता को फ़ॉर्म का उपयोग करके संलग्न .addEventListener()करें और फिर .preventDefault()विधि को कॉल करें event:

const element = document.querySelector('form');
element.addEventListener('submit', event => {
  event.preventDefault();
  // actual logic, e.g. validate the form
  console.log('Form submission cancelled.');
});

<form>
  <button type="submit">Submit</button>
</form>

मुझे लगता है कि यह एक submitघटना हैंडलर इनलाइन को onsubmitविशेषता के साथ परिभाषित करने से बेहतर समाधान है क्योंकि यह वेबपेज लॉजिक और संरचना को अलग करता है। यह एक परियोजना को बनाए रखना बहुत आसान है जहां तर्क को HTML से अलग किया जाता है। देखें: विनीत जावास्क्रिप्ट ।

DOM ऑब्जेक्ट की .onsubmitसंपत्ति का उपयोग करना formएक अच्छा विचार नहीं है क्योंकि यह आपको कई सबमिट कॉलबैक को एक तत्व में संलग्न करने से रोकता है। AddEventListener बनाम onclick देखें ।

Comments

और jquery के लिए: $("button").click(function(e) { e.preventDefault() });

— Nixen85

+1 dunno क्यों अन्य सभी उत्तर इनलाइन ऑनसाइट का उपयोग करते रहते हैं, क्योंकि ओपी ने उल्लेख किया है कि वह बटन नहीं बदल सकता है (जिसका अर्थ है कि वह या तो फ़ॉर्म नहीं बदल सकता है)। आश्चर्य है कि अगर हमारे पास बटन आईडी है तो 'फॉर्म' प्राप्त करने का एक तरीका है

— रॉबर्ट सिंक्लेयर

Answer 4

इसको आजमाओ...

HTML कोड

<form class="submit">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="submit" name="Submit" value="submit"/>
</form>

jQuery कोड

$(function(){
    $('.submit').on('submit', function(event){
        event.preventDefault();
        alert("Form Submission stopped.");
    });
});

या

$(function(){
    $('.submit').on('submit', function(event){
       event.preventDefault();
       event.stopPropagation();
       alert("Form Submission prevented / stopped.");
    });
});

Comments

इस प्रश्न में कोई jQuery टैग नहीं है।

— माइकल पेरोलकोव्स्की

@ गोठडो और फिर भी समाधान अभी भी वही है। पागल है ना?

— केविन बी

@ गोथो ये, यह बिल्कुल वैसा ही है। eventObject.preventDefault। जिस तरह से आप हैंडलर को बांधते हैं वह समाधान नहीं बदलता है। मैं यह भी तर्क दूंगा कि आपका उत्तर स्वीकार किए गए से अलग नहीं है।

— केविन बी

stopPropagationकेवल एक चीज थी जो मेरे मामले में काम करती थी। धन्यवाद! :)

— क्रैगॉक्स

Answer 5

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

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

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

Comments

ऑन्सुबमिट = "वैलिडेटमीफ़ॉर्म () लौटें;" पर्याप्त है, लेकिन वैध है () सही या गलत लौटना चाहिए।

— एड्रियन पी।

Answer 6

var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  return false;
}

Comments

मुझे लगता है कि उपयोग .onsubmitकरना एक बुरा विचार है क्योंकि यह आपको कई submitकॉलबैक को एक तत्व में संलग्न करने से रोकता है। मैं उपयोग करने की सलाह देता हूं .addEventListener()।

— माइकल पेरोलकोव्स्की

भले ही आपने प्रॉपर्टी .onsubmit के माध्यम से ईवेंट हैंडलर सेट किया हो, फिर भी आप .addEventListener () के माध्यम से अतिरिक्त हैंडलर जोड़ सकते हैं। प्रॉपर्टी द्वारा पंजीकृत हैंडलर को पहले आमंत्रित किया जाएगा, जिसके बाद वे पंजीकृत किए गए थे।

— डैनियल ग्रेंजर

Answer 7

विनीत जावास्क्रिप्ट प्रोग्रामिंग सम्मेलनों का पालन करने के लिए , और इस बात पर निर्भर करता है कि डोम कितनी जल्दी लोड होगा, यह निम्नलिखित का उपयोग करने के लिए एक अच्छा विचार हो सकता है:

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

यदि आप एक पुस्तकालय का उपयोग कर रहे हैं तो ऑनलोड या डोम तैयार का उपयोग करके घटनाओं को तार करें।

$(function() {
    var $form = $('#my-form');
    $form.removeAttr('onsubmit');
    $form.submit(function(ev) {
        // quick validation example...
        $form.children('input[type="text"]').each(function(){
            if($(this).val().length == 0) {
                alert('You are missing a field');
                ev.preventDefault();
            }
        });
    });
});

label {
    display: block;
}

#my-form > input[type="text"] {
    background: cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form" action="http://google.com" method="GET" onsubmit="return false;">
    <label>Your first name</label>
    <input type="text" name="first-name"/>
    <label>Your last name</label>
    <input type="text" name="last-name" /> <br />
    <input type="submit" />
</form>

इसके अलावा, मैं हमेशा actionविशेषता का उपयोग करूंगा क्योंकि कुछ लोगों के पास कुछ प्लगइन हो सकते हैं जैसे कि NoScript चल रहा है जो तब सत्यापन को तोड़ देगा। यदि आप एक्शन विशेषता का उपयोग कर रहे हैं, तो बहुत कम से कम आपका उपयोगकर्ता बैकएंड सत्यापन के आधार पर सर्वर द्वारा पुनर्निर्देशित हो जाएगा। यदि आप कुछ का उपयोग कर रहे हैं window.location, तो दूसरी ओर, चीजें खराब होंगी।

Answer 8

सबमिशन से फॉर्म को रोकने के लिए आपको केवल यह करने की आवश्यकता है।

<form onsubmit="event.preventDefault()">
    .....
</form>

उपरोक्त कोड का उपयोग करके यह आपके फॉर्म सबमिशन को रोक देगा।

Answer 9

यहाँ मेरा जवाब है:

<form onsubmit="event.preventDefault();searchOrder(event);">
...
</form>
<script>
const searchOrder = e => {
    e.preventDefault();
    const name = e.target.name.value;
    renderSearching();

    return false;
}
</script>

मैं जोड़ने event.preventDefault();पर onsubmitहै और यह काम करता है।

Answer 10

आप घटना सूची को फॉर्म में जोड़ सकते हैं, preventDefault()और नीचे दिए गए फॉर्म डेटा को JSON में रूपांतरित कर सकते हैं :

const formToJSON = elements => [].reduce.call(elements, (data, element) => {
  data[element.name] = element.value;
  return data;

}, {});

const handleFormSubmit = event => {
    event.preventDefault();
    const data = formToJSON(form.elements);
    console.log(data);
  //  const odata = JSON.stringify(data, null, "  ");
  const jdata = JSON.stringify(data);
    console.log(jdata);

    (async () => {
      const rawResponse = await fetch('/', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: jdata
      });
      const content = await rawResponse.json();

      console.log(content);
    })();
};

const form = document.forms['myForm']; 
form.addEventListener('submit', handleFormSubmit);

<form id="myForm" action="/" method="post" accept-charset="utf-8">
    <label>Checkbox:
        <input type="checkbox" name="checkbox" value="on">
    </label><br /><br />

    <label>Number:
        <input name="number" type="number" value="123" />
    </label><br /><br />

    <label>Password:
        <input name="password" type="password" />
    </label>
    <br /><br />

    <label for="radio">Type:
        <label for="a">A
            <input type="radio" name="radio" id="a" value="a" />
        </label>
        <label for="b">B
            <input type="radio" name="radio" id="b" value="b" checked />
        </label>
        <label for="c">C
            <input type="radio" name="radio" id="c" value="c" />
        </label>
    </label>
    <br /><br />

    <label>Textarea:
        <textarea name="text_area" rows="10" cols="50">Write something here.</textarea>
    </label>
    <br /><br />

    <label>Select:
        <select name="select">
            <option value="a">Value A</option>
            <option value="b" selected>Value B</option>
            <option value="c">Value C</option>
        </select>
    </label>
    <br /><br />

    <label>Submit:
        <input type="submit" value="Login">
    </label>
    <br /><br />


</form>