[javascript] JavaScript / jQuery로 양식 데이터를 얻으려면 어떻게해야합니까?

JAVASCRIPT / 글쓴이

고전적인 HTML 전용 방식으로 제출할 경우와 같이 양식의 데이터를 가져 오는 간단한 한 줄 방법이 있습니까?

예를 들면 다음과 같습니다.

<form>
    <input type="radio" name="foo" value="1" checked="checked" />
    <input type="radio" name="foo" value="0" />
    <input name="bar" value="xxx" />
    <select name="this">
        <option value="hi" selected="selected">Hi</option>
        <option value="ho">Ho</option>
</form>

산출:

{
    "foo": "1",
    "bar": "xxx",
    "this": "hi"
}

텍스트 영역, 선택, 라디오 버튼 및 확인란이 (올바르게) 포함되어 있지 않기 때문에 이와 같은 것은 너무 간단합니다.

$("#form input").each(function () {
    data[theFieldName] = theFieldValue;
});

답변

$('form').serialize() //this produces: "foo=1&bar=xxx&this=hi"

데모

답변

배열$('form').serializeArray() 을 반환하는 Use :

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

다른 옵션은 $('form').serialize()이며 문자열 을 반환 합니다 .

"foo=1&bar=xxx&this=hi"

이 jsfiddle 데모를 살펴보십시오

답변

2014 년 업데이트 된 답변 : HTML5 FormData 가이를 수행

var formData = new FormData(document.querySelector('form'))

그런 다음 formData를 그대로 게시 할 수 있습니다. 여기에는 양식에 사용 된 모든 이름과 값이 포함됩니다.

답변

에 따라 jQuery.serializeArray키-값 쌍을 반환합니다.

var data = $('#form').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});

답변

document.querySelector('form').addEventListener('submit', (e) => {
  const formData = new FormData(e.target);
  // Now you can use formData.get('foo'), for example.
  // Don't forget e.preventDefault() if you want to stop normal form .submission
});

이것은 별난 대답이지만 이것이 왜 더 나은 해결책인지 설명하겠습니다.

  • 우리는 버튼 누르기보다는 양식 제출을 올바르게 처리하고 있습니다. 어떤 사람들은 들판에 들어가기를 좋아합니다. 어떤 사람들은 음성 입력 또는 기타 접근성 장치와 같은 대체 입력 장치를 사용합니다. 양식 제출을 처리하면 모든 사람이 올바르게 해결할 수 있습니다.

  • 제출 된 실제 양식에 대한 양식 데이터를 파고 있습니다. 나중에 양식 선택기를 변경하면 모든 필드의 선택기를 변경할 필요가 없습니다. 또한 입력 이름이 동일한 여러 양식이있을 수 있습니다. 과도한 ID로 명확히 할 필요가 없으며 제출 된 양식을 기반으로 입력을 추적하기 만하면됩니다. 또한 상황에 적합한 경우 여러 양식에 단일 이벤트 핸들러를 사용할 수 있습니다.

  • FormData 인터페이스는 상당히 새롭지 만 브라우저에서 잘 지원됩니다. 양식에있는 것의 실제 값을 얻기 위해 해당 데이터 콜렉션을 빌드하는 좋은 방법입니다. 그것 없이는 (와 같은) 모든 요소를 ​​반복 form.elements하고 확인 된 것, 확인되지 않은 것, 값 등을 알아 내야합니다. 오래된 브라우저 지원이 필요하다면 완전히 가능하지만 FormData 인터페이스가 더 간단합니다.

  • ES6을 사용하고 있습니다 … 어떤 요구 사항도 없으므로 이전 브라우저 지원이 필요한 경우 ES5와 호환되도록 다시 변경하십시오.

답변

.serializeArray ()를 사용하여 데이터를 배열 형식으로 가져온 다음 객체로 변환하십시오.

function getFormObj(formId) {
    var formObj = {};
    var inputs = $('#'+formId).serializeArray();
    $.each(inputs, function (i, input) {
        formObj[input.name] = input.value;
    });
    return formObj;
}

답변

Jquery가 필요없는 정말 간단하고 짧은 솔루션입니다.

var formElements=document.getElementById("myForm").elements;
var postData={};
for (var i=0; i<formElements.length; i++)
    if (formElements[i].type!="submit")//we dont want to include the submit-buttom
        postData[formElements[i].name]=formElements[i].value;