बिना पुनर्निर्देशन के HTML फॉर्म कैसे जमा करें

Question 1

अगर मेरे पास ऐसा कोई फॉर्म है,

<form action="/Car/Edit/17" id="myForm" method="post" name="myForm"> ... </form>

मैं इसे जावास्क्रिप्ट / jQuery द्वारा किसी अन्य दृश्य पर पुनर्निर्देशित किए बिना कैसे सबमिट कर सकता हूं?

मैंने स्टैक ओवरफ्लो से बहुत सारे उत्तर पढ़े, लेकिन उनमें से सभी ने मुझे POST फ़ंक्शन द्वारा दिए गए दृश्य पर पुनर्निर्देशित किया।

Question 2

आप जो चाहते हैं उसे प्राप्त करने के लिए, आपको नीचे दिए गए jQuery Ajax का उपयोग करना होगा :

$('#myForm').submit(function(e){
    e.preventDefault();
    $.ajax({
        url: '/Car/Edit/17/',
        type: 'post',
        data:$('#myForm').serialize(),
        success:function(){
            // Whatever you want to do after the form is successfully submitted
        }
    });
});

यह भी एक कोशिश:

function SubForm(e){
    e.preventDefault();
    var url = $(this).closest('form').attr('action'),
    data = $(this).closest('form').serialize();
    $.ajax({
        url: url,
        type: 'post',
        data: data,
        success: function(){
           // Whatever you want to do after the form is successfully submitted
       }
   });
}

अंतिम समाधान

यह त्रुटिपूर्ण काम किया। मैं इस फ़ंक्शन को कॉल करता हूंHtml.ActionLink(...)

function SubForm (){
    $.ajax({
        url: '/Person/Edit/@Model.Id/',
        type: 'post',
        data: $('#myForm').serialize(),
        success: function(){
            alert("worked");
        }
    });
}

Question 3

आप actionकिसी अदृश्य के लिए प्रपत्र को पुनर्निर्देशित करके प्राप्त कर सकते हैं <iframe>। इसके लिए किसी जावास्क्रिप्ट या किसी अन्य प्रकार की स्क्रिप्ट की आवश्यकता नहीं है।

<iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>

<form action="submitscript.php" target="dummyframe">
    <!-- Form body here -->
</form>

Question 4

iFrameअपने पृष्ठ के निचले भाग में और targetअपने रूप में छिपा हुआ रखें :

<iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>

<form action="/Car/Edit/17" id="myForm" method="post" name="myForm" target="hiddenFrame"> ... </form>

जल्द और आसान। ध्यान रखें कि जबकिtarget विशेषता अभी भी व्यापक रूप से समर्थित है (और HTML5 में समर्थित है), इसे HTML 4.01 में पदावनत किया गया था।

तो आप वास्तव में भविष्य के सबूत के लिए अजाक्स का उपयोग करना चाहिए।

Question 5

चूँकि सभी वर्तमान उत्तर में jQuery या ट्रिक्स का उपयोग iframe के साथ किया गया है, यह पता लगाया गया है कि केवल सादे जावास्क्रिप्ट के साथ विधि जोड़ने का कोई नुकसान नहीं है:

function formSubmit(event) {
  var url = "/post/url/here";
  var request = new XMLHttpRequest();
  request.open('POST', url, true);
  request.onload = function() { // request successful
  // we can use server response to our request now
    console.log(request.responseText);
  };

  request.onerror = function() {
    // request failed
  };

  request.send(new FormData(event.target)); // create FormData from form that triggered event
  event.preventDefault();
}

// and you can attach form submit event like this for example
function attachFormSubmitEvent(formId){
  document.getElementById(formId).addEventListener("submit", formSubmit);
}

Question 6

ठीक है, मैं आपको इसे करने का एक जादुई तरीका बताने जा रहा हूं क्योंकि ऐसा नहीं है। यदि आपके पास प्रपत्र तत्व के लिए कोई क्रिया विशेषता सेट है, तो यह पुनर्निर्देशित होगा।

यदि आप यह नहीं चाहते हैं तो बस किसी भी कार्रवाई और सेट को पुनर्निर्देशित न करें onsubmit="someFunction();"

अपने someFunction()आप में आप जो चाहते हैं, (AJAX या नहीं के साथ) और अंत में, आप return false;ब्राउज़र को फ़ॉर्म जमा नहीं करने के लिए कहेंगे ...

Question 7

ऐसा करने के लिए आपको अजाक्स की आवश्यकता है। कुछ इस तरह:

$(document).ready(function(){
    $("#myform").on('submit', function(){
        var name = $("#name").val();
        var email = $("#email").val();
        var password = $("#password").val();
        var contact = $("#contact").val();

        var dataString = 'name1=' + name + '&email1=' + email + '&password1=' + password + '&contact1=' + contact;
        if(name=='' || email=='' || password=='' || contact=='')
        {
            alert("Please fill in all fields");
        }
        else
        {
            // Ajax code to submit form.
            $.ajax({
                type: "POST",
                url: "ajaxsubmit.php",
                data: dataString,
                cache: false,
                success: function(result){
                    alert(result);
                }
           });
        }
        return false;
    });
});

Question 8

देखें jQuery का postफ़ंक्शन।

मैं एक बटन बनाने होता है, और एक सेट onClickListener($('#button').on('click', function(){}); ) फ़ंक्शन में डेटा भेजता ।

इसके अलावा, preventDefaultफ़ंक्शन देखें , jQuery का!

Question 9

2020 तक वन-लाइनर समाधान, यदि आपका डेटा के रूप में multipart/form-dataया भेजने के लिए नहीं है application/x-www-form-urlencoded:

<form onsubmit='return false'>
    <!-- ... -->           
</form>

Question 10

यहां दिए गए फ़ॉर्म के बाहर सबमिट बटन को स्थानांतरित करके वांछित प्रभाव भी प्राप्त किया जा सकता है:

पेज पुनः लोड होने से रोके और फॉर्म पर रीडायरेक्ट करें ajax / jquery सबमिट करें

ऐशे ही:

<form id="getPatientsForm">
    Enter URL for patient server
    <br/><br/>
    <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" />
    <input name="patientRootUrl" size="100"></input>
    <br/><br/>
</form>

<button onclick="javascript:postGetPatientsForm();">Connect to Server</button>

Question 11

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

function submitForm(form, successFn){
    if (form.getAttribute("id") != '' || form.getAttribute("id") != null){
        var id = form.getAttribute("id");
    } else {
        console.log("Form id attribute was not set; the form cannot be serialized");
    }

    $.ajax({
        type: form.method,
        url: form.action,
        data: $(id).serializeArray(),
        dataType: "json",
        success: successFn,
        //error: errorFn(data)
    });
}

और फिर बस करो:

var formElement = document.getElementById("yourForm");
submitForm(formElement, function() {
    console.log("Form submitted");
});

Question 12

यदि आप बैक एंड को नियंत्रित करते हैं, तो response.redirectइसके बजाय कुछ का उपयोग करें response.send।

आप इसके लिए कस्टम HTML पेज बना सकते हैं या आपके पास पहले से मौजूद किसी चीज़ को रीडायरेक्ट कर सकते हैं।

Express.js में:

const handler = (req, res) => {
  const { body } = req
  handleResponse(body)
  .then(data => {
    console.log(data)
    res.redirect('https://yoursite.com/ok.html')
  })
  .catch(err => {
    console.log(err)
    res.redirect('https://yoursite.com/err.html')
  })
}
...
app.post('/endpoint', handler)