jQuery를 사용하여 양식 입력 필드를 가져오시겠습니까?
입력 필드가 많은 폼이 있습니다.
jQuery에서 submit form 이벤트를 수신하면 해당 양식의 입력 필드를 모두 연관 배열로 가져올 수 있습니까?
$('#myForm').submit(function() {
// get all the inputs into an array.
var $inputs = $('#myForm :input');
// not sure if you wanted this, but I thought I'd add it.
// get an associative array of just the values.
var values = {};
$inputs.each(function() {
values[this.name] = $(this).val();
});
});
Simon_Weaver의 조언에 따라 다음을 사용하여 수행할 수 있는 다른 방법이 있습니다.
var values = {};
$.each($('#myForm').serializeArray(), function(i, field) {
values[field.name] = field.value;
});
, 이 은 이et음음음 note note음음음 note note note note note note note note note note note note note note note note note note 。<select multiple>★★★★★★★★★★★★★★★★★★.
새로운 HTML 5 양식 입력이 다음 웹 사이트에서 작동하지 않는 것 같습니다.serializeArrayj의 Query 버 1 . 3 。버전 1.4에서는 동작합니다.
파티에는 늦었지만, 이것은 훨씬 더 쉽다.
$('#myForm').submit(function() {
// Get all the forms elements and their values in one step
var values = $(this).serialize();
});
jquery.form 플러그인은 다른 사람이 찾고 있는 이 질문에 도움이 될 수 있습니다.그게 당신이 원하는 대로 되는 건지 아닌지는 잘 모르겠어요.
때때로 나는 한 번에 하나씩 사는 것이 더 유용하다고 생각한다.그러기 위해서는, 다음과 같은 것이 있습니다.
var input_name = "firstname";
var input = $("#form_id :input[name='"+input_name+"']");
$('#myForm').bind('submit', function () {
var elements = this.elements;
});요소 변수에는 양식 내의 모든 입력, 선택, 텍스트 영역 및 필드 세트가 포함됩니다.
여기 또 다른 해결책이 있습니다.이러한 방법으로 폼에 관한 모든 데이터를 가져와 서버사이드 호출 등에서 사용할 수 있습니다.
$('.form').on('submit', function( e )){
var form = $( this ), // this will resolve to the form submitted
action = form.attr( 'action' ),
type = form.attr( 'method' ),
data = {};
// Make sure you use the 'name' field on the inputs you want to grab.
form.find( '[name]' ).each( function( i , v ){
var input = $( this ), // resolves to current input element.
name = input.attr( 'name' ),
value = input.val();
data[name] = value;
});
// Code which makes use of 'data'.
e.preventDefault();
}
다음으로 Ajax 콜과 함께 사용할 수 있습니다.
function sendRequest(action, type, data) {
$.ajax({
url: action,
type: type,
data: data
})
.done(function( returnedHtml ) {
$( "#responseDiv" ).append( returnedHtml );
})
.fail(function() {
$( "#responseDiv" ).append( "This failed" );
});
}
이것이 여러분 모두에게 도움이 되기를 바랍니다.
약간 뒤틀린 비슷한 문제가 있어서 이걸 버려야겠다고 생각했어요.폼가 이미 폼 오브젝트를 쉽게 수 $('form:input')대신 생각해낸 건
var dataValues = {};
form.find('input').each(
function(unusedIndex, child) {
dataValues[child.name] = child.value;
});
비슷하지만 동일하지는 않지만, 이 실이 매우 유용하다는 것을 알았고, 이것을 마지막으로 접어 다른 사람이 유용하게 사용하길 바랍니다.
http://api.jquery.com/serializearray/
$('#form').on('submit', function() {
var data = $(this).serializeArray();
});
이 작업은 XMLHttpRequest Level 2 FormData 개체를 사용하여 jQuery 없이 수행할 수도 있습니다.
http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/ #폼데이터 인터페이스
var data = new FormData([form])
이 코드는 이름 대신 작동합니다. 이메일에서 양식 필드 이름을 입력하십시오.
$(document).ready(function(){
$("#form_id").submit(function(event){
event.preventDefault();
var name = $("input[name='name']",this).val();
var email = $("input[name='email']",this).val();
});
});
연상?작업이 필요하지는 않지만 일반 선택기를 사용할 수 있습니다.
var items = new Array();
$('#form_id:input').each(function (el) {
items[el.name] = el;
});
jQuery'sserializeArray필드가 않으므로 할 경우 과 같이 시도해 따라서 비활성 필드도 필요한 경우 다음 절차를 수행합니다.
var data = {};
$('form.my-form').find('input, textarea, select').each(function(i, field) {
data[field.name] = field.value;
});
체크박스와 라디오 버튼을 잊지 마세요.
var inputs = $("#myForm :input");
var obj = $.map(inputs, function(n, i) {
var o = {};
if (n.type == "radio" || n.type == "checkbox")
o[n.id] = $(n).attr("checked");
else
o[n.id] = $(n).val();
return o;
});
return obj
아무도 목록 데이터를 얻기 위한 간결한 해결책을 제안하거나 상향투표를 하지 않은 것이 이상하다.어떤 형태도 단차원 물체가 될 수 없습니다.
이 솔루션의 단점은 물론 싱글톤 오브젝트에 [0]인덱스로 액세스해야 한다는 것입니다.하지만 IMO는 십여 줄의 매핑 솔루션 중 하나를 사용하는 것보다 훨씬 낫습니다.
var formData = $('#formId').serializeArray().reduce(function (obj, item) {
if (obj[item.name] == null) {
obj[item.name] = [];
}
obj[item.name].push(item.value);
return obj;
}, {});
나는 같은 문제를 안고 다른 방법으로 해결했다.
var arr = new Array();
$(':input').each(function() {
arr.push($(this).val());
});
arr;
이치 바꿀 수 있어요.$(':input')좀 더 구체적으로 말하면.
nickf에서 제공하는 솔루션과 동일하지만 어레이 입력명을 고려했습니다.
<input type="text" name="array[]" />
values = {};
$("#something :input").each(function() {
if (this.name.search(/\[\]/) > 0) //search for [] in name
{
if (typeof values[this.name] != "undefined") {
values[this.name] = values[this.name].concat([$(this).val()])
} else {
values[this.name] = [$(this).val()];
}
} else {
values[this.name] = $(this).val();
}
});
이것이 도움이 되고 쉬운 것이기를 바랍니다.
$("#form").submit(function (e) {
e.preventDefault();
input_values = $(this).serializeArray();
});
$("#form-id").submit(function (e) {
e.preventDefault();
inputs={};
input_serialized = $(this).serializeArray();
input_serialized.forEach(field => {
inputs[field.name] = field.value;
})
console.log(inputs)
});
입력에서 여러 값을 가져와야 하는 경우 []를 사용하여 여러 값을 가진 입력을 정의하는 경우 다음을 사용할 수 있습니다.
$('#contentform').find('input, textarea, select').each(function(x, field) {
if (field.name) {
if (field.name.indexOf('[]')>0) {
if (!$.isArray(data[field.name])) {
data[field.name]=new Array();
}
data[field.name].push(field.value);
} else {
data[field.name]=field.value;
}
}
});
Lance Rushing과 Simon_Weaver의 답변에서 영감을 얻은 이 솔루션은 제가 가장 좋아하는 솔루션입니다.
$('#myForm').submit( function( event ) {
var values = $(this).serializeArray();
// In my case, I need to fetch these data before custom actions
event.preventDefault();
});
출력은 객체 배열입니다.
[{name: "start-time", value: "11:01"}, {name: "end-time", value: "11:11"}]
아래 코드와 함께
var inputs = {};
$.each(values, function(k, v){
inputs[v.name]= v.value;
});
최종 산출물은
{"start-time":"11:01", "end-time":"11:01"}
각 루프를 사용하지 않고 다음 코드를 사용하고 있습니다.
$('.subscribe-form').submit(function(e){
var arr=$(this).serializeArray();
var values={};
for(i in arr){values[arr[i]['name']]=arr[i]['value']}
console.log(values);
return false;
});
요소 「」)의 .<select multiple="multiple">@Jason Norwood-Young @Jason Norwood-Young.
답변(게시된 대로)은 선택한 첫 번째 요소의 값만 가져오고 모든 요소의 값은 가져오지 않습니다.또한 초기화 또는 반환되지 않았습니다.data자바스크립트 에러를 투척하고 있습니다.
새로운 버전은 다음과 같습니다.
function _get_values(form) {
let data = {};
$(form).find('input, textarea, select').each(function(x, field) {
if (field.name) {
if (field.name.indexOf('[]') > 0) {
if (!$.isArray(data[field.name])) {
data[field.name] = new Array();
}
for (let i = 0; i < field.selectedOptions.length; i++) {
data[field.name].push(field.selectedOptions[i].value);
}
} else {
data[field.name] = field.value;
}
}
});
return data
}
사용방법:
_get_values($('#form'))
하다: 하다, 하다, 하다, 하다, 하면 됩니다.name하신 것 중 ""가 있습니다.[]예를 들어 다음과 같이 입력합니다.
<select name="favorite_colors[]" multiple="multiple">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
모든 폼필드에서 ajax 콜을 실행해야 할 때 :input selector가 체크박스를 모두 반환하는 데 문제가 있었습니다.제출 가능한 폼 요소만 가져오기 위해 새 셀렉터를 추가했습니다.
$.extend($.expr[':'],{
submitable: function(a){
if($(a).is(':checkbox:not(:checked)'))
{
return false;
}
else if($(a).is(':input'))
{
return true;
}
else
{
return false;
}
}
});
사용방법:
$('#form_id :submitable');
아직 여러 개의 선택 상자를 사용하여 테스트한 적은 없지만 표준 제출 방식으로 모든 양식 필드를 가져올 수 있습니다.
OpenCart 사이트에서 제품 옵션을 커스터마이즈할 때 표준 선택 상자 유형뿐만 아니라 체크박스와 텍스트 필드도 포함되도록 했습니다.
serialize()는 최적의 메서드입니다.@ Christopher Parker는 Nickf의 anwser가 더 많은 것을 할 수 있지만, 텍스트 영역과 선택 메뉴를 폼에 포함할 수 있다는 것은 고려하지 않았다고 말한다.serialize()를 사용하여 필요에 따라 조작하는 것이 훨씬 좋습니다.serialize()의 데이터는 Ajax post 또는 get에서 사용할 수 있으므로 문제가 없습니다.
이게 도움이 됐으면 좋겠네요.:)
// This html:
// <form id="someCoolForm">
// <input type="text" class="form-control" name="username" value="...." />
//
// <input type="text" class="form-control" name="profile.first_name" value="...." />
// <input type="text" class="form-control" name="profile.last_name" value="...." />
//
// <input type="text" class="form-control" name="emails[]" value="..." />
// <input type="text" class="form-control" name="emails[]" value=".." />
// <input type="text" class="form-control" name="emails[]" value="." />
// </form>
//
// With this js:
//
// var form1 = parseForm($('#someCoolForm'));
// console.log(form1);
//
// Will output something like:
// {
// username: "test2"
// emails:
// 0: ".@....com"
// 1: "...@........com"
// profile: Object
// first_name: "..."
// last_name: "..."
// }
//
// So, function below:
var parseForm = function (form) {
var formdata = form.serializeArray();
var data = {};
_.each(formdata, function (element) {
var value = _.values(element);
// Parsing field arrays.
if (value[0].indexOf('[]') > 0) {
var key = value[0].replace('[]', '');
if (!data[key])
data[key] = [];
data[value[0].replace('[]', '')].push(value[1]);
} else
// Parsing nested objects.
if (value[0].indexOf('.') > 0) {
var parent = value[0].substring(0, value[0].indexOf("."));
var child = value[0].substring(value[0].lastIndexOf(".") + 1);
if (!data[parent])
data[parent] = {};
data[parent][child] = value[1];
} else {
data[value[0]] = value[1];
}
});
return data;
};
모든 답변은 좋지만, 그 기능에서 무시하고 싶은 분야가 있다면?필드에 속성을 지정합니다(예: ignore_this).
<input type="text" name="some_name" ignore_this>
시리얼라이즈 기능:
if(!$(name).prop('ignorar')){
do_your_thing;
}
일부 필드를 무시하는 방법입니다.
다음 코드를 사용해 보십시오.
jQuery("#form").serializeArray().filter(obje =>
obje.value!='').map(aobj=>aobj.name+"="+aobj.value).join("&")
언급URL : https://stackoverflow.com/questions/169506/obtain-form-input-fields-using-jquery
'programing' 카테고리의 다른 글
| Java에서 휘발성과 동기화의 차이 (0) | 2023.01.04 |
|---|---|
| Maria에서 느린 업데이트, 삭제 및 쿼리 삽입DB (0) | 2023.01.04 |
| 문자열에서 동일한 UUID를 생성할 수 있는 방법이 있습니까? (0) | 2023.01.04 |
| JavaScript에서 객체에 키가 있는지 확인하려면 어떻게 해야 합니까? (0) | 2023.01.04 |
| 내림차순으로 Python 목록 정렬 (0) | 2022.12.30 |