select placeholder 기능 적용 / ajax로 name 배열 데이터 넘기기

<style> select:invalid { color: gray; } </style>

 

<form>

<input type="text" name=data[1][title] class="dataclass">

 

<select required name=data[1][val1] class="dataclass">

<option value="" disabled selected hidden>Please Choose...</option>

<option value="0">Open when powered (most valves do this)</option>

<option value="1">Closed when powered, auto-opens when power is cut</option>

</select>

 

<select required name=data[1][val2] class="dataclass">

<option value="" disabled selected hidden>Please Choose...</option>

<option value="0">Open when powered (most valves do this)</option>

<option value="1">Closed when powered, auto-opens when power is cut</option>

</select>

</form>

 

크롬/사파리 사용가능.

 

위 형태로 input/select/checkbox 배열 데이터를 ajax 형식으로 넘길때는 class를 사용하면 좋음

var arr_data = $('.dataclass').serialize();

$.ajax({
url: url,
type:'post',
dataType:'json',
data: arr_data,
success: function(data){
console.log(data);
},
error: function(e) {
console.log(e.message);
}});

 

 

*주의할점

select option에 required 와 disabled 옵션을 주면 데이터 넘길때 변수 생성이 안되는 문제..

변수값에 NULL을 허용하려면 required와 disabled 옵션을 제거해야 함.

아니면 php 7.2 이상 기준으로 (empty($data['ord'])) ? "N" : $data['ord']; 와 같이 배열값 체크를 해야 오류 안남.