Jquery form data serialize() 유의점

form data를 key:value 쌍으로 하나하나 매핑해서 server에 request 가능하지만, form element 수가

많을수록 귀찮고, 일부 항목 누락이 발생할 수도 있다.
Jquery serialize() 함수로 위 작업을 아주 간단히 처리할 수 있다.

단, form element 중에 “disabled:true” 항목은 serialize 대상에서 제외됨을 주의해야 한다.

javascript

var formSerialized = $('#scheduleForm').serialize();

$.ajax({
	url : 'registerSchedule',
	async : true,
	type : 'POST',
	dataType : 'json',
	data : formSerialized
	beforeSend : function(jqXHR) {
}, ... };

eventDate form element가 disabled 속성을 가지고 있는 경우 이 항목은 serialize 대상에서 제외됨을 유의해야 한다.

이런 경우 아래 두 가지 솔루션을 고민해야 한다.

1. serialize 이전에 disabled 속성을 false로 변경 후, serialize 이후 true로 변경하는 방법
2. disabled 속성 대신 readonly 속성을 사용하는 방법

html

<form  id="scheduleForm"  action="registerSchedule"  method="post">
	<div  class="form-row">
		<div  class="form-group col-md-4">
		<label for="dateLable">날짜</label>
		<input  class="form-control"
		id="eventDate"  name="eventDate"  type="date"
		aria-describedby="dateHelp" placeholder="enter Date" disabled>
		</div>
		<div  class="form-group col-md-4">
		<label  for="startTimeLabel">시작</label>
		<input  class="form-control"  id="eventStartTime"  name="eventStartTime"
		type="time"  size="7"  aria-describedby="startTimeHelp"
		placeholder="Enter startTime">
		</div>
		<div  class="form-group col-md-4">
		<label  for="endTimeLabel">종료</label>  <input
		class="form-control"  id="eventEndTime"  name="eventEndTime"
		type="time"  aria-describedby="endTimeHelp"
		placeholder="Enter endTime">
		</div>
	</div>
...
</form>