JSFiddle - React, Tailwind, and code Playground
HTML
<table border="1">
<tbody>
<tr class="headerRow">
<th class="item-name">Наименование</th>
<th class="item-quantity">Количество</th>
<th class="item-price">Цена</th>
</tr>
<tr class="itemRow row-0 odd">
<td class="item-name">Menu Item 1</td>
<td class="item-quantity">1</td>
<td class="item-price">15.00 РУБ.</td>
</tr>
</tbody>
</table>
<form class="form-contact" method="post" name="formContact" id="formContact" novalidate>
<div class="input-container">
<input type="text" name="firstName" id="firstName" placeholder="Имя*" value="Вася" required />
</div>
<div class="input-container">
<input type="text" name="lastName" id="lastName" placeholder="Фамилия*" value="Петрович" required />
</div>
<div class="footer">
<button id="submit" type="submit" name="submit">Отправить</button>
</div>
</form>
JavaScript
$(function() {
$('#formContact').validate({
errorPlacement: $.noop,
rules: {
firstName: {
required: true
},
lastName: {
required: true
}
},
submitHandler: function(form) {
console.log("SUBMIT");
$(form).ajaxSubmit({
type:"POST",
data: $(form).serialize(),
url:"send.php",
success: function() {
console.log("YES");
$('#formContact :input').attr('disabled', 'disabled');
$('#formContact').fadeTo( "slow", 0.15, function() {
$(this).find(':input').attr('disabled', 'disabled');
});
},
error: function() {
console.log("NO");
$('#formContact').fadeTo( "slow", 0.15, function() {
});
}
});
}
});
});