JSFiddle - React, Tailwind, and code Playground
HTML
<tr>
<td>
<span id="MainContent_lblBusinessCenter" style="font-family:Open Sans;">BC:</span></td>
<td>
<select name="ctl00$MainContent$ddlBusinessCenter" onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$ddlBusinessCenter\',\'\')', 0)" id="MainContent_ddlBusinessCenter" margin-Left="100px" style="font-family:Merriweather;height:30px;width:120px;">
<option value=""></option>
<option selected="selected" value="1">RH</option>
<option value="8">CR</option>
<option value="9">TU</option>
<option value="10">VR</option>
<option value="11">VC</option>
</select><br />
</td>
</tr>
<div id="MainContent_UpdatePanel2">
<tr>
<td>
<span id="MainContent_ProductHierarchy1" style="font-family:Open Sans;">Product Level 1:</span></td>
<td>
<select name="ctl00$MainContent$ddlProductHierarchyLvL1" onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$ddlProductHierarchyLvL1\',\'\')', 0)" id="MainContent_ddlProductHierarchyLvL1" margin-Left="100px" style="font-family:Merriweather;height:30px;width:120px;">
<option selected="selected" value=""></option>
<option value="T">Textile flooring</option>
<option value="V">Vinyl flooring</option>
<option value="W">Wood flooring</option>
</select><br />
</td>
</tr>
<tr>
<td>
<span id="MainContent_ProductHierarchy2" style="font-family:Open Sans;">Product Leve2:</span></td>
<td>
<select name="ctl00$MainContent$ddlProductHierarchyLvL2" onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$ddlProductHierarchyLvL2\',\'\')', 0)" id="MainContent_ddlProductHierarchyLvL2" margin-Left="100px" style="font-family:Merriweather;height:30px;width:120px;">
<option selected="selected" value=""></option>
<option value="A">Accessories</option>
<option...
CSS
.IDKarakteristike
{
display: none !important;
}
JavaScript
$(function () {
$(".IDMandatory").each(function (i, el) {
if ($(el).text().toUpperCase() === "TRUE") {
$(el).closest("tr").find("input,select").prop("required", true);
}
});
$("#myButton").on("click", function () {
var ok = true;
$("[required]").each(function () {
$(this).css("border", ""); // reset
if (!$(this).val()) {
ok = false;
$(this).css("border", "2px solid red");
var message = "";
if ($("#MainContent_ddlProductHierarchyLvL1").val() == 0) {
message += "Plase fill in the GPR PIM Product Hierarchy Level 1 field!";
}
if ($("#MainContent_ddlProductHierarchyLvL2").val() == 0) {
message += "Plase fill in the GPR PIM Product Hierarchy Level 2 field!";
}
if ($("#MainContent_ddlProductHierarchyLvL3").val() == 0) {
message += "Plase fill in the GPR PIM Product Hierarchy Level 3 field!";
}
if (message != "") {
alert(message);
}
}
});
if (ok) {
var ddl = $('#MainContent_ddlBusinessCenter').val()
var myCollection = [];
$('#MainContent_gvKarakteristike tbody').find('tr:gt(0)').each(function (i, e) {
var row = $(e);
myCollection.push({
label: valuefromType(row.find(row.find('td:eq(1)').children())),
opis:...