0
144
VistasHow I get the details in cells of table from id's using Javascript function
I have a dropdown list like this:
<select id="itemsList" onchange="gettingList()">
<option>Please select the option</option>
<option value="50">Soap</option>
<option value="100">Sugar</option>
<option value="290">Oil</option>
</select>
<br><br>
I get the price of the product from the above list. after, clicking the button I unable to get the result.
<input type="number" id="price" disabled="">
<br><br>
<input type="number" id="quantity" onChange="calculate()">
<br><br>
<input type="number" id="result">
<button type="button" onclick="addDetails()">Add</button>
Code for the table
<table id="myTable" border="1">
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</table>
<br>
For this, I am using this script. But I didn't get the actual result.
<script>
var getPrice = document.getElementById('itemsList');
function getList () {
document.getElementById('price').value = getPrice.value;
}
function calculate () {
var prc = document.getElementById('price').value;
var qty = document.getElementById('quantity').value;
var result = prc * qty;
document.getElementById('bill').value = result;
}
function addDetails () {
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1. = document.getElementById('itemsList').value;
cell2. = document.getElementById('price').value;
cell3. = document.getElementById('quantity').value;
cell4. = document.getElementById('bill').value;
}
</script>
How do I get the details in cells of the table? like:
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
[my] correct way to do that:
const
myForm = document.querySelector('#my-form')
, myTable = document.querySelector('#my-table tbody')
;
myForm.oninput = e =>
{
if (myForm.product.value!=='0')
{
myForm.price.value = myForm.product.value
myForm.bill.value = myForm.price.valueAsNumber * myForm.quantity.valueAsNumber
}
else
{
myForm.price.value = ''
myForm.bill.value = ''
}
}
myForm.onsubmit = e =>
{
e.preventDefault() // disable submit
if (myForm.product.value!=='0')
{
let row = myTable.insertRow()
row.insertCell().textContent = myForm.product.selectedOptions[0].textContent
row.insertCell().textContent = myForm.price.value
row.insertCell().textContent = myForm.quantity.value
row.insertCell().textContent = myForm.bill.value
myForm.product.value = '0'
myForm.price.value = ''
myForm.quantity.value = '1'
myForm.bill.value = ''
}
}* {
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
}
label {
display : block;
margin : .5em 0;
}
label span {
font-size : .9em;
display : block;
}
input {
padding-left: .7em;
}
table {
border-collapse : collapse;
margin : 2em 1em;
}
thead {
background-color : lightsteelblue;
font-weight : bold;
}
th, td {
padding : .2em .8em;
border : 1px solid darkblue;
}
td {
text-align: right;
}
td:nth-of-type(1){
text-align: left;
}
td:nth-of-type(2)::after,
td:nth-of-type(4)::after {
content : ' \20a8';
}<form id="my-form">
<label>
<span>Product :</span>
<select id="product">
<option value="0" selected disabled>Please select the option</option>
<option value="50" > Soap </option>
<option value="100"> Sugar </option>
<option value="290"> Oil </option>
</select>
</label>
<label>
<span>Price :</span>
<input type="number" name="price" disabled>
</label>
<label>
<span>Quantity</span>
<input type="number" name="quantity" value="1" min="1">
</label>
<label>
<span>Amount</span>
<input type="number" name="bill" disabled>
</label>
<button type="submit">Add</button>
</form>
<table id="my-table">
<thead>
<tr> <th>Product Name</th> <th>Price</th> <th>Quantity</th> <th>Amount</th> </tr>
</thead>
<tbody></tbody>
</table>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta