JQuery का उपयोग करके एक फ़ॉर्म सबमिट करें [बंद]

Question

मैं jQuery का उपयोग करके एक फॉर्म सबमिट करना चाहता हूं। क्या कोई कोड, एक डेमो या एक उदाहरण लिंक प्रदान कर सकता है?

Answer 1

यह इस बात पर निर्भर करता है कि आप फॉर्म को सामान्य रूप से सबमिट कर रहे हैं या AJAX कॉल के माध्यम से। आप jquery.com पर बहुत सारी जानकारी पा सकते हैं , उदाहरण सहित प्रलेखन। सामान्य रूप से फ़ॉर्म जमा submit()करने के लिए, उस साइट पर विधि देखें। के लिए AJAX , वहाँ कई अलग अलग संभावनाएं है, हालांकि आप शायद या तो उपयोग करना चाहते हैं ajax()या post()तरीकों। ध्यान दें कि post()वास्तव में ajax()एक सरलीकृत, और सीमित, इंटरफ़ेस के साथ विधि को कॉल करने का एक सुविधाजनक तरीका है ।

एक महत्वपूर्ण संसाधन, एक जिसे मैं हर दिन उपयोग करता हूं, वह यह है कि आपको बुकमार्क करना चाहिए कि jQuery कैसे काम करता है । इसमें jQuery का उपयोग करने के लिए ट्यूटोरियल हैं और बाएं हाथ का नेविगेशन सभी प्रलेखन तक पहुंच देता है।

उदाहरण:

साधारण

$('form#myForm').submit();

AJAX

$('input#submitButton').click( function() {
    $.post( 'some-url', $('form#myForm').serialize(), function(data) {
         // ... do something with response from server
       },
       'json' // I expect a JSON response
    );
});

$('input#submitButton').click( function() {
    $.ajax({
        url: 'some-url',
        type: 'post',
        dataType: 'json',
        data: $('form#myForm').serialize(),
        success: function(data) {
                   // ... do something with the data...
                 }
    });
});

ध्यान दें कि ajax()और post()ऊपर दिए गए तरीके बराबर हैं। अतिरिक्त पैरामीटर हैं जिन्हें आप ajax()त्रुटियों को संभालने के अनुरोध में जोड़ सकते हैं, आदि।

Comments

मुझे क्रमबद्ध विधि याद आ रही थी। जाहिर है, मैंने jQuery.com को देखा, लेकिन उनके डॉक्स ने $.postस्पष्ट रूप से डिकॉन्स्ट्रक्ट किया और सबमिट करने के लिए डेटा उत्पन्न करने के लिए फॉर्म का पुनर्निर्माण किया। धन्यवाद!

— nomen

अगर मेरे पास कुछ डेटा तैयार है, तो मैं सबमिट करने से पहले पोस्ट अनुरोध (ajax नहीं, फॉर्म सबमिट पोस्ट अनुरोध) को जोड़ना चाहता हूं, मैं यह कैसे करूं?

— ア ッ ク ア

@AlexanderSupertramp - उदाहरण के ऊपर डेटा में url- एन्कोडेड फ़ॉर्म पैरामीटर के रूप में भेजा जा रहा है। आप अतिरिक्त फॉर्म पैरामीटर के रूप में डेटा को सीधे जोड़ सकते हैं। $('form#MyForm').serialize() + '&newData=' + newData + '&moreData=' + moreData। नोट: बाद वाले दो का उपयोग करके यूआरएल को इनकोड किया जा सकता है encodeURIComponent()। या - आप दोनों सिरों पर JSON एन्कोडिंग का उपयोग करने के लिए बदल सकते हैं, लेकिन फिर आपको अपने अतिरिक्त डेटा के साथ प्रपत्र डेटा को एक जावास्क्रिप्ट डेटा संरचना में डालना होगा और इसे क्रमबद्ध करना होगा। उस स्थिति में आप संभवतः serializeArrayफॉर्म का उपयोग करेंगे और अपने अन्य डेटा को मर्ज करेंगे।

— tvanfosson

"मुझे उम्मीद है कि एक जैसन प्रतिक्रिया" ने मेरे लिए एक अलग मुद्दे को हल किया (पुनः: फ्लास्क को कॉल विफल)।

— स्कार्फमैन

यदि आपके पास 'सबमिट' नाम का एक सबमिट बटन है, तो यह या तो चुपचाप विफल हो जाएगा (jQuery) या यह कहते हुए त्रुटि उत्पन्न करें कि "सबमिट एक फ़ंक्शन नहीं है" (वेनिला जेएस)। किसी और चीज़ के लिए बटन को फिर से नाम देना । ¯_ (¯) _ / ¯ f

— fzzylogic

Answer 2

आपको उपयोग करना पड़ेगा $("#formId").submit()।

आप आम तौर पर एक फ़ंक्शन के भीतर से इसे कॉल करेंगे।

उदाहरण के लिए:

<input type='button' value='Submit form' onClick='submitDetailsForm()' />

<script language="javascript" type="text/javascript">
    function submitDetailsForm() {
       $("#formId").submit();
    }
</script>

आप इस बारे में अधिक जानकारी Jquery वेबसाइट पर प्राप्त कर सकते हैं ।

Comments

यदि आप jQuery का उपयोग कर रहे हैं तो आप इनलाइन ऑनक्लिक विशेषता का उपयोग क्यों करेंगे?

— nnnnnn

@ ब्रैडलीफ़्लड - उसे इसके बजाय कैसे करना चाहिए था? हम जैसे नवयुवक जानना चाहेंगे?

— मार्कोज़ेन

@MarcoZen मुझे लगता है कि ब्रैडली फ्लड इशारा कर रहा था कि वाक्यांश "उदाहरण के लिए:" का अर्थ है कि इनलाइन ऑनक्लिक विशेषता का उपयोग करना, लेकिन कई संभावित तरीकों में से एक है। वास्तव में, अधिक jQuery की तरह .on ('क्लिक', submitDetailsForm) का उपयोग किया जाएगा।

— जनवरी कुक्कैका

@ जानकुआक - नोटेड। धन्यवाद।

— मार्कोज़ेन

Answer 3

जब आपके पास एक मौजूदा फॉर्म हो, तो अब आपको jquery के साथ काम करना चाहिए - ajax / post अब आप कर सकते हैं:

• अपने फॉर्म के सबमिट - इवेंट पर लटका दें
• सबमिट की डिफ़ॉल्ट कार्यक्षमता को रोकें

• अपना सामान खुद करो

  $(function() {
      //hang on event of form with id=myform
      $("#myform").submit(function(e) {
  
          //prevent Default functionality
          e.preventDefault();
  
          //get the action-url of the form
          var actionurl = e.currentTarget.action;
  
          //do your own request an handle the results
          $.ajax({
                  url: actionurl,
                  type: 'post',
                  dataType: 'application/json',
                  data: $("#myform").serialize(),
                  success: function(data) {
                      ... do something with the data...
                  }
          });
  
      });
  
  });

कृपया ध्यान दें कि serialize()फ़ंक्शन के लिए उपरोक्त उदाहरण में काम करने के लिए, सभी फॉर्म तत्वों को अपनी nameविशेषता परिभाषित करने की आवश्यकता है ।

फार्म का उदाहरण:

<form id="myform" method="post" action="http://example.com/do_recieve_request">

<input type="text" size="20" value="default value" name="my_input_field">
..
.
</form>

@PtF - इस नमूने में POST का उपयोग करके डेटा प्रस्तुत किया जाता है, इसलिए इसका अर्थ है कि आप अपने डेटा को एक्सेस कर सकते हैं

 $_POST['dataproperty1'] 

, जहां dataproperty1 आपके जसन में एक "वैरिएबल-नाम" है।

यदि आप CodeIgniter का उपयोग करते हैं तो यहां नमूना वाक्यविन्यास:

 $pdata = $this->input->post();
 $prop1 = $pdata['prop1'];
 $prop1 = $pdata['prop2'];

Comments

आप फॉर्म के चयनकर्ता का पुनः उपयोग क्यों कर रहे हैं, फॉर्म एलिमेंट का पुनः उपयोग क्यों नहीं कर रहे हैं?

— स्लाव फोमिन II

हाँ, आप ऐसा भी कर सकते हैं: <फॉर्म आईडी = "myform" ओनसुमिट = "do_stuff ()">, लेकिन अगर बाद में js लोड किया गया / उस कार्य को स्थगित किया जा सकता है तो उपलब्ध नहीं हो सकता है .. इसलिए मैंने दस्तावेज़ पर इसे शुरू करने के बारे में सोचा। तैयार .... मुझे यकीन नहीं है कि अगर मैं उसी विचार पर हूं, तो क्या आप बता सकते हैं कि आप कहां तक ​​हैं?

— womd

हाइलाइट करने के लिए धन्यवाद कि "नाम" विशेषता को परिभाषित किया जाना चाहिए

— ccalboni

डेटाटाइप: 'एप्लिकेशन / json' एक त्रुटि है। डेटा टाइप पढ़ना चाहिए: 'json'। यदि आपको ऊपर दिए गए उदाहरण में छोड़ दिया गया है तो आपको पार्स त्रुटियां मिलेंगी।

— हैन्केस्टर

@ हैँस्टर हाँ, जसन था लेकिन संपादित हो गया ... हॉलैंडर आप जाँच / पुष्टि कर सकते हैं?

— womd

Answer 4

JQuery में मैं निम्नलिखित पसंद करूंगा:

$("#form-id").submit()

लेकिन फिर, आपको वास्तव में उस कार्य को करने के लिए jQuery की आवश्यकता नहीं है - बस नियमित जावास्क्रिप्ट का उपयोग करें:

document.getElementById("form-id").submit()

Comments

@windmaomao क्या आपने अपने वेबपेज पर jQuery शामिल किया है? यह हो सकता है कि आपको $ aswell के jQuery istead का उपयोग करने की आवश्यकता हो, हालांकि - मैं नियमित JS समाधान का उपयोग करने की सलाह देता हूं जब तक कि आप पहले ही jQuery शामिल नहीं कर लेते।

— गर्नबर्ग

@ क्विडमाओमाओ मेरे पास एक ही मुद्दा था। मेरा jQuery अन्य सभी कार्यों को चलाता है, लेकिन फ़ॉर्म जमा नहीं करेगा। यह सिर्फ document.getElementById विधि का उपयोग करके काम किया।

— चैलेंज

Answer 5

मैनुअल से: jQuery डॉक्टर

$("form:first").submit();

Comments

पहले फॉर्म को खोजने के बजाय "आईडी" द्वारा फॉर्म जमा करना और उसे सबमिट करना बल्लेबाज है। हालांकि, यह पूरी तरह से काम करेगा यदि एक समय में केवल एक ही फॉर्म हो।

— चिंतन थुम्मर

Answer 6

जानकारी के लिए
अगर कोई भी उपयोग करता है

$('#formId').submit();

ऐसा कुछ मत करो

<button name = "submit">

मुझे खोजने में कई घंटे लग गए कि सबमिट () इस तरह से काम नहीं करेगा।

Comments

कुंजी शब्द पर टाइपो "sumit"यह स्पष्ट नहीं करता है कि टाइपो उत्तर में अनपेक्षित है, या समस्या से संबंधित है। क्या आपका मतलब है कि "submit"jquery फॉर्म जमा () नाम का एक बटन गड़बड़ है? या क्या आपका मतलब यह है कि समस्या यह थी कि आपने मानक के बजाय बटन नाम जमा किया था type="submit"?

— दरियाई

मेरा इरादा इस सवाल का जवाब देना नहीं था, बल्कि इस समस्या का सामना करने वालों को बताना था। मुझे लगता है कि समस्या बिना परिभाषित प्रकार के बटन के नाम के साथ है, क्योंकि मैंने सबमिट करने से पहले कुछ इनपुट की जांच करने के लिए ऑनक्लिक ईवेंट का उपयोग किया था। यदि टाइप करें = सबमिट करें, तो मेरे ऑनक्लिक ईवेंट आग के बिना फॉर्म सबमिट करें।

— AZ शीतल

Answer 7

Jquery का उपयोग करके अपना फॉर्म जमा करने के लिए इसका उपयोग करें। यहाँ लिंक http://api.jquery.com/submit/ है

<form id="form" method="post" action="#">
    <input type="text" id="input">
    <input type="button" id="button" value="Submit">
</form>

<script type="text/javascript">
$(document).ready(function () {
    $( "#button" ).click(function() {
        $( "#form" ).submit();
    });
});
</script>

Comments

हालांकि यह एक पुरानी पोस्ट है, यह buttonफ़ॉर्म को सबमिट नहीं करने के लिए अपने बटन में एक प्रकार जोड़ने के लायक है (जैसा कि सभी ब्राउज़र उसी तरह के बटन के साथ व्यवहार नहीं करते हैं)।

— मिकी

@ माइक सुझाव के लिए धन्यवाद।

— चिंतन ठुम्मर २३'१um को ०an:

Answer 8

यह प्रीलोडर के साथ एक फॉर्म भेजेगा:

var a=$('#yourform').serialize();
$.ajax({
    type:'post',
    url:'receiver url',
    data:a,
    beforeSend:function(){
        launchpreloader();
    },
    complete:function(){
        stopPreloader();
    },
    success:function(result){
         alert(result);
    }
});

मैं यादृच्छिक विधि http://www.jackart4.com/article.html के साथ सुधार किए गए फ़ॉर्म डेटा पोस्ट को बनाने के लिए कुछ ट्रिक कर रहा हूं

Comments

क्या आप अद्यतन लिंक पोस्ट कर सकते हैं? ऊपर दिया गया लिंक अब काम नहीं करता है।

— 18:22 पर क्रिस 22

Answer 9

$("form:first").submit();

इवेंट्स देखें / सबमिट करें ।

Answer 10

ध्यान दें कि यदि आपने पहले से ही अपने फॉर्म के लिए सबमिट इवेंट श्रोता स्थापित किया है, तो सबमिट करने के लिए इनर कॉल ()

jQuery('#<form-id>').submit( function(e){ 
    e.preventDefault();
    // maybe some validation in here
    if ( <form-is-valid> ) jQuery('#<form-id>').submit();
});

काम नहीं करेगा क्योंकि यह इस फॉर्म के सबमिट इवेंट (जो विफल हो जाता है) के लिए एक नया ईवेंट श्रोता स्थापित करने का प्रयास करता है। इसलिए आपको HTML एलिमेंट को खुद ही एक्सेप्ट करना होगा (सीधे jQquery से) और इस तत्व पर कॉल सबमिट () करें:

    jQuery('#<form-id>').submit( function(e){ 
      e.preventDefault();
      // note the [0] array access:
      if ( <form-is-valid> ) jQuery('#<form-id>')[0].submit();
    });

Answer 11

तुम भी अजाक्स aswell का उपयोग कर प्रस्तुत करने के लिए jquery फार्म प्लगइन का उपयोग कर सकते हैं:

http://malsup.com/jquery/form/

Answer 12

jQuery("a[id=atag]").click( function(){

    jQuery('#form-id').submit();      

            **OR**

    jQuery(this).parents("#form-id").submit();
});

Answer 13

ध्यान दें कि इंटरनेट एक्सप्लोरर में गतिशील रूप से बनाए गए फ़ॉर्म के साथ समस्याएं हैं। इस तरह बनाया गया एक फॉर्म IE (9) में जमा नहीं होगा:

var form = $('<form method="post" action="/test/Delete/">' +
             '<input type="hidden" name="id" value="' + myid + '"></form>');
$(form).submit();

IE में काम कर पाने के लिए फॉर्म एलीमेंट बनाएं और इसे सबमिट करने से पहले इसे संलग्न करें:

var form = document.createElement("form");
$(form).attr("action", "/test/Delete")
       .attr("method", "post");
$(form).html('<input type="hidden" name="id" value="' + myid + '" />');
document.body.appendChild(form);
$(form).submit();
document.body.removeChild(form);

उदाहरण 1 में प्रपत्र बनाना और फिर इसे संलग्न करना काम नहीं करेगा - IE9 में यह एक JScript त्रुटि फेंकता है DOM Exception: HIERARCHY_REQUEST_ERR (3)

टॉमी डब्ल्यू @ https://stackoverflow.com/a/6694054/694325 के लिए सहारा

Answer 14

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

आईडी जानने की आवश्यकता के बिना फॉर्म जमा करने के लिए इस कोड का उपयोग करें:

function handleForm(field) {
    $(field).closest("form").submit();
}

उदाहरण के लिए यदि आप एक बटन के लिए क्लिक ईवेंट को हैंडल करना चाहते हैं, तो आप उपयोग कर सकते हैं

$("#buttonID").click(function() {
    handleForm(this);    
});

Answer 15

यदि बटन प्रपत्र टैग के बीच स्थित है, तो मुझे यह संस्करण पसंद है:

$('.my-button').click(function (event) {
    var $target = $( event.target );
    $target.closest("form").submit();
});

Answer 16

आप इसे इस तरह इस्तेमाल कर सकते हैं:

  $('#formId').submit();

या

document.formName.submit();

Answer 17

गतिशील रूपों के लिए IE चाल:

$('#someform').find('input,select,textarea').serialize();

Answer 18

मेरा दृष्टिकोण थोड़ा अलग है बटन सबमिट बटन में बदलें और फिर क्लिक करें

$("#submit").click(function(event) {
$(this).attr('type','submit');
$(this).click();
});

Answer 19

function  form_submit(form_id,filename){
    $.post(filename,$("#"+form_id).serialize(), function(data){
        alert(data);
    });
}

यह AJAX के माध्यम से आपके दिए गए फ़ाइल नाम पर फॉर्म डेटा पोस्ट करेगा।

Answer 20

मैं एक सामान्य समाधान सुझाता हूं ताकि आपको हर फॉर्म के लिए कोड न जोड़ना पड़े। Jquery फॉर्म प्लगइन (http://jquery.malsup.com/form/) का उपयोग करें और इस कोड को जोड़ें।

$(function(){
$('form.ajax_submit').submit(function() {
    $(this).ajaxSubmit();
            //validation and other stuff
        return false; 
});

});

Answer 21

आप इसे इस तरह से कर सकते हैं:

$('#myform').bind('submit', function(){ ... });

Answer 22

मैंने भी अजाक्स के माध्यम से एक फॉर्म जमा करने (वास्तव में इसे प्रस्तुत किए बिना) का उपयोग किया है:

  jQuery.get("process_form.php"+$("#form_id").serialize(), {}, 
    function() {
      alert("Okay!"); 
    });

Comments

यह एक जमा की तरह कुछ भी नहीं है ()। एक बात के लिए सबमिट करें () POST शब्दार्थ का उपयोग करता है, आप एक GET का उपयोग कर रहे हैं

— स्कॉट एवरंडन