Làm thế nào để thêm các trường bổ sung vào biểu mẫu trước khi gửi?


111

Có cách nào sử dụng javascript và JQuery để thêm một số trường bổ sung được gửi từ biểu mẫu HTTP bằng POST không?

Ý tôi là:

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

Câu trả lời:


161

Có. Bạn có thể thử với một số thông số ẩn.

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

30
.appendTo(this)có lẽ sẽ tốt hơn.
jcuenod

4
@jcuenod original appendTo('#form')thì tốt hơn nhiều, vì cách tiếp cận như vậy cho phép gửi một biểu mẫu khác với các giá trị từ biểu mẫu này.
Andremoniy

7
Bạn sẽ phải thêm một số logic bổ sung để tránh tích lũy những đầu vào này với mỗi lần gửi.
amos

Có thể bạn sẽ muốn xóa phần tử đầu vào trước khi thêm nó trong trường hợp nó đã tồn tại$(this).find("input[name="+"something"+"]").remove();
K Vij

42

Thử cái này:

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

Tôi cần thêm một trường tệp động. Tôi đã thử có type = file và giá trị cũng là tệp (tôi đang sử dụng WebKitDirectory, vì vậy tôi thực sự nhận được các đối tượng tệp), tuy nhiên nó dường như không bao giờ vượt qua nó. Mặc dù vậy, văn bản đầu vào luôn được thông qua. Hãy giúp tôi ra!
Swaathi Kakarla

Câu trả lời ưa thích của tôi do sử dụng thisthay vì dư thừa#form
rinogo

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

10

Bạn có thể thêm một hidden inputvới bất kỳ giá trị nào bạn cần gửi:

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

5

Những công việc này:

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

Vâng, nhưng không có chuyển hướng đến trang kết quả.
omikron

3
điều này sẽ hoạt động: $('body').append(form); $(form).submit();
Jeff Lowery

Điều này là hữu ích nhất đối với tôi, vì tôi có một số lượng lớn các trường đã tạo và tôi không muốn tạo các trường ẩn cho mỗi trường.
Sprachprofi

Tại sao không @Sprachprofi?
Displee

3

Có thể hữu ích cho một số:

(một hàm cho phép bạn thêm dữ liệu vào biểu mẫu bằng cách sử dụng một đối tượng, có ghi đè cho các đầu vào hiện có, nếu có) [pure js]

(biểu mẫu là dom el chứ không phải đối tượng jquery [ jqryobj.get (0) nếu bạn cần ])

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

Sử dụng :

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

bạn cũng có thể sử dụng nó như vậy

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

bạn có thể thêm # nếu bạn thích ("#myformid").

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.