Form 데이터를 jQuery submit 하면서 기초가 부족해서 삽질을 많이 한다.
http://hayageek.com/jquery-submit-form/ 사이트 예제, http://www.sqler.com/387921 를 보면 도움된다.
Form 전송시 필드(input box) 를 동적으로 추가해야 할 경우가 있다.
http://www.codexworld.com/add-remove-input-fields-dynamically-using-jquery/ 에서 소스를 받아서 코드를 보강하면서 테스트를 했다.
수정/추가한 부분 및 내역
- javascript:void(0); 대신에 #으로 수정하고 jQuery 코드 부분 수정(e.preventDefault() 추가)
- 용어 내 스타일로 변경
- form submit 부분 추가하고 ajax 형태로 처리하는 코드 추가
- 입력값이 없을 때 체크하는 코드 추가
※ DB에 저장하고 나서 다시 수정/삭제/추가할 경우까지 고려되어 있지는 않다.
=== index.php ===
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Add more fields using jQuery</title>
<style type="text/css">
input[type="text"]{height:18px;width:220px;vertical-align:top;}
.field_wrapper div{ margin-bottom:10px;}
.add_button{ margin-top:10px; margin-left:10px;vertical-align: text-bottom;}
.removeBtn{ margin-top:10px; margin-left:10px;vertical-align: text-bottom;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var maxCount = 5;
var addButton = $('.add_button');
var wrapper = $('.field_wrapper');
var AddBox = '<div><input type="text" name="kordiv[]" value=""/><a href="#" class="removeBtn" title="제거"><img src="remove-icon.png"/></a></div>';
var x = 1;
$(addButton).click(function(e){
e.preventDefault();
if(x < maxCount){
x++;
$(wrapper).append(AddBox);
}else{
alert('최대 '+maxCount+'개까지 허용합니다');
return false;
}
});
$(wrapper).on('click', '.removeBtn', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
$("#submit1").click(function(){
// 폼 요소 내부의 입력값만을 찾기 위해서 폼 요소에서 find()를 호출
var xyz = $("#myform").find('[name=xyz]').val();
if(xyz =='') {
alert('xyz 값이 입력되지 않았습니다.');
return false;
}
// 배열로 된 값이 제대로 입력되었는지 체크
var cnt = 0;
$('input[name^="kordiv"]').each(function() {
//alert($(this).val());
if($(this).val() === '') {
cnt++;
}
});
if(cnt > 0){
alert('kordiv 에 입력되지 않는 필드가 '+cnt+'개 있습니다');
return false;
}
var formData = $("#myform").serialize();
var URL = $("#myform").attr("action");
$.post(URL, formData, function(data, textStatus, jqXHR){
alert(data);
var data = jQuery.parseJSON(data);
$.each(data, function(index, value) {
alert(value);
});
}).fail(function(jqXHR, textStatus, errorThrown) {
console(errorThrown);
});
});
});
</script>
</head>
<body>
<form name="frm" id="myform" action="frm_result.php" method="POST">
<input type="hidden" name="xyz" value="123" />
<div class="field_wrapper">
<div>
<input type="text" name="kordiv[]" value=""/>
<a href="#" class="add_button" title="추가"><img src="add-icon.png"/></a>
</div>
</div>
<input type="hidden" name="submit" value="true" />
</form>
<br/>
<input type="button" id="submit1" value="전송" />
</body>
</html>
=== frm_result.php ===
<?php
if(isset($_POST['submit'])){
$kordiv_array = $_POST['kordiv']; // 배열
/*
print '<pre>';
print_r($kordiv_array);
print_r($_POST['xyz']);
print '</pre>';
// */
$R = array();
foreach($kordiv_array as $value){ // 배열로 받은 걸 분리 처리
//echo $value;
array_push($R,$value);
}
$Content = 'Hello world';
echo json_encode(array('rs'=>$R,'Content' => $Content));
}
?>
'Web 프로그램 > js, jQuery' 카테고리의 다른 글
| window.location 정리 (0) | 2017.02.16 |
|---|---|
| [javascript] 자바스크립 데이터 타입 및 다시 보는 기초 (0) | 2017.01.15 |
| [Javascript] window open 및 div popup 처리 방법 (0) | 2017.01.04 |
| [jQuery] jqplot 를 이용한 막대 그래프 통계 (MySQL DB 실제 연동) (0) | 2016.12.31 |
| [jQuery] Converting JSON Object into Javascript array (0) | 2016.12.31 |
Link2Me