javascript - jQuery AJAX जमा फॉर्म




submit html-form (10)

मेरे पास नाम orderproductForm और इनपुट की एक अनिर्धारित संख्या के साथ एक फॉर्म है।

मैं किसी प्रकार का jQuery.get या AJAX या ऐसा कुछ भी करना चाहता हूं जो अजाक्स के माध्यम से एक पृष्ठ को कॉल करे, और फॉर्म orderproductForm के सभी इनपुट के साथ भेजें।

मुझे लगता है कि एक तरह से कुछ करना होगा

jQuery.get("myurl",
          {action : document.orderproductForm.action.value,
           cartproductid : document.orderproductForm.cartproductid.value,
           productid : document.orderproductForm.productid.value,
           ...

हालांकि मुझे बिल्कुल सभी फॉर्म इनपुट नहीं पता है। क्या कोई सुविधा, फ़ंक्शन या ऐसा कुछ है जो सभी फॉर्म इनपुट भेजता है?


सरल संस्करण (छवियां नहीं भेजता है)

<form action="/my/ajax/url" class="my-form">
...
</form>
<script>
    (function($){
        $("body").on("submit", ".my-form", function(e){
            e.preventDefault();
            var form = $(e.target);
            $.post( form.attr("action"), form.serialize(), function(res){
                console.log(res);
            });
        });
    )(jQuery);
</script>

किसी पृष्ठ पर किसी फ़ॉर्म या सभी रूपों के AJAXफिकेशन को कॉपी और पेस्ट करें

यह जवाब का एक संशोधित संस्करण है

  • यह jQuery> = 1.3.2 के साथ काम करेगा
  • दस्तावेज तैयार होने से पहले आप इसे चला सकते हैं
  • आप फ़ॉर्म को हटा और पुनः जोड़ सकते हैं और यह अभी भी काम करेगा
  • यह फ़ॉर्म के "एक्शन" विशेषता में निर्दिष्ट सामान्य रूप के समान स्थान पर पोस्ट करेगा

जावास्क्रिप्ट

jQuery(document).submit(function(e){
    var form = jQuery(e.target);
    if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms)
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: form.serialize(), // serializes the form's elements.
            success: function(data) {
                console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
            }
        });
    }
});

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

फ़ाइलों को नहीं भेजता है, बटन का समर्थन नहीं करता है, उदाहरण के लिए एक बटन (सबमिट बटन सहित) पर क्लिक करके उसका मान फॉर्म डेटा के रूप में भेजता है, लेकिन क्योंकि यह एक AJAX अनुरोध है बटन क्लिक नहीं भेजा जाएगा।

बटन का समर्थन करने के लिए आप सबमिट के बजाय वास्तविक बटन क्लिक पर कब्जा कर सकते हैं।

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
        e.preventDefault();
        var form = self.closest('form'), formdata = form.serialize();
        //add the clicked button to the form data
        if(self.attr('name')){
            formdata += (formdata!=='')? '&':'';
            formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
        }
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: formdata, 
            success: function(data) {
                console.log(data);
            }
        });
    }
});

सर्वर की तरफ आप इस हेडर के साथ AJAX अनुरोध का पता लगा सकते हैं कि jquery php के लिए HTTP_X_REQUESTED_WITH सेट करता है

पीएचपी

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is ajax
}

आप AJAX फॉर्म प्लगइन या jQuery serialize फ़ंक्शन से AJAXForm / AJAXSubmit फ़ंक्शंस का उपयोग कर सकते हैं।

अजाक्सफॉर्म :

$("#theForm").ajaxForm({url: 'server.php', type: 'post'})

या

$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})

जब सबमिट बटन दबाया जाता है तो AJAXForm भेज देगा। AJAX सबमिट तुरंत भेजता है।

Serialize :

$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theForm').serialize())

AJAX serialization दस्तावेज यहाँ है


आप इसे नीचे सबमिट फ़ंक्शन पर उपयोग कर सकते हैं।

एचटीएमएल फॉर्म

<form class="form" action="" method="post">
    <input type="text" name="name" id="name" >
    <textarea name="text" id="message" placeholder="Write something to us"> </textarea>
    <input type="button" onclick="return formSubmit();" value="Send">
</form>

jQuery समारोह:

<script>
    function formSubmit(){
        var name = document.getElementById("name").value;
        var message = document.getElementById("message").value;
        var dataString = 'name='+ name + '&message=' + message;
        jQuery.ajax({
            url: "submit.php",
            data: dataString,
            type: "POST",
            success: function(data){
                $("#myForm").html(data);
            },
            error: function (){}
        });
    return true;
    }
</script>

अधिक जानकारी और नमूना के लिए यहां जाएं: http://www.spiderscode.com/simple-ajax-contact-form/


एकाधिक फॉर्मडाटा से बचने के लिए:

फ़ॉर्म सबमिट करने से पहले सबमिट सबमिट करने के लिए मत भूलना, उपयोगकर्ता एक से अधिक बार sumbit फ़ंक्शन को कॉल कर सकता है, शायद वह कुछ भूल गया, या एक सत्यापन त्रुटि थी।

 $("#idForm").unbind().submit( function(e) {
  ....

फॉर्म तत्व पर परिभाषित विशेषताओं का उपयोग करके एक और समान समाधान:

<form id="contactForm1" action="/your_url" method="post">
    <!-- Form input fields here (do not forget your name attributes). -->
</form>

<script type="text/javascript">
    var frm = $('#contactForm1');

    frm.submit(function (e) {

        e.preventDefault();

        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        });
    });
</script>

मुझे मेरे लिए निम्नलिखित मिला:

formSubmit('#login-form', '/api/user/login', '/members/');

कहा पे

function formSubmit(form, url, target) {
    $(form).submit(function(event) {
        $.post(url, $(form).serialize())
            .done(function(res) {
                if (res.success) {
                    window.location = target;
                }
                else {
                    alert(res.error);
                }
            })
            .fail(function(res) {
                alert("Server Error: " + res.status + " " + res.statusText);

            })
        event.preventDefault();
    });
}

यह मानता है कि 'url' पर पोस्ट को एजेक्स देता है {success: false, error:'my Error to display'}

आप इसे पसंद कर सकते हैं। उस स्निपेट का उपयोग करने के लिए स्वतंत्र महसूस करें।


यदि आप फॉर्म का उपयोग कर रहे हैं। Serialize () - आपको प्रत्येक फॉर्म तत्व को इस तरह का नाम देना होगा:

<input id="firstName" name="firstName" ...

और फॉर्म इस तरह क्रमबद्ध हो जाता है:

firstName=Chris&lastName=Halcrow ...

यह एक साधारण संदर्भ है:

// this is the id of the form
$("#idForm").submit(function(e) {

    var url = "path/to/your/script.php"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    e.preventDefault(); // avoid to execute the actual submit of the form.
});

मुझे उम्मीद है इससे आपको मदद मिली होगी।


सबमिट ईवेंट भी है, जिसे इस $ ("# form_id") की तरह ट्रिगर किया जा सकता है। सबमिट करें ()। यदि आप HTML में पहले से ही फ़ॉर्म का प्रतिनिधित्व करते हैं तो आप इस विधि का उपयोग करेंगे। आप केवल पृष्ठ में पढ़ेंगे, सामग्री के साथ फॉर्म इनपुट को पॉप्युलेट करेंगे, फिर कॉल करें। सबमिट करें ()। यह फ़ॉर्म की घोषणा में परिभाषित विधि और क्रिया का उपयोग करेगा, इसलिए आपको इसे अपने जावास्क्रिप्ट में कॉपी करने की आवश्यकता नहीं है।

examples


closest उपयोग करने पर विचार करें

$('table+table form').closest('tr').filter(':not(:last-child)').submit(function (ev, frm) {
        frm = $(ev.target).closest('form');
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert(data);
            }
        })
        ev.preventDefault();
    });




html-form