제출하기 전에 양식에 추가 필드를 추가하는 방법은 무엇입니까?


111

javascript 및 JQuery를 사용하여 POST를 사용하여 HTTP 양식에서 보낼 추가 필드를 추가하는 방법이 있습니까?

내말은:

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

답변:


161

예. 숨겨진 매개 변수로 시도해 볼 수 있습니다.

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

30
.appendTo(this)아마 더 좋을 것입니다.
jcuenod 2015-06-12

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 2015

때문에 사용에 내 원하는 대답 this대신 중복의이#form
rinogo

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

10

hidden input보내야하는 값으로를 추가 할 수 있습니다 .

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

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

@Sprachprofi가 아닌 이유는 무엇입니까?
Displee

3

일부에 유용 할 수 있습니다.

(있는 경우 기존 입력에 대한 재정의와 함께 객체를 사용하여 양식에 데이터를 추가 할 수있는 함수) [순수 js]

(form은 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.