I´m making an inventory control program for a veterinary, but in one of the windows to control the stock provider I have a select input and the idea is, when I select that the purchase is for credit, a new input will appear (type date) to select when the invoice payment term expires. I've tried whit jQuery and javaScript, but it still not working, any idea?
This is the form:
<form method="post" action="guardaArt.php">
<tr> <td>Codigo</td> <td><input type=text name="codigo"></td> </tr>
<tr> <td>Nombre</td> <td><input type=text name="nombre"></td> </tr>
<tr> <td>Gravado o Exento</td> <td><select name="select">
<option value="1" selected>Gravado</option>
<option value="2">Exento</option>
</select></td> </tr>
<tr> <td>Precio de Compra</td> <td><input type=text name="precioComp"></td> </tr>
<tr> <td>Precio de Venta</td> <td><input type=text name="precioVent"></td> </tr>
<tr> <td>Precio de Venta por Unidad</td> <td><input type=text name="precioUni"></td> </tr>
<tr> <td>Contenido</td> <td><input type=text name="cont"></td> </tr>
<tr> <td>Codigo del Proveedor</td> <td><input type=text name="codProv"></td> </tr>
<tr> <td>Usos</td> <td><input type=text name="usos"></td> </tr>
<tr> <td>A Crédito</td>
<td>
<select name="tipo" id="mylist">
<option value="0" selected>No</option>
<option value="1">Sí</option>
</select>
</td>
</tr>
<tr> <td>Vencimiento</td><td></td>
</tr>
<tr> <td align= "center"><input type='submit' name='articulo' value='Guardar Artículo' formaction='guardaArt.php'/></td><tr> <td align= "center"><input type='submit' name='articulos' value='Guardar Artículo a Crédito' formaction='ing_art.php'/></td> </tr>
</form>}
and the jQuery
<script>
$('#mylist').change(function(){
if( $(this).val() == '1'){
$('body').append('<input id="myInput" name="vence" type="date" />');
}
else{
$('#myInput').remove();
}
});
</script>
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 have to disable a input in a td, based in the selection in the td select, the td target is the next one, but when I select a option it changes all the next td in the column. I´m new in this u_u
<table id="tabla">
<!-- Cabecera de la tabla -->
thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Sexo</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="especial">
<select id="mySelect" onchange="funcSelect()" name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value="3" ></td>
<td></td>
</tr>
<tr>
<td class="especial">
<select id="mySelect2" onchange="funcSelect()"
name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value=""></td>
<td><input type="text" name="" value=""></td>
</tr>
</tbody>
</table>
this is the function I call for disable the next input, basically i am obtaining the id and the value and depending on that I disable the input, but apparently I disable or enable all the td's not just the one in the row I work
function funcSelect(){
var idSel = $("select").attr("id");
console.log(idSel);
var valSel = $("#"+idSel).val();
var id = "#"+idSel;
console.log(id);
console.log(valSel);
if(valSel === "4"){
$("td.especial").next("td").children().removeAttr("disabled");
}else{
$("td.especial").next("td").children().attr("disabled", "disabled");
}
}
Javascript doesn't work this way.Here is a working version of you code..... Plus you don't have to use any inline function to get this work.....
HTML:
<table id="tabla">
<!-- Cabecera de la tabla -->
<thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Sexo</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="especial">
<select id="mySelect" name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value="3" ></td>
<td></td>
</tr>
<tr>
<td class="especial">
<select id="mySelect2"
name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value=""></td>
<td><input type="text" name="" value=""></td>
</tr>
</tbody>
</table>
Javascript/Jquery:
$(document).on('change', 'select', function(event) {
var val = $(this).val();
if (val == 4) {
$(this).parent().next('td').children().removeAttr('disabled');
}else{
$(this).parent().next('td').children().attr('disabled', 'disabled');
}
});
You should use $("#"+idSel).closest("td.especial") instead of $("td.especial") to find just the first ancestor matching td.especial selector.
Your current code is just matching everything existing in DOM matching given selector `td.especial.
<form id="form1" runat="server">
<table border="1" id="ResultSheet">
<tr id ="Name">
<td> Student Name</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Subject Name</td>
</tr>
<tr>
<td>Maths</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Science</td>
<td><input type ="text" /></td>
</tr>
<tr>
<td>English</td>
<td><input type ="text" /></td>
</tr>
</table>
</form>
I have this table and now I want to get the value of each of input type. how do I get it.
I've tried:
document.getElementById("ResultSheet").rows[2].cells.item(0).innerHTML);
But it did not return anything.
You could use querySelectorAll() like :
document.querySelectorAll('#ResultSheet input');
The loop through the result like the snippet below shown.
Hope this helps.
var inputs = document.querySelectorAll('#ResultSheet input');
for(var i=0;i<inputs.length;i++){
console.log(inputs[i].value);
}
<form id="form1" runat="server">
<table border="1" id="ResultSheet">
<tr id ="Name">
<td> Student Name</td>
<td><input type="text" value="1"/></td>
</tr>
<tr>
<td>Subject Name</td>
</tr>
<tr>
<td>Maths</td>
<td><input type="text" value="2"/></td>
</tr>
<tr>
<td>Science</td>
<td><input type ="text" value="3"/></td>
</tr>
<tr>
<td>English</td>
<td><input type ="text" value="4"/></td>
</tr>
</table>
</form>
Use <form> property elements: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements
Example: https://jsfiddle.net/8co9v0ye/
Hi Please find the below form validation code. I've used html5 input attributes for most of the validation except where i need all letter for the first name and last name. The below cose is what i wrote for first name...but looks like it's not entering the if condition. Can anyone please help
and lemme know where I went wrong.....Thanks Guys!!
<!DOCTYPE html>
<html>
<head>
<script>
function formvalid(){
var uname=document.form1.usrname.value;
var letters=/^[a-zA-Z]+$/;
if (uname.value.match(letters)){
alert("Your details have been saved.Please submit the course fee at the cash counter before 13/12/2014 and collect your id card.The training will start on 23/12/2014 from 10.30am to 4.40 pm");
return true;
}else{
alert("Please Enter a valid Username");
uname.focus();
return false;
}
}
</script>
</head>
<body>
<form name="form1">
<h1> Register Online</h1>
<Table>
<tr>
<td>First Name</td>
<td><input type="text" name="usrname" required></td>
</tr>
<tr>
<td> Last Name</td>
<td><input type="text" id="usrname1" required></td>
</tr>
<tr>
<td> Email ID</td>
<td><input type="email" id="mail" pattern="[^#]+#[a-zA-Z]+\.[a-zA-Z]{2,6}" required></td>
</tr>
<tr>
<td> Roll Number</td>
<td><input type="number" min="1" id="roll" required></td>
</tr>
<tr>
<td>Training Program</td>
<td><select id="sel">
<option value="movie">Select Training</option>
<option value="andro">Android</option>
<option value="java">Java</option>
<option value="C">Robotics</option>
<option value="hack">Ethical Hacking</option>
</select></td>
</tr>
<tr>
<td>Contact Number</td>
<td><input type="number" min="1" id="number" required></td>
</tr>
<tr><td>
<Button type="submit" onclick="return formvalid()">Submit</BUTTON></td>
<td><BUTTON type="reset">Reset</BUTTON>
</td></tr>
</table>
</form>
</body>
</html>
I want to display a certain table when it's selected from the select drop down. This is so far I have got, but it's not working
javascript;
var opt = document.getElementById('select');
opt.onchange = function() {
document.getElementById('t1').style.display = 'none';
document.getElementById('t2').style.display = 'none';
document.getElementById('t3').style.display = 'none';
document.getElementById('t4').style.display = 'none';
document.getElementById('t' + this.value).style.display = '';
html
<select name="select" id="select">
<option selected="selected" disabled="disabled">Please Select</option>
<option value="1">CAT Requests</option>
<option value="2">Stop Bulk Messages</option>
<option value="3">PO - Deposit Transfer</option>
<option value="4">PO - Address Change</option>
</select>
<table id="t1">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>CAT Name</td>
<td><input type="text" name="cat_name"/> </td>
</tr>
<tr>
<td>Artist Name</td>
<td><input type="text" name="art_name"/> </td>
</tr>
<tr>
<td>Language</td>
<td><input type="text" name="lang"/> </td>
</tr>
</table>
<table id="t2">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>
<table id="t3">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Amount</td>
<td><input type="text" name="amt"/> </td>
</tr>
<tr>
<td>Reason to Transfer</td>
<td><input type="text" name="reason_to_transfer"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>
<table id="t4">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Customer Name</td>
<td><input type="text" name="cus_name"/> </td>
</tr>
<tr>
<td>Correct Address</td>
<td><input type="text" name="corr_name"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>
I don't get why the tables are hidden on pageload and shown when the relevant option is selected.
Here you go!
http:/http://jsfiddle.net/tjC59/1/
<body>
<select name="select" id="select" onchange="changeSelection()"><!--Added the onchange Function -->
<option value="0">Please Select</option>
<option value="1">CAT Requests</option>
<option value="2">Stop Bulk Messages</option>
<option value="3">PO - Deposit Transfer</option>
<option value="4">PO - Address Change</option>
</select>
<table id="t1">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>CAT Name</td>
<td><input type="text" name="cat_name"/> </td>
</tr>
<tr>
<td>Artist Name</td>
<td><input type="text" name="art_name"/> </td>
</tr>
<tr>
<td>Language</td>
<td><input type="text" name="lang"/> </td>
</tr>
</table>
<table id="t2">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>
<table id="t3">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Amount</td>
<td><input type="text" name="amt"/> </td>
</tr>
<tr>
<td>Reason to Transfer</td>
<td><input type="text" name="reason_to_transfer"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>
<table id="t4">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Customer Name</td>
<td><input type="text" name="cus_name"/> </td>
</tr>
<tr>
<td>Correct Address</td>
<td><input type="text" name="corr_name"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>
<!-- Good Practice - Always put your scripts at the end of the Html Body -->
<script>
//When the option is changed
var changeSelection = function () {
//Hide all of the elements
hideAll();
//If the select value is > 0 (is valid)
if (document.getElementById("select").value > 0) {
//Set the element display to "block" (block is typically the default display type)
document.getElementById("t" + document.getElementById("select").value).style.display = "block";
}
};
//Function to hide all of the elements
var hideAll = function () {
//Loop through the elements
for (var i = 1; i <= 4; i++) {
//Hide each one
document.getElementById("t" + i).style.display = "none";
}
};
//This function automaticaly executes when the page is loaded
(function () {
//Hide all of the elements
hideAll();
})()
</script>
The problem here is that the default option is selected on pageload. So your onchange handler is fired with the value "Please Select" on pageload. What this does is that it hides all the tables and document.getElementById('tPleaseSelect') is not found, and hence no table is shown.
I have a fiddle working that displays the tables on page load. Then when one of the tables is selected it shows just that table. Your above code works fine besides the fact that you were missing a close };.
Fiddle Here
You can display by the below code slight modification on your code:
<select name="select" id="select" onchange="displayTable();">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function displayTable() {
var opt = document.getElementById('select');
opt.onchange = function () {
document.getElementById('t1').style.display = 'none';
document.getElementById('t2').style.display = 'none';
document.getElementById('t3').style.display = 'none';
document.getElementById('t4').style.display = 'none';
document.getElementById('t' + this.value).style.display = '';
};
}
</script></head>