ОК, поэтому у меня есть таблица / форма, которую мне нужно проверить, убедившись, что при отправке нет пустых полей ввода. Суть в том, что мне нужны только определенные поля, проверенные на основе выбранной опции в верхней части таблицы.
Необходим для: Op1 -> Имя, город, штат, телефон, почтовый индекс.
Необходим для: Op2 -> Имя, город, штат, телефон, почтовый индекс, ssn.
Необходим для: Op3 -> Имя, город, штат, телефон, почтовый индекс, ssn.
Необходим для: Op4 -> Имя, город, штат, телефон, почтовый индекс, DOB, другое.
Мне интересно, правильно ли я поступаю, или, может быть, есть лучший способ сделать это?
примечание: значения параметров динамически создаются из серверной части, и я не могу добавлять любые идентификаторы / значения в теги параметров.
<div class="container">
<form action="">
<table id="mytable1">
<tr>
<td>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="">Name</label>
<input type="text" class="name">
</td>
</tr>
<tr>
<td>
<label for="">City</label>
<input type="text" class="city">
</td>
</tr>
<tr>
<td>
<label for="">Phone</label>
<input type="text" class="phone">
</td>
</tr>
<tr>
<td>
<label for="">State</label>
<input type="text" class="state">
</td>
</tr>
<tr>
<td>
<label for="">zip</label>
<input type="text" class="pos">
</td>
</tr>
<tr>
<td>
<label for="">SSN:</label>
<input type="text" class="add1">
</td>
</tr>
<tr>
<td>
<label for="">DOB:</label>
<input type="text" class="add1">
</td>
</tr>
<tr>
<td>
<label for="">other:</label>
<input type="text" class="add1">
</td>
</tr>
</table>
</form>
<button onclick="">Submit</button>
<p>Values: </p>
</div>
и присоединяющийся JavaScript
$(document).ready(function () {
$('select').on('change', function () {
$( "p" ).append($( "input" ).map(function() {
return $( this ).val();
}).get().join( ", " ) );
$('table').append($('input').map(function () {
console.log($(this).val());
}).get().join(', '));
let selValue = $('select option:selected').text();
if(selValue == 'Option 1'){
//check if required fields are blank, if so throw error
console.log('value 1 is selected');
}else if(selValue == 'Option 2'){
//check if required fields are blank, if so throw error
console.log('value 2 is selected');
} else if(selValue == 'Option 3'){
//check if required fields are blank, if so throw error
console.log('value 3 is selected');
}else if(selValue == 'Option 4'){
//check if required fields are blank, if so throw error
console.log('value 4 is selected');
}else {
//submit form.
//$("form").submit();
}
});
Если есть какая-либо другая необходимая информация, пожалуйста, дайте мне знать, я отправлю ее как можно скорее.