jQuery serializeArray가 클릭 한 제출 버튼을 포함하지 않습니다.
두 개의 버튼이있는 양식이 있습니다. 하나는 레코드 저장 용이고 다른 하나는 저장 절차를 취소하기위한 것입니다. 내가 사용하고 rails.js (/ jQuery를 플러그인하지 알고있는 당신의 그것들을 위해 공통 AJAX)를 자바 스크립트 파일이 눈에 거슬리지 자바 스크립트 / 아약스 통화 jQuery로 작동합니다. ajax를 통해 양식 데이터를 보낼 때 클릭 한 버튼의 이름과 값을 나머지 데이터와 함께 제출하여 어떤 버튼을 클릭했는지에 따라 수행 할 작업을 결정할 수 있기를 원합니다.
rails.js파일 의 메서드는 .serializeArray()양식 데이터를 서버로 보내는 데 사용 합니다. 문제는 내가 클릭 한 버튼의 이름 / 값 쌍이 여기에 포함되지 않는다는 것입니다. jQuery의 웹 사이트는 그들이 의도적으로 이것을 수행한다고 말합니다 (내 생각에는 그래야 함에도 불구하고) :
"이 .serializeArray()메서드는 성공적인 컨트롤 에 대한 표준 W3C 규칙을 사용하여 포함해야하는 요소를 결정합니다. 특히 요소를 비활성화 할 수없고 이름 속성을 포함해야합니다. 양식이 단추를 사용하여 제출되지 않았으므로 제출 단추 값이 직렬화되지 않습니다."
양식이 버튼을 사용하여 제출되지 않았다고 어떻게 가정 할 수 있습니까? 이것은 말이 안되고 잘못된 가정이라고 믿습니다.
W3C 규칙에 따라 양식 제출을 위해 활성화 된 버튼은 성공적인 컨트롤 로 간주됩니다 .
jQuery 개발자가 의도적으로 이것을하기로 결정했기 때문에 직렬화에서 활성화 된 버튼을 제외 하지 않는 또 다른 방법이 있다고 가정 할 수 있습니까?
편집 : 다음은 내 양식이 어떻게 생겼는지에 대한 간단한 예입니다.
<!DOCTYPE html5>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#form').submit(function(e) {
// put your breakpoint here to look at e
var x = 0;
});
});
</script>
</head>
<body>
<form id="form">
<input name="name" type="text"><br/>
<input name="commit" type="submit" value="Save"/>
<input name="commit" type="submit" value="Cancel"/>
</form>
</body>
그렇지 않습니다. 동작은 버튼이 아니라 의submit 이벤트 를 기반으로합니다 ( 예 : Enter 키를 누르거나 JavaScript에서 호출) . 현재이 개념을 혼합하고하는 거나 또는이있을 수도 있고 없을 수도 있습니다 아무것도 버튼 클릭으로 할를 - 그것은 모두, 그들이 연결되지 않은 단지 별도의 이벤트입니다. 이 메서드는 그보다 더 높은 수준에 있습니다. 어떤 이유로 든 언제든지 양식 (또는 그 하위 집합)을 직렬화 할 수 있습니다.<form>.submit().serialize().serializeArray()
그러나 예를 들어 버튼에서 제출하는 경우 해당 버튼에서 제출하는 일반 양식과 같이 제출 이름 / 값 쌍을 추가 할 수 있습니다.
$("#mySubmit").click(function() {
var formData = $(this).closest('form').serializeArray();
formData.push({ name: this.name, value: this.value });
//now use formData, it includes the submit button
});
다음 스 니펫을 사용하여 기본적으로 동일한 이름의 숨겨진 요소를 추가합니다.
var form = $("form");
$(":submit",form).click(function(){
if($(this).attr('name')) {
$(form).append(
$("<input type='hidden'>").attr( {
name: $(this).attr('name'),
value: $(this).attr('value') })
);
}
});
$(form).submit(function(){
console.log($(this).serializeArray());
});
This solution is 'universal' as in it will handle all your input submits, passing each as a form variable on submission.
$(document).ready(function(){
$('input:submit').each(function(){
$(this).click(function(){
var formData = $(this).closest('form').serializeArray();
formData.push({ name: $(this).attr('name'), value: $(this).val() });
});
});
});
fairly neat way to solve this:
<form>
<input type="hidden" name="stuff" value="">
<button type="submit" onclick="this.form.stuff.value=this.value" value="reset">reset</button>
<button type="submit" onclick="this.form.stuff.value=this.value" value="delete">delete</button>
</form>
var form = button.closest('form');
var serialize = form.serialize();
if (button.attr('name') !== undefined) {
serialize += '&'+button.attr('name')+'=';
}
ReferenceURL : https://stackoverflow.com/questions/4007942/jquery-serializearray-doesnt-include-the-submit-button-that-was-clicked
'Programing' 카테고리의 다른 글
| UIImagePickerController 및 기존 사진에서 EXIF 데이터 추출 (0) | 2020.12.31 |
|---|---|
| 매개 변수 사용에 JSP 포함 (0) | 2020.12.31 |
| REST를 사용해야하는 이유는 무엇입니까? (0) | 2020.12.31 |
| TypeError : 유니 코드로 강제 변환 : 문자열 또는 버퍼 필요 (0) | 2020.12.31 |
| Java Set에서 * 모든 * 값을 얻는 좋은 방법은 무엇입니까? (0) | 2020.12.31 |