I have following table: All the data here are dynamic, loaded from database.
<table>
<tr class="items">
<td>Name: <input type="text" class="name" value="Steven"></td>
<td>Employed: <input type="text" class="emp_stat" value="Y"></td>
<td>Minimum Salary: <input type="text" class="min_sal" value="200"></td>
<td>Location: <input type="text" class="country" value="USA"></td>
</tr>
<tr class="items">
<td>Name: <input type="text" class="name" value="John"></td>
<td>Employed: <input type="text" class="emp_stat" value="N"></td>
<td>Minimum Salary: <input type="text" class="min_sal" value="0"></td>
<td>Location: <input type="text" class="country" value="USA"></td>
</tr>
<tr class="items">
<td>Name: <input type="text" class="name" value="Mark"></td>
<td>Employed: <input type="text" class="emp_stat" value="Y"></td>
<td>Minimum Salary: <input type="text" class="min_sal" value="200"></td>
<td>Location: <input type="text" class="country" value="USA"></td>
</tr>
</table>
<button id="btn_add">Add More</button> //will create new tr with inputs
<button id="btn_save">Save</button>
$('.items').each(function(){
$emp_stat= $(this).find($('.emp_stat').text());
$min_sal = $(this).find($('.min_sal').val());
if($emp_stat == 'Y' && $min_sal < 100){
alert('Min Salary must be above 100 $.');
}else{
//else do something
}
});
What I want to do here is ; In all Employed Value = Y, say the Minimum salary must be 100 . If some one puts below hundred 100 want to give some sort of validation popup if clicked on save btn and for Employed Value = N, I want to disable minimum Salary inputs. How to do it? This is on edit/new page. on btn_add will add new with inputs with same condition.
How to do in Jquery?
Your selector is wrong.
$(this).find('.emp_stat').val()
$(this).find('.min_sal').val()
this returns the correct values.
Consider the following.
$(function() {
function checkSalary(row, salary) {
// Given a Row element, check if 2nd Input is "Y" and then check if Salary is less than given Salary or 100
if (salary == undefined) {
salary = 100;
}
var result = false;
if ($("td:eq(1) input", row).val() == "Y") {
result = parseInt($("td:eq(2) input", row).val()) < 100;
}
// If less than 100, result will be false
return result;
}
function checkAll(className) {
// Assume all are correct
var result = true;
// Check Each Row, by given class name
$(className).each(function(index, element) {
var check = checkSalary(element);
if (!check) {
$(element).removeClass("alert");
} else {
$(element).addClass("alert");
}
// Combined verification
// true && true = true
// true && false = false
result = result && check;
});
return result;
}
$("#btn_save").click(function(event) {
event.preventDefault();
return checkAll(".items");
});
});.alert td:nth-child(3) input {
border: 1px solid red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="items">
<td>Name: <input type="text" value="Steven"></td>
<td>Employed: <input type="text" value="Y"></td>
<td>Minimum Salary: <input type="text" value="200"></td>
<td>Location: <input type="text" value="USA"></td>
</tr>
<tr class="items">
<td>Name: <input type="text" value="John"></td>
<td>Employed: <input type="text" value="N"></td>
<td>Minimum Salary: <input type="text" value="0"></td>
<td>Location: <input type="text" value="USA"></td>
</tr>
<tr class="items">
<td>Name: <input type="text" value="Mark"></td>
<td>Employed: <input type="text" value="Y"></td>
<td>Minimum Salary: <input type="text" value="200"></td>
<td>Location: <input type="text" value="USA"></td>
</tr>
</table>
<button id="btn_add">Add More</button>
<button id="btn_save">Save</button>This is an example of a simple form verification method. It uses .each() to iterate each of the rows in a table. You have a specific condition, if Employed is "Y", then check the Salary is high enough.