반응형
jQuery serialize() 및 AJAX를 사용하여 양식 일부 보내기
jQuery의 serialize를 사용하여 AJAX로 한 폼의 일부를 보내려고 합니다.양식에는 16개의 텍스트 필드가 있습니다.4개의 버튼이 있습니다.button0텍스트 필드 0,1,2,3 및 를 전송합니다.button1텍스트 필드 4, 5, 6, 7 등을 전송합니다.어떻게 해야 하나요?
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Serialize</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
</head>
<body>
<form id='miForm' class='miForm' name='miForm' action='env.php' method='POST'>
</form>
</body>
</html>
jQuery:
$(document).ready(function(){
for(i=0;i<16;i++){
$('form').append('Campo de texto '+i+'<input type="text" id="txt'+i+'" value="Campo '+i+'" readonly="yes"/><br>');
}
for(i=0;i<4;i++){
$('form').append('<input type="button" id="butEnv'+i+'" value="Enviar'+i+'"/><br>');
}
$('form').append('<input type="button" id="butGen" value="Enviar Global"/><br>');
});
만약 당신이 정말로 한 가지 형태만 유지하고 싶다면, 제가 이 바이올린에서 했던 것처럼 시도해 보세요.
양식에 대한 하위 부품을 만듭니다.
<form>
<div id="first">
<input name="tbox1" type="text">
<input name="tbox2" type="text">
<input name="tbox3" type="text">
<input id="button1" type="button" value="button1">
</div>
<div id="second">
<input name="tbox4" type="text">
<input name="tbox5" type="text">
<input name="tbox6" type="text">
<input id="button2" type="button" value="button2">
</div>
</form>
그런 다음 부품의 모든 요소를 선택합니다.
$(document).ready(function() {
$('#button1').on('click', function() {
alert($('#first input').serialize());
});
$('#button2').on('click', function() {
alert($('#second input').serialize());
});
});
물론 선택 상자도 있는 경우 선택 상자에 추가해야 합니다.예:
$('#second input, #second select').serialize()
예를 들어, 필요에 따라 수정합니다.
<form name="test">
<input type="textinput" name="first" value="test1" class="form2" /> <br/>
<select name="second" class="form1">
<option value="1">opt 1</option>
<option selected="selected" value="2">opt 2</option>
</select>
<input type="textinput" name="third" value="test1" class="form2" /> <br/>
</form>
<script>
(function() {
// get second form elements
var options = $('form[name=test]').find('input, textarea, select').filter('.form2').serialize();
alert(options);
}())
</script>
form2 클래스가 있는 모든 입력을 가져옵니다.
보다 의미론적이고 세분화된 접근 방식은 사용자 지정 속성을 사용하여 다른 양식 부품을 선택하는 것입니다.컨테이너를 조작하지 않고 양식 요소를 다른 단추에 쉽게 재할당할 수 있습니다.
$('button[name="button1"]').click(function() {
data = $('[scope="part1"]').serialize();
console.log(data);
});
$('button[name="button2"]').click(function() {
data = $('[scope="part2"]').serialize();
console.log(data);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="text1" scope="part1" />
<input type="text" name="text2" scope="part1" />
<input type="text" name="text3" scope="part1" />
<input type="text" name="text4" scope="part1" />
<button type="button" name="button1">Button 1</button>
<input type="text" name="text5" scope="part2" />
<input type="text" name="text6" scope="part2" />
<input type="text" name="text7" scope="part2" />
<input type="text" name="text8" scope="part2" />
<button type="button" name="button2">Button 2</button>
</form>var formData = $(form).find('#selectedOptions : input') . serialize();
$.post(url, formData) .done(function (data)
{
alert('hi');
});
where #selectedOptions is id of the element.
언급URL : https://stackoverflow.com/questions/16130619/sending-parts-of-form-using-jquery-serialize-and-ajax
반응형
'programing' 카테고리의 다른 글
| 업데이트 트리거 후 생성 시 빈 문자열에 대한 설명할 수 없는 MySQL 오류 #1064? (0) | 2023.07.28 |
|---|---|
| 스프링 보안으로 사용자를 수동으로 로그아웃하는 방법은 무엇입니까? (0) | 2023.07.28 |
| 구성 파일, 환경 및 명령줄 인수를 구문 분석하여 단일 옵션 모음을 가져옵니다. (0) | 2023.07.28 |
| 하위 요소에 따라 요소에 CSS 스타일 적용 (0) | 2023.07.28 |
| C 프로그램에서 메모리 누수를 감지합니까? (0) | 2023.07.28 |