I have an input tag on table :
example :
<table border="1" id="datatable">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type='text' name="a[]" value="a1">
</td>
<td>
<input type='text' name="b[]" value="b1">
</td>
<td>
<input type='text' name="b[]" value="c1">
</td>
</tr>
<tr>
<td>
<input type='text' name="a[]" value="a2">
</td>
<td>
<input type='text' name="b[]" value="b2">
</td>
<td>
<input type='text' name="c[]" value="c2">
</td>
</tr>
</tbody>
I want to get value from input using javascript.
I have try :
var x = document.getElementById("datatable").rows[1].cells;
alert(x[1].innerHTML);
but the result is :
<input type='text' value="a">
please help. thank you
This is invalid html. Each input element should have a name attribute this is how the forms data is submitted. Then you could use value=document.querySelector("input[name='fred']").value;
Edit
Since you are using brackets (and therefore sending back array value with same name) you will need to use:
// create array for values
a_s_array = [];
// get input values
a_s = document.querySelectorAll("input[name='a[]']");
// loop through elements
for( var x=0; x<a_s.length; x++ ) {
// store input value into array
a_s_array.push( a_s[x].value );
}
Try this:-
var x = document.getElementById("datatable").rows[1].cells;
alert(x[0].children[0].value);
You can try this jquery code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<table border="1" id="datatable">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type='text' name="a[]" value="a1">
</td>
<td>
<input type='text' name="b[]" value="b1">
</td>
<td>
<input type='text' name="b[]" value="c1">
</td>
</tr>
<tr>
<td>
<input type='text' name="a[]" value="a2">
</td>
<td>
<input type='text' name="b[]" value="b2">
</td>
<td>
<input type='text' name="c[]" value="c2">
</td>
</tr>
</tbody>
<script>
$(document).ready(function(){
var td = $("#datatable").find('td');
$.each(td, function() {
alert($(this).find('input[type="text"]').val());
});
});
</script>
</body>
</html>
Related
I want to change the total price when the count or unit price of the products are changed on the website. I know I should use the onChange function, but I have no idea about how to write the JavaScript code.
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true" >
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true" >
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true" >
<input id="productCount" type="text" name="countList" onchange="update()" class="layui-input count"
th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true" >
<input id="normalPrice" type="text" name="priceList" onchange="update()" class="layui-input price"
th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price"
th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
<a href="javascript:void(0)" class="delBtn redType" onclick='delColumns(this)'>Del</a>
</td>
</tr>
</tbody>
</table>
I hope that the totalPrice = count*price could refresh whenever the user changes one of those values.
You can easily monitor the pointed input fields (#productCount and #normalPrice) and change the value of #total according to it. In the code below, I use the input event and I'm not using inline event handlers, but rather the function addEventListener() (know why).
const productCountInput = document.querySelector('#productCount');
const productPriceInput = document.querySelector('#normalPrice');
const totalPriceInput = document.querySelector('#total');
function updateTotalPrice() {
totalPriceInput.value = (parseFloat(productCountInput.value) * parseFloat(productPriceInput.value)) || 0;
}
productCountInput.addEventListener('input', updateTotalPrice);
productPriceInput.addEventListener('input', updateTotalPrice);
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true">
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true">
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true">
<input id="productCount" type="text" name="countList" class="layui-input count" th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true">
<input id="normalPrice" type="text" name="priceList" class="layui-input price" th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price" th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
Del
</td>
</tr>
</tbody>
</table>
I'm working on a web application that gives user the chance to input more names as user wishes. the form has a link that has to perform an addition of textboxes on click of that link.
i know there is a way to use jquery to do that but currently don't know why cos i just moved to jquery from angularjs
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
<table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><div align="right"><strong>Add More Fields</strong></div></td>
</tr>
<tr>
<td>Name</td>
<td>Address</td>
<td>Age</td>
<td>Phone Number</td>
</tr>
<tr>
<td><input type="text" name="name" id="name"></td>
<td><input type="text" name="address" id="address"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="phone_number" id="phone_number"></td>
</tr>
</table>
</form>
$(document).ready(function()
{
$('a').click(function(){
var id=$(':text').length;
$('#field').append('<td>Textbox'+id+'</td>');
$('#more').append('<td><input type="text" id='+id+' name="text'+id+'"></td>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
<table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><div align="right"><strong>Add More Fields</strong></div></td>
</tr>
<tr id="field">
<td>Name</td>
<td>Address</td>
<td>Age</td>
<td>Phone Number</td>
</tr>
<tr id="more">
<td><input type="text" name="name" id="name"></td>
<td><input type="text" name="address" id="address"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="phone_number" id="phone_number"></td>
</tr>
</table>
</form>
or try this one
$(document).ready(function()
{
$('a').click(function(){
var id=$(':text').length;
$('#more td').append('<input type="text" id='+id+' name="text'+id+'">');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
input{
margin-bottom: 10px;
}
</style>
<form name="form1" method="post" action="">
<table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><div align="right"><strong>Add More Fields</strong></div></td>
</tr>
<tr id="field">
<td>Name</td>
<td>Address</td>
<td>Age</td>
<td>Phone Number</td>
</tr>
<tr id="more">
<td><input type="text" name="name" id="name"></td>
<td><input type="text" name="address" id="address"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="phone_number" id="phone_number"></td>
</tr>
</table>
</form>
First you have to identify better your elements. Let's put an id for table, an id for add more fields link and a class for tr model.
Then we have to copy all html you want to duplicate.
Then append it to table.
Remember that doing this, when you submit, all those duplicate parameters will become an array of values.
Let's refactor some bad code here too.
Since we are duplicating fields we need to remove Id attribute of them all.
I'm moving add link outside the table and removing those blank tds. Also write a good table with thead and tbody.
When we want to add field, we want to remove too. So let's create a link to remove.
function cloneTrModel() {
return $('.model').first().clone();
}
var trModel = cloneTrModel();
function setRemove() {
$(".remove" ).click(function() {
$(this).closest('tr').remove();
});
}
setRemove();
$( "#add" ).click(function() {
$("#contactTable tbody").append(trModel);
trModel = cloneTrModel();
setRemove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
<strong style="float: right;">Add More Fields</strong>
<table id="contactTable" width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Age</th>
<th>Phone Number</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="model">
<td class="inner"><input type="text" name="name[]"></td>
<td><input type="text" name="address[]"></td>
<td><input type="text" name="age[]"></td>
<td><input type="text" name="phone_number[]"></td>
<td>Remove</td>
</tr>
</tbody>
</table>
</form>
Something like that
$( "#add" ).click(function() {
$( ".inner" ).append( "<input type='text' name='name' id='name'>" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
<table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><div align="right"><strong>Add More Fields</strong></div></td>
</tr>
<tr>
<td>Name</td>
<td>Address</td>
<td>Age</td>
<td>Phone Number</td>
</tr>
<tr>
<td class="inner"><input type="text" name="name" id="name"></td>
<td><input type="text" name="address" id="address"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="phone_number" id="phone_number"></td>
</tr>
</table>
</form>
I can't get the value property from input[type='text'] #page-name and #page-url, it shows up undefined :
eventsDispatcher: function() {
var self = this;
$(".b-row a").click(function() {
var tileId = ("this").id;
$("#tile-edit").css("display", "block");
$("#tile-edit-save").click(function() {
self.pageList[tileId].name = $("#page-name").val(); // -> here
self.pageList[tileId].url = $("#page-url").val(); // -> here
console.log(self.pageList[tileId].name);
});
});
},
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tile-edit">
<form>
<table>
<tr>
<td>
<label for="page-url">Adress</label>
</td>
<td>
<input type="text" name="page-url" id="page-url" class="">
</td>
</tr>
<tr>
<td>
<label for="page-name">Name</label>
</td>
<td>
<input type="text" name="page-name" id="page-name" class="">
</td>
</tr>
<tr>
<td>
<input type="button" id="tile-edit-save" value="save">
</td>
</tr>
</table>
</form>
</div>
The rest of the script is working fine, like the both .click functions, just can't figure out why it doesn't get the #page-name and #page-url values ??
I'm just guessing, but ("this").id should be undefined. You might want to change it for:
var tileId = $(this).attr('id');
I believe you have special characters in your HTML. I copied and pasted it to/from a plain text editor and it works fine. Try copying and pasting the form HTML here.
$('#tile-edit-save').on('click',function() {
console.log($("#page-name").val())
console.log($("#page-url").val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td><label for="page-url">Adress</label></td>
<td><input type="text" name="page-url" id="page-url" class=""></td>
</tr>
<tr>
<td><label for="page-name">Name</label></td>
<td><input type="text" name="page-name" id="page-name" class=""></td>
</tr>
<tr>
<td><input type="button" id="tile-edit-save" value="save"></td>
</tr>
</table>
</form>
Html Table
<table id="tb">
<tr>
<th>First Name</th>
<th>Last Name </th>
<th>Coutry</th>
</tr>
<tr>
<td><input type="text" id="FName"/> </td>
<td><input type="text" id="LName"/> </td>
<td><input type="text" id="Country"/> </td>
</tr>
<tr>
<td><input type="text" id="FName"/> </td>
<td><input type="text" id="LName"/> </td>
<td><input type="text" id="Country"/> </td>
</tr>
</table>
Jquery
//Here I am looping through all the rows in table
$('#tb tr').each(function(i, row) {
//Here I need to loop the tr again ( i.e. row)
$(row, "input").each(function(i, sr) {
//here I want to get all the textbox values
alert($(sr).eq(0).val());
alert($(sr).eq(1).val());
alert($(sr).eq(2).val());
});
});
But I am getting undefined values.
I want to get all the values from text boxes which are inside the table.
Please help me resolve the issue.
You can use
$('#tb tr').each(function(i, row) {
$(this).find('input').each(function() {
alert($(this).val())
})
});
Working Demo
$('#tb tr').each(function(i, row) {
$(this).find('input').each(function() {
alert($(this).val())
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tb">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Coutry</th>
</tr>
<tr>
<td>
<input type="text" id="FName" value="1" />
</td>
<td>
<input type="text" id="LName" value="2" />
</td>
<td>
<input type="text" id="Country" value="3" />
</td>
</tr>
<tr>
<td>
<input type="text" id="FName" value="4" />
</td>
<td>
<input type="text" id="LName" value="5" />
</td>
<td>
<input type="text" id="Country" value="6" />
</td>
</tr>
</table>
The line has the context switched with the selector
$(row, "input").each(function (i, sr) {
It should be
$("input", row).each(function (i, sr) {
or
$(row).find("input").each(function (i, sr) {
You can just use :
$('#tb tr input[type=text]').each(function(){
alert($(this).val());
});
Given the following HTML table which is part of a form on a PHP page, what is the best practice for validating user input?
If a user checks a checkbox for a row (or multiple rows), what is the best way to ensure the StartDate and EndDate input fields have data using client side scripting.
I would like to use jquery but I am very new to jquery. Would the jquery validation plugin make the most sense?
<table width='100%' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td>
<input type='checkbox' id='Product[916109]' name='Product[916109]' value='916109' class='select'>
</td>
<td>
<input type='text' id='ProductName[916109]' name='ProductName[916109]' value='ESY792'>
</td>
<td>
<input type='text' id='StartDate[916109]' name='StartDate[916109]' class='startDatePicker'>
</td>
<td>
<input type='text' id='EndDate[916109]' name='EndDate[916109]' class='endDatePicker'>
</td>
</tr>
<tr>
<td>
<input type='checkbox' id='Product[916110]' name='Product[916110]' value='916110' class='select'>
</td>
<td>
<input type='text' id='ProductName[916110]' name='ProductName[916110]' value='ESY793'>
</td>
<td>
<input type='text' id='StartDate[916110]' name='StartDate[916110]' class='startDatePicker'>
</td>
<td>
<input type='text' id='EndDate[916110]' name='EndDate[916110]' class='endDatePicker'>
</td>
</tr>
<tr>
<td>
<input type='checkbox' id='Product[916111]' name='Product[916111]' value='916111' class='select'>
</td>
<td>
<input type='text' id='ProductName[916111]' name='ProductName[916111]' value='ESY794'>
</td>
<td>
<input type='text' id='StartDate[916111]' name='StartDate[916111]' class='startDatePicker'>
</td>
<td>
<input type='text' id='EndDate[916111]' name='EndDate[916111]' class='endDatePicker'>
</td>
</tr>
<tr>
<td>
<input type='checkbox' id='Product[916112]' name='Product[916112]' value='916112' class='select'>
</td>
<td>
<input type='text' id='ProductName[916112]' name='ProductName[916112]' value='ESY795'>
</td>
<td>
<input type='text' id='StartDate[916112]' name='StartDate[916112]' class='startDatePicker'>
</td>
<td>
<input type='text' id='EndDate[916112]' name='EndDate[916112]' class='endDatePicker'>
</td>
</tr>
<tr>
<td>
<input type='submit' id='btnSubmit' name='btnSubmit' value='Submit'>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
This should do the trick for the use case you've described:
var theForm = $('form'),
rows = theForm.find('tr');
theForm.on('submit', function(evt) {
rows.each(function(i, row) {
var valid = row.find( '.select' ).is( ':checked' )
&& ( row.find('.startDatePicker').val() && row.find('.endDatePicker').val() )
if ( !valid ) return evt.preventDefault();
} );
} );
No sense loading the validation plugin if that's all you need it for, but if you're likely to use it elsewhere then go for it.