जावास्क्रिप्ट में एक फ़ॉर्म सबमिट करें और सामान्य सबमिशन को रोकें

Question 1

जावास्क्रिप्ट का उपयोग करके फ़ॉर्म सबमिट करने के तरीके के बारे में बहुत सारी जानकारी प्रतीत होती है, लेकिन जब कोई फ़ॉर्म सबमिट किया गया है, तो उसे कैप्चर करने के लिए मैं एक समाधान ढूंढ रहा हूँ और इसे जावास्क्रिप्ट में इंटरसेप्ट करता हूँ।

एचटीएमएल

<form>
 <input type="text" name="in" value="some data" />
 <button type="submit">Go</button>
</form>

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

function captureForm() {
 // do some stuff with the values in the form
 // stop form from being submitted
}

एक त्वरित हैक बटन पर एक ऑनक्लिक फ़ंक्शन जोड़ने के लिए होगा, लेकिन मुझे यह समाधान पसंद नहीं है ... एक फॉर्म सबमिट करने के कई तरीके हैं ... जैसे इनपुट पर रिटर्न दबाते हुए, जिसके लिए यह खाता नहीं है।

स्व-परीक्षा

Question 2

<form id="my-form">
    <input type="text" name="in" value="some data" />
    <button type="submit">Go</button>
</form>

जेएस में:

function processForm(e) {
    if (e.preventDefault) e.preventDefault();

    /* do what you want with the form */

    // You must return false to prevent the default form behavior
    return false;
}

var form = document.getElementById('my-form');
if (form.attachEvent) {
    form.attachEvent("submit", processForm);
} else {
    form.addEventListener("submit", processForm);
}

संपादित करें : मेरी राय में, यह दृष्टिकोण onSubmitफॉर्म पर विशेषता स्थापित करने से बेहतर है क्योंकि यह मार्क-अप और कार्यक्षमता को अलग करता है। लेकिन वह सिर्फ मेरे दो सेंट है।

Edit2 : मेरे उदाहरण को शामिल करने के लिए अपडेट किया गयाpreventDefault()

Question 3

आपके द्वारा लोड किए गए तत्वों को संलग्न करने से पहले आप घटनाओं को संलग्न नहीं कर सकते

यह काम -

सादा जेएस

डेमो

EventListener का उपयोग करने के लिए अनुशंसित

// Should only be triggered on first page load
console.log('ho');

window.addEventListener("load", function() {
  document.getElementById('my-form').addEventListener("submit", function(e) {
    e.preventDefault(); // before the code
    /* do what you want with the form */

    // Should be triggered on form submit
    console.log('hi');
  })
});

<form id="my-form">
  <input type="text" name="in" value="some data" />
  <button type="submit">Go</button>
</form>

स्निपेट का विस्तार करें

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

// Should only be triggered on first page load
console.log('ho');

window.onload = function() {
  document.getElementById('my-form').onsubmit = function() {
    /* do what you want with the form */

    // Should be triggered on form submit
    console.log('hi');
    // You must return false to prevent the default form behavior
    return false;
  }
}

    <form id="my-form">
      <input type="text" name="in" value="some data" />
      <button type="submit">Go</button>
    </form>

स्निपेट का विस्तार करें

jQuery

// Should only be triggered on first page load
console.log('ho');

$(function() {
  $('#my-form').on("submit", function(e) {
    e.preventDefault(); // cancel the actual submit

    /* do what you want with the form */

    // Should be triggered on form submit

    console.log('hi');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
  <input type="text" name="in" value="some data" />
  <button type="submit">Go</button>
</form>

स्निपेट का विस्तार करें

Question 4

<form onSubmit="return captureForm()"> वह करना चाहिए। सुनिश्चित करें कि आपकी captureForm()विधि वापस आती है false।

Question 5

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

उदाहरण में, मैंने पृष्ठ पर किसी भी रूप में इसके जमा होने पर छिपे हुए क्षेत्र को सेट किया, भले ही यह पृष्ठ लोड से पहले हो।

//Handles jquery, dojo, etc. ajax requests
(function (send) {
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    XMLHttpRequest.prototype.send = function (data) {
        if (isNotEmptyString(token) && isNotEmptyString(header)) {
            this.setRequestHeader(header, token);
        }
        send.call(this, data);
    };
})(XMLHttpRequest.prototype.send);


//Handles javascript submit
(function (submit) {
    HTMLFormElement.prototype.submit = function (data) {
        var token = $("meta[name='_csrf']").attr("content");
        var paramName = $("meta[name='_csrf_parameterName']").attr("content");
        $('<input>').attr({
            type: 'hidden',
            name: paramName,
            value: token
        }).appendTo(this);

        submit.call(this, data);
    };
})(HTMLFormElement.prototype.submit);


//Handles html submit
document.body.addEventListener('submit', function (event) {
    var token = $("meta[name='_csrf']").attr("content");
    var paramName = $("meta[name='_csrf_parameterName']").attr("content");
    $('<input>').attr({
        type: 'hidden',
        name: paramName,
        value: token
    }).appendTo(event.target);
}, false);

Question 6

@Kristian Antonsen के उत्तर का उपयोग करें, या आप उपयोग कर सकते हैं:

$('button').click(function() {
    preventDefault();
    captureForm();
});