I have a table inside a form, the rows and data inside the rows are generated from the back end automatically. Well all the columns are disabled, so that the user can not edit it but one column is editable. on submit compare the value from editable column and value in quanity column and display a alert message if value of editable is more.
function validateAvaliable(){
var aproducts = document.getElementById("available-quanity").value;
var sproducts = document.getElementById("send-quanity").value;
console.log(aproducts);
console.log(sproducts );
if (aproducts < sproducts) {
alert("send products are more");
return false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid">
<form onsubmit="validateAvaliable()" class="available-products-table" id="available-products-table" name="available-products">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="available-sno" id="available-sno" disabled value="1"></td>
<td><input type="text" name="available-name" id="available-name" disabled value="shoes"></td>
<td><input type="text" name="available-id" id="available-id" disabled value="123"></td>
<td><input type="number" name="available-quanity" id="available-quanity" disabled value="50"></td>
<td><input type="text" name="available-brand" id="available-brand" disabled value="adidas"></td>
<td><input type="text" name="available-color" id="available-color" disabled value="black"></td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="number" name="send-quanity" id="send-quanity" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="number" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>
When I try to debug it it's getting the values but if statement is skipping.
I need the code in javascript or Jquery.
Thanks in Advance
Added parseInt() and it did the trick:
function validateAvaliable() {
var aproducts = parseInt(document.getElementById("available-quanity").value);
var sproducts = parseInt(document.getElementById("send-quanity").value);
console.log(aproducts);
console.log(sproducts);
if (aproducts < sproducts) {
alert("send products are more");
return false;
}
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid">
<form onsubmit="return validateAvaliable()" class="available-products-table" id="available-products-table" name="available-products">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="available-sno" id="available-sno" disabled value="1"></td>
<td><input type="text" name="available-name" id="available-name" disabled value="shoes"></td>
<td><input type="text" name="available-id" id="available-id" disabled value="123"></td>
<td><input type="number" name="available-quanity" id="available-quanity" disabled value="50"></td>
<td><input type="text" name="available-brand" id="available-brand" disabled value="adidas"></td>
<td><input type="text" name="available-color" id="available-color" disabled value="black"></td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="number" name="send-quanity" id="send-quanity" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="number" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>
Related
I want to have a webpage with a long table full of input values. I want to get a checkbox checked when an individual row input value is modified. I have not been able to get the JavaScript part to work.
The below is my try
<!DOCTYPE html>
<html>
<head>
<style>table {border: 1px solid black;} </style>
</head>
<body>
<div class="container">
<form action="" method='POST'>
<table id="table" class="table">
<thead>
<tr>
<th data-type="number">No.</th>
<th>First name</th>
<th>Modified <br>"to be hidden"</th>
</tr>
</thead>
<tr>
<td><input name="no[]" value="1" oninput="mod(this)"></td>
<td><input name="f[]" value="Andrea" oninput="mod(this)"></td>
<td><input id="modcheck" type="checkbox" name="modify[]" value=""></td>
</tr>
<tr>
<td><input name="no[]" value="2" oninput="mod(this)"></td>
<td><input name="f[]" value="Peter" oninput="mod(this)"></td>
<td><input id="modcheck" type="checkbox" name="modify[]" value=""></td>
</tr>
<tr>
<td><input name="no[]" value="3" oninput="mod(this)"></td>
<td><input name="f[]" value="Sarah" oninput="mod(this)"></td>
<td><input id="modcheck" type="checkbox" name="modify[]" value=""></td>
</tr>
</table>
</form>
</div>
<script>
function mod(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("modcheck").modifed(i).checked = true;
}
</script>
</body>
</html>
You can iterate over each row, and add an oninput function to check the corresponding checkbox when input textbox is modified.
let rows = document.querySelectorAll("tr");
rows.forEach(row=>{
row.querySelectorAll("input:not(#modcheck)").forEach(input=>{
input.oninput = (e)=>{
row.querySelector("#modcheck").checked = true;
}
})
})
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<form action="" method='POST'>
<table id="table" class="table">
<thead>
<tr>
<th data-type="number">No.</th>
<th>First name</th>
<th>Modified <br>"to be hidden"</th>
</tr>
</thead>
<tr>
<td><input name="no[]" value="1"></td>
<td><input name="f[]" value="Andrea"></td>
<td><input id="modcheck" type="checkbox" name="modify[]" value=""></td>
</tr>
<tr>
<td><input name="no[]" value="2"></td>
<td><input name="f[]" value="Peter"></td>
<td><input id="modcheck" type="checkbox" name="modify[]" value=""></td>
</tr>
<tr>
<td><input name="no[]" value="3"></td>
<td><input name="f[]" value="Sarah"></td>
<td><input id="modcheck" type="checkbox" name="modify[]" value=""></td>
</tr>
</table>
</form>
</div>
</body>
</html>
How to select <ul> inside <td> of selected row.
here is my html and jquery code.
Help me to resolve this issue.
I am trying to select <ul> tag inside <td> to insert fetched data by ajax.
this is jquery code.
$('.result').click(function () {
var tpid = $(this).parents('tr').find('.tpId').val();
$.ajax({
type: "POST",
url: "/Reception/PatientTests/getHelpValue",
data: { 'tpid': tpid },
success: function (data) {
str = "";
for (var i = 0; i < data.length; i++) {
str +="<li>"+data[i] + "</li>";
}
$(this).find('td ul').html(str);
},
error: function (e) {
alert('Error' + JSON.stringify(e));
}
});
});
this is my html code.
<table class="table table-bordered table-sm" style="height:auto">
<tbody><tr class="blue-gradient-rgba text-white">
<th>Test Name</th>
<th>Value</th>
<th>Unit</th>
<th>Normal</th>
<th>Minimum</th>
<th>Maximum</th>
</tr>
<tr>
<input type="hidden" class="tid" value="2">
<th colspan="2">COMPLETE BLOOD COUNT</th>
</tr>
<tr>
<td>Haemoglobin</td>
<td>
<input type="hidden" class="tpId" value="9">
<input type="text" class="result" value="45">
<ul class="helpValues"></ul>
</td>
<td>gm %</td>
<td>m-14.0 to 18.0 Gms. %
F- 12.5 to 16.0 Gms. %</td>
<td></td>
<td></td>
</tr>
<tr>
<td>MCV</td>
<td>
<input type="hidden" class="tpId" value="12">
<input type="text" class="result" value="75">
<ul class="helpValues"></ul>
</td>
<td>fl</td>
<td>76- 96</td>
<td></td>
<td></td>
</tr>
<tr>
<input type="hidden" class="tid" value="3">
<th colspan="2">DENGUE IgG /IgM</th>
</tr>
<tr>
<td>Dengue IgG</td>
<td>
<input type="hidden" class="tpId" value="13">
<input type="text" class="result" value="53">
<ul class="helpValues"></ul>
</td>
<td>ml</td>
<td></td>
<td>1 mL serum</td>
<td></td>
</tr>
<tr>
<td>Dengue IgM</td>
<td>
<input type="hidden" class="tpId" value="14">
<input type="text" class="result">
<ul class="helpValues"></ul>
</td>
<td>ml</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Dengue NS1</td>
<td>
<input type="hidden" class="tpId" value="15">
<input type="text" class="result">
<ul class="helpValues"></ul>
</td>
<td>ml</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody></table>
I tried this $(this).find('td ul').html(str); but it's not working.
here I want to add data into ul of the particular row.
.tpId is just previous and ul is just next to the .result. So, you can use prev and next:
var tpid = $(this).parents('tr').find('.tpId').val();
// Alternative:
var tpid = $(this).prev().val(); // I love this approach
// This is wrong
$(this).find('td ul').html(str);
// You're finding from `.result`
// So, use:
$(this).parents('tr').find('ul').html(str);
// But, you can do just
$(this).next().html(str); // I love this approach
As far as my understanding, you try to access 'ul', inside of your 'td'. Here is the block of code which includes ul inside of td.
<tr>
<td>MCV</td>
<td>
<input type="hidden" class="tpId" value="12">
<input type="text" class="result" value="75">
<ul class="helpValues"></ul>
</td>
<td>fl</td>
<td>76- 96</td>
<td></td>
<td></td>
</tr>
Jquery code
$(".result").on("click",function()
{
let ul=$(this).parent().find("ul");
let ulValues=$(ul).val();
console.log(ulValues);
})
I have a table in razor and I sent the data by ViewBag from controller
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
</tr>
</thead>
<tbody>
#foreach(var item in ViewBag.Products)
{
<tr>
<td>#item.Name</td>
<td>#item.Category</td>
<td>
<input type="text" class="form-control" value="#item.Price" />
</td>
<td>
<input type="text" class="form-controll" value="#item.Count" />
</td>
</tr>
}
</tbody>
</table>
<input type="text" class="form-control" value="#Model.TotalPrice" />
I want to multiple count and price of each row and put it in another input using javascript. and when the user change the value of input, that input that holds the value could change automatically.
if anyone can help me i would be appreciated.
If you are using jquery then it can be achieve as below.
You can update your total on every key press in price or count input.
Add some class to your input. In my example I've took class as price, and class total for display sum.
Add keyup event as below. Also trigger it on $(document).ready to initially set the total value.
$('.price').on('keyup', function() {
var val = +$(this).val();
var valSibling = +$(this).parent().siblings('td').find('.price').val();
if (isNaN(val) || isNaN(valSibling))
return;
$(this).parent().siblings('td').find('.total').val(val * valSibling);
var finaltotal = 0;
$('.total').each(function() {
if(!isNaN($(this).val()))
finaltotal += Number($(this).val());
});
$('.finaltotal').val(finaltotal);
});
$(document).ready(function(){
$('.price').trigger('keyup');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Category1</td>
<td><input type="text" class="price form-control" value="40" /></td>
<td><input type="text" class="price form-control" value="4" /></td>
<td><input type="text" class="total form-control" /></td>
</tr>
<tr>
<td>Name2</td>
<td>Category2</td>
<td><input type="text" class="price form-control" value="20" /></td>
<td><input type="text" class="price form-control" value="2" /></td>
<td><input type="text" class="total form-control" /></td>
</tr>
</tbody>
</table>
<input type="text" class="finaltotal form-control" />
var inputs = $('#container input');
inputs.keyup(function() {
var arr = inputs.toArray();
var sum = 0;
for (var i = 0; i < arr.length / 2; i++)
sum += arr[i * 2].value * arr[i * 2 + 1].value;
$('#result').val(sum);
})
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Count</th>
<th>Price</th>
<tr>
</thead>
<tbody id='container'>
<tr>
<td><input type='number' value='1' /></td>
<td><input type='number' value='2' /></td>
</tr>
<tr>
<td><input type='number' value='10' /></td>
<td><input type='number' value='20' /></td>
</tr>
</tbody>
</table>
Total: <input type='number' readonly id='result' readonly value='202' />
I want to multiple count and price of each row and put it in another input using javascript.
You can add another td in each tr. Then loop through all the tbody tr to calculate the value:
var tr = document.querySelectorAll('tbody tr');
function calculate(){
tr.forEach(function(el){
var td = el.querySelectorAll('td');
// If there is invalid number in input then no change in total.
if (isNaN(td[2].querySelector('input').value) || isNaN(td[3].querySelector('input').value))
return;
td[4].querySelector('input').value = td[2].querySelector('input').value * td[3].querySelector('input').value;
});
}
calculate();
.form-control{
width: 50px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Category1</td>
<td><input type="text" oninput="calculate()" class="form-control" value="40" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="4" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
<tr>
<td>Name2</td>
<td>Category2</td>
<td><input type="text" oninput="calculate()" class="form-control" value="20" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="2" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
<tr>
<td>Name3</td>
<td>Category3</td>
<td><input type="text" oninput="calculate()" class="form-control" value="30" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="3" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
</tbody>
</table>
I am trying to access the attribute/value of 'schoolidx' that is not hidden, when add button is clicked; however I am having hard time accessing it.
Can someone guide me please? I am trying to get only "1", or "2", or "3" depending on which one is not hidden ("display: none;"). In this case, "1".
Tried different methods:
let schoolIndex = $('#schoolTableBody > tr:not([style*="display: none"])').attr("schoolidx"),
schoolIndex2 = $('tr').filter(function(){ return $(this).css("display") != "none";}).attr("schoolidx"),
schoolIndex3 = $('tr').filter(function(){ return $(this).css("display") != "none";}).attr("schoolidx"),
schoolIndex4 = $("#schoolTableBody > tr:visible")
<table class="table table-striped table-hover table-condensed" id="schoolTable">
<thead>
<tr>
<th> </th>
<th>School Name</th>
<th>Country</th>
</tr>
</thead>
<tbody id="schoolTableBody">
<tr class="school-row" style="">
<td><button id="addSchoolBtn" title="Add" style="width:50px"/></td>
<td><input type="text" name="sName" id="sName"></td>
<td><input type="text" name="Country" id="Country"></td>
</tr>
<tr schoolidx="1" style="">
<td> </td>
<td><input type="hidden" name="sName" value="SK">SK</td>
<td><input type="hidden" name="Country" value="US">US</td>
</tr>
<tr schoolidx="1" style="">
<td> </td>
<td><input type="hidden" name="sName" value="JS">JS</td>
<td><input type="hidden" name="Country" value="US">US</td>
</tr>
<tr schoolidx="2" style="display: none;">
<td> </td>
<td><input type="hidden" name="sName" value="CAS">CAS</td>
<td><input type="hidden" name="Country" value="CA">CA</td>
</tr>
<tr schoolidx="2" style="display: none;">
<td> </td>
<td><input type="hidden" name="sName" value="AM">AM</td>
<td><input type="hidden" name="Country" value="CA">CA</td>
</tr>
<tr schoolidx="3" style="display: none;">
<td> </td>
<td><input type="hidden" name="sName" value="BAS">BAS</td>
<td><input type="hidden" name="Country" value="BR">BR</td>
</tr>
</tbody>
</table>
Instead of attempting to search by styling, perhaps you could add an 'active' class when you unhide a given row, and remove it when you hide it again.
You can then search using jQuery. var schoolid = $("tr.active").prop("schoolidx");
Have a look at addClass and removeClass. I assume you already have the ability to hide each row. Just add those two functions to that bit of code.
Note that I have changed your 'attribute' to a valid data attribute
For the JS, we have to make sure we're only selecting the tr's within the tbody but not the first tr as thats where the add button is.
Then do an if() within an onclick to check to see if the display is set to none
<button> aren't self closing, they require a </button>
document.getElementById('addSchoolBtn').addEventListener('click', () => {
document.querySelectorAll('#schoolTableBody tr:not(.school-row)').forEach(tr => {
if (tr.style.display !== "none") alert(tr.dataset.schoolidx)
})
})
<table class="table table-striped table-hover table-condensed" id="schoolTable">
<thead>
<tr>
<th> </th>
<th>School Name</th>
<th>Country</th>
</tr>
</thead>
<tbody id="schoolTableBody">
<tr class="school-row" style="">
<td><button id="addSchoolBtn" title="Add" style="width:50px">Add</button></td>
<td><input type="text" name="sName" id="sName"></td>
<td><input type="text" name="Country" id="Country"></td>
</tr>
<tr data-schoolidx="1" style="">
<td> </td>
<td><input type="hidden" name="sName" value="SK">SK</td>
<td><input type="hidden" name="Country" value="US">US</td>
</tr>
<tr data-schoolidx="1" style="">
<td> </td>
<td><input type="hidden" name="sName" value="JS">JS</td>
<td><input type="hidden" name="Country" value="US">US</td>
</tr>
<tr data-schoolidx="2" style="display: none;">
<td> </td>
<td><input type="hidden" name="sName" value="CAS">CAS</td>
<td><input type="hidden" name="Country" value="CA">CA</td>
</tr>
<tr data-schoolidx="2" style="display: none;">
<td> </td>
<td><input type="hidden" name="sName" value="AM">AM</td>
<td><input type="hidden" name="Country" value="CA">CA</td>
</tr>
<tr data-schoolidx="3" style="display: none;">
<td> </td>
<td><input type="hidden" name="sName" value="BAS">BAS</td>
<td><input type="hidden" name="Country" value="BR">BR</td>
</tr>
</tbody>
i have a form with Jquery .validation().
Form:
<form....>
<table cellspacing="0" cellpadding="0">
<tr>
<td>Name: </td>
<td><input type='text' name='Name'/></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type='text' name='LastName'/></td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='Address'/></td>
</tr>
</table>
<input type='submit' name='enter' value='submit'/>
</form>
I would like to print errors like this:
Is it possible?
Thanks in advance :)
Demo Here
HTML
<form name="test">
<table cellspacing="1" cellpadding="1">
<tr>
<td>Name: </td>
<td><input type='text' name='Name'/>
<span class="error_span">Enter name</span>
</td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type='text' name='LastName'/>
<span class="error_span">Enter last name</span>
</td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='Address'/>
<span class="error_span">Enter address</span>
</td>
</tr>
</table>
<input type='button' id='submit' name='enter' value='submit'/>
</form>
jQuery
$(document).ready(function(){
$("#submit").click(function(){
$('input').each(function(index) {
if($(this).val()=="") {
$(this).addClass("has_error");
$(this).siblings(".error_span").show();
}else{
$(this).removeClass("has_error");
$(this).siblings(".error_span").hide();
}
});
});
});
CSS
.error_span{
color:red;
display:none;
}
.has_error{
border:1px solid red;
}
Demo Here
You can use onsubmit attribute of your form to execute the javascript and stop the form from submitting if there is validation error
You can do in Two ways..
1)
<form....>
<table cellspacing="0" cellpadding="0">
<tr>
<td>Name: </td>
<td><input type='text' name='Name'/></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type='text' name='LastName'/></td>
</tr>
<tr>
<td></td>
<td>Name Is Required</td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='Address'/></td>
</tr>
</table>
<input type='submit' name='enter' value='submit'/>
</form>
or
2)
<form....>
<table cellspacing="0" cellpadding="0">
<tr>
<td>Name: </td>
<td><input type='text' name='Name'/></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type='text' name='LastName'/> <br />Name Is Required</td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='Address'/></td>
</tr>
</table>
<input type='submit' name='enter' value='submit'/>
</form>
You have to use custom validation code for doing like that. Check this link. http://docs.jquery.com/Plugins/Validation/Validator/addMethod