jQuery serialize가 확인란을 등록하지 않음
양식의 모든 데이터 필드를 검색하기 위해 jQuery.serialize를 사용하고 있습니다.
문제는 선택하지 않은 체크박스가 검색되지 않는다는 것입니다.
여기에는 다음이 포함됩니다.
<input type="checkbox" id="event_allDay" name="event_allDay" class="checkbox" checked="checked" />
근데 이거 말고요
<input type="checkbox" id="event_allDay" name="event_allDay" class="checkbox" />
선택하지 않은 확인란의 "값"을 얻으려면 어떻게 해야 합니까?
아자토스의 천재적인 답을 바탕으로 시나리오를 약간 확장해 보았습니다.
/* Get input values from form */
values = jQuery("#myform").serializeArray();
/* Because serializeArray() ignores unset checkboxes and radio buttons: */
values = values.concat(
jQuery('#myform input[type=checkbox]:not(:checked)').map(
function() {
return {"name": this.name, "value": false}
}).get()
);
jQueryserialize요청에서 쿼리 문자열 또는 POST 본문에 추가되기 전에 브라우저가 표준 양식을 어떻게 직렬화할 것인지를 면밀히 모방합니다.선택하지 않은 확인란은 브라우저에 포함되지 않으므로 부울 상태이므로 사용자가 선택하거나(포함됨) 사용자가 선택하지 않는(포함되지 않음) 것이 좋습니다.
만약 당신이 그것이 연재물에 들어갈 필요가 있다면, 당신은 스스로에게 "왜? 데이터에 그것이 존재하는지 확인하는 것만 하지 않는가?"라고 물어야 합니다.
자바스크립트가 양식 데이터를 직렬화하는 방식이 브라우저의 방식과 다르게 동작하는 경우 양식에 대한 우아한 저하의 가능성을 제거할 수 있습니다.그래도 꼭 해야 할 일이 있다면 그냥 a를 사용하세요.<select>Yes/No를 옵션으로 선택할 수 있는 상자입니다.적어도 JS가 비활성화된 사용자는 사이트에서 소외되지 않으며 HTML 사양에 정의된 동작을 위반하지 않습니다.
<select id="event_allDay" name="event_allDay">
<option value="0" selected>No</option>
<option value="1">Yes</option>
</select>
저는 과거에 몇몇 사이트에서 이것이 사용되는 것을 보고 "그들은 왜 그냥 체크박스를 사용하지 않을까?"라는 생각을 항상 했습니다.
serialize는 쿼리 문자열로 사용되어야 하기 때문에 그렇지 않습니다. 그런 맥락에서 확인되지 않았다는 것은 쿼리 문자열에 전혀 없음을 의미합니다.
선택하지 않은 확인란의 값을 가져오려면 다음을 사용합니다. (untested off course)
var arr_unchecked_values = $('input[type=checkbox]:not(:checked)').map(function(){return this.value}).get();
쿼리 문자열에 serialize되지 않은 확인란을 추가하려면 jquery submit 함수에 다음을 추가합니다.
var moreinfo = '';
$('input[type=checkbox]').each(function() {
if (!this.checked) {
moreinfo += '&'+this.name+'=0';
}
});
jQuery serialize는 입력의 값 속성을 가져옵니다.
이제 확인란과 라디오 버튼을 작동시키는 방법은?확인란 또는 라디오 버튼 0 또는 1의 클릭 이벤트를 설정하면 변경 사항을 확인할 수 있습니다.
$( "#myform input[type='checkbox']" ).on( "click", function(){
if ($(this).prop('checked')){
$(this).attr('value', 1);
} else {
$(this).attr('value', 0);
}
});
values = $("#myform").serializeArray();
또한 언제든지 체크된 상태로 체크 박스를 설정하고 싶을 때, 예를 들어 php.
<input type='checkbox' value="<?php echo $product['check']; ?>" checked="<?php echo $product['check']; ?>" />
전화하셔도 됩니다.handleInputs()ajax 앞에 submit function을 추가합니다.
function handleInputs(){
$('input[type=checkbox]').each(function() {
if (!this.checked) {
$(this).attr("value","0");
}else{
$(this).attr("value","1");
}
});
}
그것은 완벽하게 작동합니다.
여기에 "직렬화"를 확장하는 또 다른 솔루션이 있습니다.배열" 메서드(원래 동작을 유지하면서).
//Store the reference to the original method:
var _serializeArray = $ji.fn.serializeArray;
//Now extend it with newer "unchecked checkbox" functionality:
$ji.fn.extend({
serializeArray: function () {
//Important: Get the results as you normally would...
var results = _serializeArray.call(this);
//Now, find all the checkboxes and append their "checked" state to the results.
this.find('input[type=checkbox]').each(function (id, item) {
var $item = $ji(item);
var item_value = $item.is(":checked") ? 1 : 0;
var item_name = $item.attr('name');
var result_index = null;
results.each(function (data, index) {
if (data.name == item_name) {
result_index = index;
}
});
if (result_index != null) {
// FOUND replace previous value
results[result_index].value = item_value;
}
else {
// NO value has been found add new one
results.push({name: item_name, value: item_value});
}
});
return results;
}
});
이렇게 하면 실제로 "true" 또는 "false" 부울 결과가 추가되지만, 원하는 경우 값을 다음과 같이 변경하여 "1"과 "0"을 각각 사용할 수 있습니다.value: $item.is(":checked") ? 1 : 0.
사용.
평소와 마찬가지로 양식에 메소드를 호출합니다.$form.serialize()아니면$form.serializeArray(). 무슨 일이 일어나냐 하면serialize을 이용한serializeArray어쨌든 호출하는 방법에 따라 적절한 결과(형식은 다르지만)를 얻을 수 있습니다.
제가 사용한 기술은 스트러츠가 사용하는 것으로 알고 있는데, 그 기술은...
<input type="hidden" name="_fieldname" value="fieldvalue"/>
...immedi는 내 양식 작성 로직의 일부로 확인란 옆에 있습니다.
이를 통해 양식으로 제공되었지만 선택되지 않은 확인란을 재구성할 수 있습니다. 제공된 것과 확인된 것을 수행하기 위해 약간의 추가 논리를 사용하여 선택되지 않은 확인란을 재구성할 수 있습니다.제출 내용 역시 HTML이나 AJAX 스타일의 제출을 사용하든 상관없이 동일합니다.
서버측에서 사용하는 기술에 따라 이 구문을 사용할 수도 있습니다.
<input type="hidden" name="_fieldname[]" value="fieldvalue"/>
...이러한 가치를 목록으로 쉽게 파악할 수 있습니다.
방법은 양식 게시물을 가로채어 숨겨진 입력 필드로 확인란을 변경하는 것입니다.
예: 일반 제출
$('form').on("submit", function (e) {
//find the checkboxes
var $checkboxes = $(this).find('input[type=checkbox]');
//loop through the checkboxes and change to hidden fields
$checkboxes.each(function() {
if ($(this)[0].checked) {
$(this).attr('type', 'hidden');
$(this).val(1);
} else {
$(this).attr('type', 'hidden');
$(this).val(0);
}
});
});
예: AJAX
UI를 업데이트하지 않기 위해 ajax를 통해 양식을 게시하는 경우 몇 번의 후프를 더 통과해야 합니다.
$('form').on("submit", function (e) {
e.preventDefault();
//clone the form, we don't want this to impact the ui
var $form = $('form').clone();
//find the checkboxes
var $checkboxes = $form.find('input[type=checkbox]');
//loop through the checkboxes and change to hidden fields
$checkboxes.each(function() {
if ($(this)[0].checked) {
$(this).attr('type', 'hidden');
$(this).val(1);
} else {
$(this).attr('type', 'hidden');
$(this).val(0);
}
});
$.post("/your/path", $form.serialize());
ASP의 경우.NET MVC, 우리는 AJAX POST를 통해 @Jecoms 제안을 포함하여 이 게시물에서 참조된 여러 방법의 조합인 다음과 같은 체크박스가 있는 양식을 성공적으로 저장합니다.
var form = $('#myForm');
// Serialize the form into a JavaScript object using the jQuery.serializeObject plugin
// https://plugins.jquery.com/serializeObject/
var data = form.serializeObject();
// Change the submitted value of checkboxes to the value of the checked property
$('#myForm input[type=checkbox]').each( function () { data[this.name] = this.checked; } );
// For a MVC controller, convert the JS object back into a query string using jQuery.param function
data = $.param(data);
// Perform AJAX POST with the form data
$.ajax({
async: true,
url: 'mvcActionMethodURL',
type: 'POST',
data: data,
success: function (data, textStatus, xhr) {
},
error: function (xhr, status, error) {
}
});
질문이나 현재 답변에서 다루지 않는 비표준 확인란 직렬화를 사용하는 한 가지 이유는 직렬화된 데이터에 명시적으로 지정된 필드만 역직렬화(변경)하기 위해서입니다. 예를 들어 쿠키에서 jquery 직렬화 및 역직렬화를 사용하여 기본 설정을 저장하고 로드할 때입니다.
토마스 데네마르는 표준에 대한 수정을 시행했습니다.serialize()선택적으로 a를 취하는 방법checkboxesAsBools옵션: http://tdanemar.wordpress.com/2010/08/24/jquery-serialize-method-and-checkboxes/ - 이는 @mydoghasworms에 의해 위에 나열된 구현과 유사하지만 표준 직렬화에 통합되어 있습니다.
언제든지 개선할 사항이 있을 경우를 대비하여 Github에 복사했습니다. https://gist.github.com/1572512
또한 "jquery.deserialize" 플러그인은 이제 다음과 같이 직렬화된 체크박스 값을 올바르게 역직렬화합니다.checkboxesAsBools, 그리고 직렬화된 데이터에 언급되지 않은 확인란 https://github.com/itsadok/jquery.deserialize 을 무시합니다.
var checkboxes = $('#myform').find('input[type="checkbox"]');
$.each( checkboxes, function( key, value ) {
if (value.checked === false) {
value.value = 0;
} else {
value.value = 1;
}
$(value).attr('type', 'hidden');
});
$('#myform').serialize();
이렇게 하면 선택한 상태를 사용하여 양식 확인란 값이 부울로 설정됩니다.
var form = $('#myForm');
var data = form.serializeObject();
$('#myForm input[type=checkbox]').each(function() { data[this.name] = this.checked; });
우리가 사용하는 프레임워크는 이름이 같은 두 개의 입력을 생성하므로 양식을 직렬화할 때 예상치 못한 동작이 발생합니다.저는 각 체크박스 값을 문자열 값이 있는 2요소 배열로 파싱할 것입니다.데이터 서버 측을 매핑하는 방법에 따라 의도하지 않은 결과가 발생할 수 있습니다.
Andy가 제안한 대로 선택 필드를 사용하는 것이 사용자 환경에 가장 적합한 옵션은 아닙니다. 한 번의 마우스 클릭 대신 두 번의 마우스 클릭이 필요하기 때문입니다.
또한 "선택"은 확인란보다 UI의 공간을 훨씬 더 많이 사용합니다.
Ash의 대답은 간단한 솔루션이지만 배열 필드의 경우에는 작동하지 않습니다.
제 상황에서는 텍스트와 확인란 필드가 혼재된 행을 표시하는 가변 길이 양식을 사용합니다.
<input type="checkbox" value="1" name="thisIsAChkArray[]"/>
<input type="text" value="" name="thisIsATxtArray[]"/>
게시된 데이터를 디코딩하려면 배열 요소의 순서가 중요합니다.체크되지 않은 항목을 일반 Jquery serialize에 추가한다고 해서 행 요소의 순서가 유지되지는 않습니다.
Ash의 답변을 바탕으로 제안된 해결책은 다음과 같습니다.
(function($) {
$.fn.serializeWithChkBox = function() {
// perform a serialize form the non-checkbox fields
var values = $(this).find('select')
.add( $(this).find('input[type!=checkbox]') )
.serialize();
// add values for checked and unchecked checkboxes fields
$(this).find('input[type=checkbox]').each(function() {
var chkVal = $(this).is(':checked') ? $(this).val() : "0";
values += "&" + $(this).attr('name') + "=" + chkVal;
});
return values;
}
})(jQuery);
저도 비슷한 문제가 있었는데 아래와 같이 모든 양식 입력값을 수집할 수 있게 했고 체크박스를 선택/선택하지 않았습니다.
var serialized = this.$('#myform input').map(function() {
return { name: this.name, id: this.id, value: this.checked ? "checked" : "false" };
});
이 예에서는 다음을 통해 양식을 게시하는 경우를 가정합니다.serialize 안 돼요.serializeArray, 체크박스를 선택하지 않은 것은false:
var form = $(formSelector);
var postData = form.serialize();
var checkBoxData = form.find('input[type=checkbox]:not(:checked)').map(function () {
return encodeURIComponent(this.name) + '=' + false;
}).get().join('&');
if (checkBoxData) {
postData += "&" + checkBoxData;
}
$.post(action, postData);
를 사용하는 사람들을 위해.serialize()함수:
(function ($) {
var serialize = $.fn.serialize;
$.fn.serialize = function () {
let values = serialize.call(this);
let checkboxes = [];
checkboxes = checkboxes.concat(
$('input[type=checkbox]:not(:checked)', this).map(
function () {
return this.name + '=false';
}).get()
);
if(checkboxes.length > 0)
values = checkboxes.join('&') + '&' + values;
return values;
};
})(jQuery);
때때로 선택되지 않은 것은 다른 값을 의미합니다. 예를 들어 선택된 것은 선택되지 않은 예 또는 0,1을 의미할 수 있습니다. 그것은 당신이 제공하고 싶은 의미에 따라 다릅니다.따라서 "unchecked는 쿼리 문자열에 전혀 없음을 의미합니다." 이외의 다른 상태일 수 있습니다.
"DB에 정보를 저장하는 것이 훨씬 쉬워질 것입니다.그러면 Serialize의 필드 수가 테이블의 필드 수와 같아지기 때문입니다.이제 어느 것이 빠졌는지 조절해야 합니다." 당신 말이 맞아요, 이것도 저의 문제입니다.그래서 존재하지 않는 이 값을 확인해야 하는 것 같습니다.
하지만 이게 해결책이 될 수도 있을까요?http://tdanemar.wordpress.com/2010/08/24/jquery-serialize-method-and-checkboxes/
숨김 입력만 추가하면 됩니다.
<input type="hidden" name="your_specific_name">
가치는 필요 없어요. 저는 이것이 저를 위해 효과가 있는지 테스트했습니다.
jquery serialize로 입력 값을 얻을 수 있습니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="event_allDay" name="event_allDay" checked="checked" onchange="isChecked(this)" value="" />
<script>
function isChecked(element) {
$(element).val($(element).is(':checked').toString());
}
isChecked('#event_allDay');
</script>위의 답변을 좀 더 자세히 설명해 드리자면, 제 경우에는 백엔드 캐치에 직렬화된 단일 ID에 대해 예/아니오를 전송하도록 요구했습니다.
특정 데이터베이스 열의 ID를 포함하도록 확인란 요소를 설정했습니다(기본값으로 선택됨).
(라벨 블레이드)
<div class="checkbox">
<label>
<input type="checkbox" value="{{ $heading->id }}" checked> {{ $heading->name }}
</label>
</div>
제출할 때 다음과 같은 내용으로 데이터를 수집했습니다.
(jQuery)
let form = $('#formID input[type="checkbox"]').map(function() {
return { id: this.value, value: this.checked ? 1 : 0 };
}).get();
var data = JSON.stringify(form);
$.post( "/your/endpoint", data );
이 방법을 사용하여 "0" 값을 얻었거나 "1"을 선택한 경우.확인란 입력 이름이 serialized에 존재하지 않는 경우 이를 알려줍니다.form_data확인되지 않은 상태에서 0으로 값을 추가합니다).form_data += '&' + name + '=0'), 그러나 확인된 경우serialize()함수가 자동으로 추가됩니다.
/*get all other form inputs*/
var form_data = form.serialize();
/*get checkboxes*/
$.each($("#form_id input[type='checkbox']"), function(){
var name = $(this).attr('name');
if(form_data.indexOf(name)===-1)form_data += '&' + name + '=0';
});
저는 제게 맞는 다른 방법을 사용하고 있습니다.
양식 데이터 직렬화(위에서 지정한 대로 선택 취소된 확인란의 값이 제외됨):
const formData = $("form[name='config']").serialize();
const data = {
config: formData
}
그런 다음 PHP에서 JSON 객체를 만들고 있습니다.
parse_str($_REQUEST['config'], $configJSON);
$configJSON = json_encode($configJSON);
그리고 MSSQL에서는 JSON에서 열이 누락되었을 때(jquery serialization에 의해 필터링되었기 때문에) 저장 프로시저에서 NULL이 되므로 0으로 대체됩니다(덕분에).ISNULL :수) :
ALTER PROCEDURE [dbo].[eth_userprofil_updateconfig]
(
@userId int,
@configJSON nvarchar(max)
)
AS
BEGIN
SET NOCOUNT ON;
UPDATE dbo.MyTable
SET MyField = ISNULL(JSON_VALUE(@configJSON, '$.MyField '), 0),
....
WHERE userId = @userId
END
제출 이벤트에서 양식 내부의 전체 요소를 가져오면 이렇게 시도할 수도 있습니다.
$('#formId').submit((e) => {
e.preventDefault()
var data = $(e.target).serializeArray();
Array.from(e.target.elements).filter((e) => e.type == 'checkbox').forEach((v) => {
if(!v.checked)
data.push({ name: v.name, value: v.checked})
})
//ajax call and use the data as the body.
})
시도해 보기:
$(::input[type="checkbox"]:checked').map(함수 () {return this.value}).get ();
언급URL : https://stackoverflow.com/questions/3029870/jquery-serialize-does-not-register-checkboxes
'programing' 카테고리의 다른 글
| 깃 저장소를 다른 디렉터리로 이동하고 해당 디렉터리를 깃 저장소로 만드는 방법? (0) | 2023.10.18 |
|---|---|
| C의 버퍼에 텍스트 파일을 읽는 올바른 방법은? (0) | 2023.10.18 |
| 프로젝트가 없습니다. json, global.json...등에NET Core 솔루션 with Visual Studio 2017 (0) | 2023.10.18 |
| ASP에서 데이터 그리드와 그리드 뷰의 차이.NET? (0) | 2023.10.18 |
| 데카르트 제품을 피하기 위해 SQL View 최적화 (0) | 2023.10.18 |