Use javascript to show tables via select - javascript

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>

Related

value store in Angularjs Objects and outputting in View

I have a form. It contains Name , quantity & price . I want to get input from form and store in Angularjs Objects. Then i have to output to View the whole array of angular objects. I tried with Angular Array it worked but to show in table ng-repeat not work . So i have to use Objects and output in table
CODE
Form
<div class="leftDev">
<h1>Enter New Product</h1>
<Table>
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" name="naam" ng-model="naam"> </td>
</tr>
<tr>
<td><label for="quantity">Quantity:</label></td>
<td><input type="number" name="quantity" ng-model="quantity"> </td>
</tr>
<tr>
<td><label for="price">Price:</label></td>
<td><input type="text" name="price" ng-model="price"> </td>
</tr>
<tr>
<td></td>
<td><button ng-click='push()'>ADD</button></td>
</tr>
</Table>
OUTPUT Table
<div class="rightDev">
<table border="2">
<tr>
<th>
Name
</th>
<th>
Quantity
</th>
</tr>
<tr ng-repeat="" >
<td >
</td>
<td >
</td>
</tr>
</table>
</div>
Script
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller('myCtrl',function($scope){
$scope.items={
name:"jay",quantity:"100",price:"200"
};
$scope.push = function(){
$scope.items.name.push($scope.naam);
$scope.items.quantity.push($scope.quantity);
$scope.items.price.push($scope.price);
}
})
</script>
So , please show me right way to do it.

myApp.controller('myCtrl',function($scope){
$scope.list = [];
$scope.item = {
name:"jay",quantity:"100",price:"200"
};
$scope.push = function(){
$scope.list.push($scope.item);
$scope.item = {};
}
})
<h1>Enter New Product</h1>
<Table>
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" name="name" ng-model="item.name"> </td>
</tr>
<tr>
<td><label for="quantity">Quantity:</label></td>
<td><input type="number" name="quantity" ng-model="item.quantity"> </td>
</tr>
<tr>
<td><label for="price">Price:</label></td>
<td><input type="text" name="price" ng-model="item.price"> </td>
</tr>
<tr>
<td></td>
<td><button ng-click='push()'>ADD</button></td>
</tr>
</Table>
<div class="rightDev">
<table border="2">
<tr>
<th>
Name
</th>
<th>
Quantity
</th>
</tr>
<tr ng-repeat="obj in list" >
<td >
{{obj.name}}
</td>
<td >
{{obj.quantity}}
</td>
</tr>
</table>
</div>

I need some help to make a dynamic input

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>

Get the value of a column entered by the user

<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/

user have to either not input zip code and it should be of length 5(numbers only) but in my code else if statement line is not working

/* user have to either not input zip code and it should be of length 5(numbers only) but in my code else if statement line is not working. */
<script>
function max(){ /* this is the function to check the input feilds and if find mistake alert the message in to an alert box */
_aa=document.getElementById("s1").value
if(_aa.length>10)
xx="name should be less then or equal to 10 characters"
else xx=""
_bb=document.getElementById("s2").value
if(_bb.length>10)
yy="last name should be less then or equal to 10 characters"
else yy=""
_cc=document.getElementById("s3").value
if(_cc.length<6)
zz="street adress should be greater then or equal to 6 characters"
else zz=""
_dd=document.getElementById("s4").value
if(isNaN(_dd)){jj="fill"}
else if(_dd.length!=5 || _dd.length!=0){jj="fill"} \\this does'nt work
else{jj=""}
alert([xx,yy,zz,jj]);
}
</script>
<html>
<head>
<title>Form</title>
</head>
<body>
<form >
<table>
<tr>
<td colspan="2" align="middle">CHECKOUT FORM <hr/></td>
</tr>
<tr>
<td><strong>First name:</strong></td>
<td><input type="text"id="s1"/ ></td>
<td><p id="a1"></p></td>
</tr>
<tr>
<td><strong>Last name:</strong></td>
<td><input type="text"id="s2" / ></td>
<td><p id="a2"></p></td>
</tr>
<tr>
<td><strong>Street Address:</strong></td>
<td><input type="text"id="s3" maxlength="" / ></td>
<td><p id="a3"></p></td>
</tr>
<tr>
<td><strong>State:</strong></td>
<td><select><option>selet state</option></select></td>
</tr>
<tr>
<td><strong>Zip Code:</strong></td>
<td><input type="text" id="s4"></td>
</tr>
<tr>
<td><strong>Phone:</strong></td>
<td><input type="number"id="s5" min="" max="" / ></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">ORDER INFORMATION <hr/></td>
</tr>
<tr>
<td><strong>Order Subtotal:</strong></td>
<td><input type="number"id="s6" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Shipping Option:</strong></td>
<td><input type="radio"id="s7"value="6.75" name="bt" onclick="calculate(this.value)"/ >UPPS6.75</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s8" value="8.55" name="bt" onclick="calculate(this.value)" / >UPS8.55</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s9"value="10.00" name="bt" onclick="calculate(this.value)" / >FEDERAL EXPRESS10.00</td>
</tr>
<tr>
<td><strong>Shipping cost:</strong></td>
<td><input type="number"id="s10" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Tax(5%):</strong></td>
<td><input type="number"id="s11" min="" max="" / ></td>
</tr>
<tr>
<td><strong>TOTAL:</strong></td>
<td><input type="number"id="s12" min="" max="" / ></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">PAYMENT INFORMATION <hr/></td>
</tr>
<tr>
<td><strong>Credit Card:</strong></td>
<td><input type="radio"id="s13"value="" name="bn" / >American Express</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s14" value="" name="bn" / >Diners Club</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s15"value="" name="bn" / >Discover</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s16"value="" name="bn" / >MasterCard</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s17"value="" name="bn" / >Visa</td>
</tr>
<tr>
<td><strong>Card Number:</strong></td>
<td><input type="number"id="s18" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Expiration:</strong></td>
<td colspan="2"><select id="s19"><option>01</option></select>/
<select><option>2011</option></select>
</td>
</tr>
<tr>
<td><button type="button" onclick="max()" >place</button></td>
<td><input type="submit"id="s21" value="Cancel" / ></td>
</tr>
</table>
</body>
</html>

variable declaration was wrong
Declare all your element value in function start
And declare the all _aa with variable like var _aa
Don't forget to add {} in if else condition
Why is not working?
Because you are declare the _dd in if (_cc.length < 6) in else condition ._dd always null until if (_cc.length < 6) else statement execute
function max() {
var _aa = document.getElementById("s1").value
var _bb = document.getElementById("s2").value
var _cc = document.getElementById("s3").value
var _dd = document.getElementById("s4").value
if (_aa.length > 10) {
var xx = "name should be less then or equal to 10 characters"
} else {
xx = ""
}
if (_bb.length > 10) {
var yy = "last name should be less then or equal to 10 characters"
} else {
yy = "";
}
if (_cc.length < 6) {
var zz = "street adress should be greater then or equal to 6 characters"
} else {
zz = ""
}
if (isNaN(_dd)) {
var jj = "fill"
} else if (_dd.length != 5 || _dd.length != 0) {
jj = "fill length"
} else {
jj = ""
}
console.log([xx, yy, zz, jj]);
}
<form>
<table>
<tr>
<td colspan="2" align="middle">CHECKOUT FORM
<hr/>
</td>
</tr>
<tr>
<td><strong>First name:</strong></td>
<td><input type="text" id="s1" /></td>
<td>
<p id="a1"></p>
</td>
</tr>
<tr>
<td><strong>Last name:</strong></td>
<td><input type="text" id="s2" /></td>
<td>
<p id="a2"></p>
</td>
</tr>
<tr>
<td><strong>Street Address:</strong></td>
<td><input type="text" id="s3" maxlength="" /></td>
<td>
<p id="a3"></p>
</td>
</tr>
<tr>
<td><strong>State:</strong></td>
<td><select><option>selet state</option></select></td>
</tr>
<tr>
<td><strong>Zip Code:</strong></td>
<td><input type="text" id="s4"></td>
</tr>
<tr>
<td><strong>Phone:</strong></td>
<td><input type="number" id="s5" min="" max="" /></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">ORDER INFORMATION
<hr/>
</td>
</tr>
<tr>
<td><strong>Order Subtotal:</strong></td>
<td><input type="number" id="s6" min="" max="" /></td>
</tr>
<tr>
<td><strong>Shipping Option:</strong></td>
<td><input type="radio" id="s7" value="6.75" name="bt" onclick="calculate(this.value)" />UPPS6.75</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s8" value="8.55" name="bt" onclick="calculate(this.value)" />UPS8.55</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s9" value="10.00" name="bt" onclick="calculate(this.value)" />FEDERAL EXPRESS10.00</td>
</tr>
<tr>
<td><strong>Shipping cost:</strong></td>
<td><input type="number" id="s10" min="" max="" /></td>
</tr>
<tr>
<td><strong>Tax(5%):</strong></td>
<td><input type="number" id="s11" min="" max="" /></td>
</tr>
<tr>
<td><strong>TOTAL:</strong></td>
<td><input type="number" id="s12" min="" max="" /></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">PAYMENT INFORMATION
<hr/>
</td>
</tr>
<tr>
<td><strong>Credit Card:</strong></td>
<td><input type="radio" id="s13" value="" name="bn" />American Express</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s14" value="" name="bn" />Diners Club</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s15" value="" name="bn" />Discover</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s16" value="" name="bn" />MasterCard</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s17" value="" name="bn" />Visa</td>
</tr>
<tr>
<td><strong>Card Number:</strong></td>
<td><input type="number" id="s18" min="" max="" /></td>
</tr>
<tr>
<td><strong>Expiration:</strong></td>
<td colspan="2"><select id="s19"><option>01</option></select>/
<select><option>2011</option></select>
</td>
</tr>
<tr>
<td><button type="button" onclick="max()">place</button></td>
<td><input type="submit" id="s21" value="Cancel" /></td>
</tr>
</table>

Calculate the sum of products using a td attribute

I have this table :
<table>
<thead>
<tr>
<th>Quantity</th>
<th> </th>
<th>Price</th>
<th>Sum</th>
</tr></thead>
<tbody>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>German format: </td>
<td data_price="1375.5">1.375,50 €</td>
<td></td>
</tr>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>English format:</td>
<td data_price="1375.5">€1,375.50</td>
<td></td>
</tr>
<tr class="sum">
<td><input name="text" type="text" class="qty" value="1" /></td>
<td>French format:</td>
<td data_price="1375.5">1 375,50 €</td>
<td></td>
</tr>
<tr class="sum">
<td><input name="text2" type="text" class="qty" value="1" /></td>
<td>Italian format:</td>
<td data_price="1375.5">€1,375.50</td>
<td></td>
</tr>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>Spanish format:</td>
<td data_price="1375.5">€ 1.375,50</td>
<td></td>
</tr>
<tr>
<td colspan="3">Total</td>
<td id="total"></td>
</tr>
</tbody>
</table>
and I want to use the value of attribute "data_price" to calculate the SUM like in this link :
http://jsfiddle.net/QmTNZ/77/
I want to use only the attribute "data_price" in calculation and not the .
Please help, I'm still beginner in jquery :)

For your price cells, you should use this format:
<td data-price="1375.5">€1,375.50</td>
i.e. with a hyphen, not underscore
You can then use:
$('td').data('price')
to access its value - see http://api.jquery.com/data
e.g.
var sum = 0;
$('.sum').each(function() {
var q = parseFloat($(this).find('.qty').val());
var p = parseFloat($(this).find('td').eq(2).data('price'));
sum += q * p;
});
$('#total').text(sum);
Working demo at http://jsfiddle.net/alnitak/gzYhN/

Try
var sum=0;
$('tbody > tr > td[data_price]').each(
function()
{
sum += parseFloat(this.attr('data_price'));
}
);

Try this: http://jsfiddle.net/ptfKJ/
This example is using your original HTML code.

Categories

Resources