2012-06-02 16 views
8

यदि मैं यह रूप है जो कि पृष्ठ स्वयं पर पोस्ट डेटा प्रस्तुत है:प्रपत्र प्रस्तुत करने पर jQuery के साथ पोस्ट डेटा भेजने

<form method="post"> 
    <input type="text" name="name"/> 
    <input type="submit"/> 
</form> 

कैसे मैं जावास्क्रिप्ट/jQuery का उपयोग करने के लिए एक अतिरिक्त पद डेटा इंजेक्षन करने में सक्षम होंगे। यह आसान होगा अगर मैं केवल $.post(), $.get(), या $.ajax() जैसे किसी भी फ़ंक्शन का उपयोग करके AJAX के माध्यम से फ़ॉर्म सबमिट करता हूं। लेकिन मैं यहां क्या करना चाहता हूं वह फॉर्म जमा करना है जो अजाक्स के माध्यम से नहीं है।

अतिरिक्त डेटा जावास्क्रिप्ट में है। मैं सिर्फ डीओएम में एक नया छिपे हुए क्षेत्र को इंजेक्ट करने की सोच रहा हूं जिसमें मैं डेटा में गुजरता हूं ताकि यह फ़ॉर्म के साथ जमा हो जाए, लेकिन क्या ऐसा करने का कोई और तरीका है?

अगर आपको अधिक कोड/स्पष्टीकरण की आवश्यकता है तो कृपया टिप्पणी करें।

+0

क्यों यह downvoted किया गया था? –

उत्तर

11

सबमिट बटन का उपयोग करने के बजाय, नियमित बटन का उपयोग करें और जावास्क्रिप्ट के माध्यम से सबमिशन को नियंत्रित करें। अपने जावास्क्रिप्ट में, आपको फ़ॉर्म को क्रमबद्ध करने और इसे इच्छित किसी अन्य चीज़ के साथ डेटा के रूप में पास करने की आवश्यकता है।

<script> 

    $(document).ready(function() { 

     var extra_data = "This is more stuff to send"; 

     $('#submit').click(function() { 
      $.ajax({ 
      type: "POST", 
      url: "form.php", 
      data: {'form': $("#my_form").serialize(), 'other': extra_data}, 
      success: function(msg) { 
       alert("Form Submitted: " + msg); 
      } 
      }); 

     }); 

    }); 

</script> 

<form id="my_form" method="post"> 
    <input type="text" name="name" /> 
    <input type="button" id="submit" /> 
</form> 
+0

यही वह सवाल है जो मैं प्रश्न शरीर में कहने की कोशिश कर रहा हूं। मुझे लगता है कि मुझे फिर फॉर्म जमा करने के लिए AJAX का उपयोग करना होगा। –

+0

आपके पास दो विकल्प हैं: 1) आपके फॉर्म में छिपे हुए फ़ील्ड। 2) AJAX। आप चुनते हैं, लेकिन व्यक्तिगत रूप से मुझे लगता है कि AJAX विधि अधिक मजबूत है और जमा करने से पहले फॉर्म सत्यापन के रूप में अधिक कार्यक्षमता की अनुमति देता है। –

1
<head> 
    <script src="jquery/jquery-1.11.1.min.js"></script> 
    <script> 
    $(function() { 
     $('#form_id').on('click','#submit', function(e){ 
      e.preventDefault(); 
      $.ajax({ 
       type: "POST", 
       url: "get_Ajax.php", 
       data: $('#form_id').serialize(), 
       success: function(data) { 
        alert(data); 
       } 
      }); 
      return false; 
     }); 
    }); 
    </script> 
</head> 
<form method="post" id="form_id"> 
<input type="text" name="ime"> 
<input type="button" id="submit" name="submit" value="Send"> 
</form> 

** get_ajax.php **

<?php 
$ime = $_POST['ime']; 

echo "Your name is $ime"; 
?> 
संबंधित मुद्दे