จะเพิ่มช่องเพิ่มเติมในแบบฟอร์มก่อนส่งได้อย่างไร?


112

มีวิธีใช้ javascript และ JQuery เพื่อเพิ่มฟิลด์เพิ่มเติมที่จะส่งจากฟอร์ม HTTP โดยใช้ POST หรือไม่

ฉันหมายถึง:

<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>

คำตอบ:


162

ใช่คุณสามารถลองใช้พารามิเตอร์ที่ซ่อนอยู่

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

31
.appendTo(this)น่าจะดีกว่า
jcuenod

4
@jcuenod original appendTo('#form')นั้นดีกว่ามากเนื่องจากวิธีการดังกล่าวอนุญาตให้ส่งแบบฟอร์มอื่นพร้อมค่าจากรูปแบบนี้
Andremoniy

7
คุณจะต้องเพิ่มตรรกะพิเศษเพื่อหลีกเลี่ยงการรวบรวมข้อมูลเหล่านี้ในการส่งแต่ละครั้ง
amos

คุณอาจต้องการลบองค์ประกอบอินพุตก่อนที่จะเพิ่มในกรณีที่มีอยู่แล้ว$(this).find("input[name="+"something"+"]").remove();
K Vij

42

ลองสิ่งนี้:

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

ฉันต้องการเพิ่มช่องไฟล์แบบไดนามิก ฉันลองใช้ type = file และค่าก็เป็นไฟล์ด้วย (ฉันใช้ WebKitDirectory ดังนั้นฉันจึงได้รับวัตถุไฟล์มา) แต่ดูเหมือนจะไม่ผ่านเลย ข้อความที่ป้อนจะถูกส่งผ่านเสมอ กรุณาช่วยฉันออกไป!
Swaathi Kakarla

คำตอบที่ฉันต้องการเนื่องจากใช้thisแทนการซ้ำซ้อน#form
rinogo



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")
    } 
});

ใช่ แต่ไม่มีการเปลี่ยนเส้นทางไปยังหน้าผลลัพธ์
omikron

3
สิ่งนี้ควรใช้งานได้: $('body').append(form); $(form).submit();
Jeff Lowery

นี่เป็นประโยชน์กับฉันมากที่สุดเพราะฉันมีฟิลด์ที่สร้างขึ้นจำนวนมากและฉันไม่ต้องการสร้างฟิลด์ที่ซ่อนอยู่สำหรับแต่ละฟิลด์
Sprachprofi

3

อาจมีประโยชน์สำหรับบางคน:

(ฟังก์ชันที่อนุญาตให้คุณเพิ่มข้อมูลลงในฟอร์มโดยใช้อ็อบเจกต์โดยมีการแทนที่สำหรับอินพุตที่มีอยู่ถ้ามี) [pure js]

(แบบฟอร์มคือ dom el ไม่ใช่วัตถุ 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")

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.