सबमिट करने से पहले अतिरिक्त फ़ील्ड कैसे बनाएं?

Question

क्या POST का उपयोग करके HTTP फॉर्म से भेजे जाने वाले कुछ अतिरिक्त क्षेत्रों को जोड़ने के लिए जावास्क्रिप्ट और JQuery का उपयोग करने का एक तरीका है?

मेरा मतलब:

<form action="somewhere" method="POST" id="form">
  <input type="submit" name="submit" value="Send" />
</form>

<script type="text/javascript">
  $("#form").submit( function(eventObj) {
    // I want to add a field "field" with value "value" here
    // to the POST data

    return true;
  });
</script>

Comments

jQuery के

— Marijn

Answer 1

हाँ। आप कुछ छिपे हुए पारमों के साथ कोशिश कर सकते हैं।

  $("#form").submit( function(eventObj) {
      $("<input />").attr("type", "hidden")
          .attr("name", "something")
          .attr("value", "something")
          .appendTo("#form");
      return true;
  });

Comments

.appendTo(this)शायद बेहतर होगा।

— jcuenod

@jcuenod मूल appendTo('#form')बहुत बेहतर है, क्योंकि इस तरह का दृष्टिकोण इस एक से मूल्यों के साथ एक और रूप प्रस्तुत करने की अनुमति देता है।

— एंड्रीमोनी

प्रत्येक जमा के साथ इन इनपुट को जमा करने से बचने के लिए आपको कुछ अतिरिक्त तर्क जोड़ने होंगे।

— अमोस

संभवतः आप इनपुट तत्व को निकालने से पहले इसे जोड़ना चाहते हैं, क्योंकि यह पहले से मौजूद है$(this).find("input[name="+"something"+"]").remove();

— K Vij

Answer 2

इसे इस्तेमाल करे:

$('#form').submit(function(eventObj) {
    $(this).append('<input type="hidden" name="field_name" value="value" /> ');
    return true;
});

Comments

मुझे गतिशील रूप से एक फ़ाइल फ़ील्ड जोड़ने की आवश्यकता है। मैंने टाइप करने की कोशिश की = फ़ाइल, और मान भी फ़ाइल के रूप में (मैं WebKitDirectory का उपयोग कर रहा हूं, इसलिए मुझे वास्तव में फ़ाइल ऑब्जेक्ट मिलते हैं), हालांकि यह कभी भी इसे पारित नहीं करता है। इनपुट टेक्स्ट हमेशा यद्यपि पास हो जाता है। कृपया मेरी मदद करें!

— स्वाति ककरला

thisनिरर्थक के बजाय उपयोग करने के कारण मेरा पसंदीदा उत्तर#form

— rinogo

Answer 3

$('#form').append('<input type="text" value="'+yourValue+'" />');

Answer 4

आपको hidden inputजो भी मूल्य भेजने की आवश्यकता है, उसके साथ जोड़ सकते हैं :

$('#form').submit(function(eventObj) {
    $(this).append('<input type="hidden" name="someName" value="someValue">');
    return true;
});

Answer 5

यह काम:

var form = $(this).closest('form');

form = form.serializeArray();

form = form.concat([
    {name: "customer_id", value: window.username},
    {name: "post_action", value: "Update Information"}
]);

$.post('/change-user-details', form, function(d) {
    if (d.error) {
        alert("There was a problem updating your user details")
    } 
});

Comments

हाँ, लेकिन परिणाम पृष्ठ पर कोई रीडायरेक्ट नहीं है।

— omikron

यह काम करना चाहिए: $('body').append(form); $(form).submit();

— जेफ़ लोरी

यह मेरे लिए सबसे अधिक उपयोगी था, क्योंकि मेरे पास बड़ी संख्या में उत्पन्न फ़ील्ड हैं और मैं प्रत्येक के लिए छिपे हुए फ़ील्ड नहीं बनाना चाहता।

— स्पे्रचिट्री

क्यों नहीं @Sprachprofi?

— विगत

Answer 6

कुछ के लिए उपयोगी हो सकता है:

(एक फ़ंक्शन जो आपको मौजूदा इनपुट्स के लिए ओवरराइड के साथ ऑब्जेक्ट को फॉर्म में डेटा जोड़ने की अनुमति देता है, अगर वहाँ है) [[जेएस]

(फॉर्म एक डोम एल है, और एक jquery वस्तु नहीं [ jqryobj.get (0) यदि आपको आवश्यकता है )

function addDataToForm(form, data) {
    if(typeof form === 'string') {
        if(form[0] === '#') form = form.slice(1);
        form = document.getElementById(form);
    }

    var keys = Object.keys(data);
    var name;
    var value;
    var input;

    for (var i = 0; i < keys.length; i++) {
        name = keys[i];
        // removing the inputs with the name if already exists [overide]
        // console.log(form);
        Array.prototype.forEach.call(form.elements, function (inpt) {
             if(inpt.name === name) {
                 inpt.parentNode.removeChild(inpt);
             }
        });

        value = data[name];
        input = document.createElement('input');
        input.setAttribute('name', name);
        input.setAttribute('value', value);
        input.setAttribute('type', 'hidden');

        form.appendChild(input);
    }

    return form;
}

उपयोग :

addDataToForm(form, {
    'uri': window.location.href,
     'kpi_val': 150,
     //...
});

आप इसे ऐसे भी इस्तेमाल कर सकते हैं

var form = addDataToForm('myFormId', {
    'uri': window.location.href,
     'kpi_val': 150,
     //...
});

आप # जोड़ सकते हैं यदि आप भी पसंद करते हैं ("#myformid")।