Ok, so I have this code here and what I am trying to do is read in a character for supersize and if the value is "y" then multiply the price times 1.5 to show fifty percent increase. I'm not really sure where my error is here....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var products=[0,2,3,5,7,8,9,12];
var prices=[3.59,4.99,2.59,1.99,2.99,4.29,3.19,5.29];
var taxes=.06;
var forimages=new Array();
for (var j=0;j<products.length;j++) {
forimages[j]=new Image(200,200);
forimages[j].src="chesssmall.jpg";
}
var thequantity=0;
var thebill=0;
var thetax=0;
var thetotal=0;
var thecode;
var hits=0;
var qbox;
function computebill(form) {
qbox=document.getElementById("quantity");
hits=0;
thecode=parseFloat(form.code.value);
thequantity=parseFloat(form.numbuy.value);
for (var i=0;i<=products.length;i++) {
//why is there an increment thing on the indidual variable below
if (thecode==products[i]){
document.main.src=forimages[i].src;
if(ssize=="y"){
form.price.value=prices[i];
thebill+=(prices[i]*1.5)*thequantity;
form.bill.value=thebill.toFixed(2);
thetax+=(prices[i]*1.5)*thequantity*taxes[i];
form.tax.value=thetax.toFixed(2);
thetotal=thebill+thetax;
form.total.value=thetotal.toFixed(2);
}
else{
form.price.value=prices[i];
thebill+=(prices[i])*thequantity;
form.bill.value=thebill.toFixed(2);
thetax+=(prices[i])*thequantity*taxes[i];
form.tax.value=thetax.toFixed(2);
thetotal=thebill+thetax;
form.total.value=thetotal.toFixed(2);
}
hits=1;
break;
}
}
if (hits==0) {
form.code.value="Item Not Found";
}
form.code.focus();
form.code.select();
}
</script>
<style type="text/css">
.ql {
background-color: #fff;
}
</style>
</head>
<body>
<div style="float:left">
<form>
<table width="377" border="0">
<tr>
<td width="158">Enter Product Code</td>
<td width="232"><input type="text" name="code" id="code" /></td>
</tr>
<tr>
<td>Quantity Buying</td>
<td><input type="text" name="numbuy" id="numbuy" /></td>
</tr>
<tr>
<td>Supersize?</td>
<td><input type="text" name="ssize" id="ssize" /></td>
</tr>
<tr>
<td>The Price</td>
<td><input type="text" name="price" id="price" /></td>
</tr>
<tr>
<td>Bill</td>
<td><input type="text" name="bill" id="bill" /></td>
</tr>
<tr>
<td>Tax </td>
<td><input type="text" name="tax" id="tax" /></td>
</tr>
<tr>
<td>Total Bill</td>
<td><input type="text" name="total" id="total" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" name="forsum" id="forsum" value="Add" onclick="computebill(this.form)"/></td>
</tr>
</table>
</form>
</div>
<img src="window2.jpg" width="200" height="200" name="main" id="main"/>
</body>
</html>
On a stylistic point, rather than:
if(ssize=="y"){
form.price.value=prices[i];
thebill+=(prices[i]*1.5)*thequantity;
form.bill.value=thebill.toFixed(2);
thetax+=(prices[i]*1.5)*thequantity*taxes[i];
form.tax.value=thetax.toFixed(2);
thetotal=thebill+thetax;
form.total.value=thetotal.toFixed(2);
}
else{
form.price.value=prices[i];
thebill+=(prices[i])*thequantity;
form.bill.value=thebill.toFixed(2);
thetax+=(prices[i])*thequantity*taxes[i];
form.tax.value=thetax.toFixed(2);
thetotal=thebill+thetax;
form.total.value=thetotal.toFixed(2);
}
do this:
var theprice = prices[i];
if(ssize=="y"){
theprice *= 1.5;
}
form.price.value=theprice;
thebill+=theprice*thequantity;
form.bill.value=thebill.toFixed(2);
thetax+=theprice*thequantity*taxes[i];
form.tax.value=thetax.toFixed(2);
thetotal=thebill+thetax;
form.total.value=thetotal.toFixed(2);
There are two reasons to suggest this. First, your code says what it means -- namely, in one exceptional case, add 50% to the price, but do everything else the same. Second, it's much easier to add a logging or output statement here to debug what's really wrong with your environment.
Cheers.
Related
I try to get result from html table witch excepted only numbers i check them throw if statement if variable 1 bigger than variable 2 print content and that works good.
Now i am trying in the if statement to print variable 1 - variable 2 but it doesn't wanna work.
Here is the snippet:
$(document).ready(function() {
var vastInkomen = 0;
$('.txtBox').keyup(function() {
vastInkomen = 0;
$('.txtBox').each(function() {
var txtBoxVal = $(this).val();
vastInkomen += Number(txtBoxVal);
});
$('#vastInkomen').val(vastInkomen);
writeResult();
});
var vastLasten = 0;
$('.vast_lasten').keyup(function() {
vastLasten = 0;
$('.vast_lasten').each(function() {
var vastLastenVal = $(this).val();
vastLasten += Number(vastLastenVal);
});
$('#vastLasten').val(vastLasten);
writeResult();
});
function writeResult() {
if (vastInkomen !== 0 && vastLasten !== 0) {
if (vastInkomen > vastLasten) {
$('#result').text("Some text and work good!") +
vastLasten - vastInkomen;
} else if (vastInkomen < vastLasten) {
//$('#result-amount').console(vastInkomen -vastLasten);
$('#result').text("some text and work good.");
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>content1</td>
<td><input class="txtBox" type="number" name="content2" />
</td>
</tr>
<tr>
<td>content3</td>
<td><input class="txtBox" type="number" name="content3" />
</td>
</tr>
<tr>
<td>content4</td>
<td>
<input class="txtBox" type="number" name="content4" />
</td>
</tr>
</table>
<table>
<tr>
<td>content</td>
<td><input class="vast_lasten" type="number" name="content" /></td>
</tr>
<tr>
<td>content1</td>
<td><input class="vast_lasten" type="number" name="content1" /></td>
</tr>
<tr>
<td>content2</td>
<td><input class="vast_lasten" type="texnumber" name="content2" /></td>
</tr>
</table>
<div class="col">
<h3>Het resultaat is:</h3>
<p id="result"></p>
</div>
This will work:
var result = vastLasten - vastInkomen;
$('#result').text("Some text and work good!" + result);
You can use .text() to set the content of an element, but everything should be within the parenthesis.
I added an extra variable result because you cannot use + and - both here; it will result in NaN as it will try to sum the values.
This works as well:
$('#result').text("Some text and work good!" + (vastLasten - vastInkomen));
I found some code on JSBin (http://jsbin.com/lejoxesari/1/edit?html,js,output) which works like a treat, until I try and adapt it to do more! Now I seem to have an error where it won't calculate the second field.
My edited code can be seen below;
<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com
Copyright (c) 2015 by anonymous (http://jsbin.com/fivesocaku/1/edit)
Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<table width="80%" border="0">
<tr>
<th>Qty</th>
<th>1.2m</th>
<th></th>
<th>1.8</th>
<th></th>
</tr>
<tr>
<td><input id="qty" type="text" oninput="calculate()" /></td>
<td><input id="R12" type="text" oninput="calculate()" /></td>
<td><input id="b12" type="hidden" value="5" oninput="calculate()" /></td>
<td><input id="R18" type="text" oninput="calculate()" /></td>
<td><input id="B18" type="hidden" value="2" oninput="calculate()" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script id="jsbin-javascript">
function calculate() {
var myBox1 = document.getElementById('qty').value;
var myBox2 = document.getElementById('b12').value;
var result = document.getElementById('R12');
var myResult = myBox1 * myBox2;
result.value = myResult;
var myBox4 = document.getElementById('b18').value;
var result18 = document.getElementById('R18');
var myResult18 = myBox1 * myBox4;
result.value = myResult;
}
</script>
</body>
</html>
I don't seem to be getting any errors reported, but was wondering if someone could take a look and let me know where my error is.
Thanks!
var myBox4 = document.getElementById('b18').value;
b18 must be UPPERCASE
var myBox4 = document.getElementById('B18').value;
you try to get the element by id b18 instead of B18.
Also, you are assigning the value again to result (overriding it), instead to result18.
If I could offer my 2 cents, use more meaningful names for variables, and have some pattern for it (same casing, with/withour numbers etc)
var myBox4 = document.getElementById('b18').value;
You are getting an element id which doesn't exist
var result18 = document.getElementById('R18');
var myResult18 = myBox1 * myBox4;
result.value = myResult;
The last assignment should be result18.value = myResult you are assignig to the same textbox twice.
I have a problem with the following JavaScript code. It has an error alert said that table value is undefined. I'm trying to update the subtotal in each row by calculate price * qty.
function updateSubtotal() {
var subTotal = 0;
var tables = document.getElementsByTagName("table").rows;
var r = this.parentNode.parentNode.rowIndex;
var j = document.getElementsByTagName(".price").cellIndex;
var s = document.getElementsByTagName(".subtotal").cellIndex;
var price = tables[r].cells[j].value;
var quantity = document.getElementsByTagName("input").value;
var subAmount = price * quantity;
subTotal += Number(subAmount);
// set total for the row
document.getElementsByTagName('table').rows[r].cells[s].innerHTML = '$' + subTotal.toFixed(2);
}
updateTotal();
}
The original code that I tried to update:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
window.onload = setupCart;
function setupCart() {
var qtyInputs = document.querySelectorAll( 'input' );
for ( var i = 0; i < qtyInputs.length; i++ ) {
qtyInputs[ i ].oninput = updateSubtotal;
}
updateTotal();
}
function updateTotal() {
var total = 0;
var subTotals = document.querySelectorAll( '.subtotal' );
for ( var i = 0; i < subTotals.length; i++ ) {
var amount = subTotals[ i ].innerHTML.match( /[0-9]+.[0-9]+/ );
total += Number( amount );
}
document.querySelector( '#total' ).innerHTML = '$' + total.toFixed( 2 );
}
</script>
</head>
<body>
><table>
><tr>
><th>Description</th>
><th>Each</th>
><th>Qty</th>
><th>subtotal</th>
></tr>
<tr class="item">
<td class="description"><img src="red-shirt.jpg" alt="" />Red Crew Neck T-Shirt</td>
<td class="price">$15.00</td>
<td><input type="number" value="1" min="0" /></td>
<td class="subtotal">$15.00</td>
</tr>
<tr class="item">
<td class="description"><img src="tropical-shirt.jpg" alt="" />Blue Tropical Floral Print T-Shirt</td>
<td class="price">$25.00</td>
<td><input type="number" value="1" min="0" /></td>
<td class="subtotal">$25.00</td>
</tr>
<tr class="item">
<td class="description"><img src="black-sneakers.jpg" alt="" />Black Canvas Lace Up Sneakers</td>
<td class="price">$35.00</td>
<td><input type="number" value="1" min="0" /></td>
<td class="subtotal">$35.00</td>
</tr>
<tr class="item">
<td class="description"><img src="black-grey-jacket.jpg" alt="" />Black and Grey Hooded Jacket</td>
<td class="price">$40.00</td>
<td><input type="number" value="1" min="0" /></td>
<td class="subtotal">$40.00</td>
</tr>
<tr class="item">
<td class="description"><img src="black-sunglasses.jpg" alt="" />Black Retro Sunglasses</td>
<td class="price">$15.00</td>
<td><input type="number" value="1" min="0" /></td>
<td class="subtotal">$15.00</td>
</tr>
<tr class="cart-summary">
<td></td>
<td></td>
<th>Total:</th>
<td id="total"></td>
</tr>
</table>
</body>
</html>
The .getElementsByTagName() function returns a NodeList object. If you want the first <table> on the page, you'd use
document.getElementsByTagName("table")[0].rows ...
It would be better to fetch it just once at the start of the function:
var table = document.getElementsByTagName("table")[0];
to avoid having to re-traverse the DOM.
Maybe it's because document.getElementsByTagName doesn't return an element but a list of elements... you have to access the node you need like this document.getElementsByTagName("table")[0].rows
I am just wondering if anyone can help me insert radio buttons into my HTML webpage to insert the difficulty of the exam, This is my question
5. Add a set of radio buttons to the form to accept a level of entry such as GCSE, AS or A2. Write a function that displays the level of entry to the user in an alert box so that the level can be confirmed or rejected.
Here is my code, Can anyone help me out please
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exam Entry</title>
<script language="javascript"" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter your Exam ID Number \n";
document.ExamEntry.subject.focus();
document.getElementById('Exam Number').style.color="red";
result = false;
}
if(msg==""){
return result;
}
{
alert(msg)
return result;
}
}
</script>
<style type="text/css">
h1,h2,h3,h4,h5,h6 {
font-family: "Comic Sans MS";
}
</style>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr> <tr>
<td id="Exam Number">Exam ID Number</td>
<td><input type="Number" name="ID Number"maxlength="4" ></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</body>
</html>
JFiddle:
http://jsfiddle.net/Jgv9q/
Simply add the radio buttons in your html and run code to find out which one was checked. You should be referencing w3Schools when just learning but got you started here.
http://jsfiddle.net/hyysy/1/
<tr>
<td>Exam Level</td>
<td><input type="radio" name="exam" value="GCSE">GCSE<br>
<input type="radio" name="exam" value="AS">AS<br>
<input type="radio" name="exam" value="ALevel">ALevel</td>
</tr>
and then to find out which is checked, you can use:
var x = document.getElementsByName('exam')
for(var k=0;k<x.length;k++)
if(x[k].checked){
alert('Option selected: ' + x[k].value)
}
Read more here:
http://www.w3schools.com/html/html_forms.asp
I have a few radiobuttons in a jsp page. I run a javascript method once the page is loaded that seeks for certain radio buttons and change its name so they work like a radio group.
I'm doing it this way because the radio buttons are inside jsf table and I have no access to the name property when coding and I want all of the radio buttons work like a radio group.
Anyways the script run without problems and the radio buttons' names are changed properly.
But while this works in FF 3 (the work like a radio group) it doesn't work in IE 6 or IE7 though they have the same 'name' property. Does anyone know how can I solve this?
function setRadioGroup (nombreRadio){
var listaRadios = document.getElementsByTagName('input');
var tam = listaRadios.length;
for (i = 0; i < tam; i++){
if (listaRadios[i].type == 'radio' && listaRadios[i].title == 'Seleccionar'){
listaRadios[i].name = nombreRadio;
}
}
}
EDIT: Added the code output of the webpage:
<form id="formulario" name="formulario" method="post"
action="/serequp/faces/administracion/articulosPv.jspx"><input
type="hidden" id="formulario:hidRegTablaArticulos"
name="formulario:hidRegTablaArticulos" value="">
<div class="dr-pnl rich-panel " id="formulario:ContFormularios">
<div class="dr-pnl-h rich-panel-header cabeceraFormulario"
id="formulario:ContFormularios_header">LISTADO DE GRUPOS DE
EQUIPAMIENTOS</div>
<div class="dr-pnl-b rich-panel-body cuerpoFormularios"
id="formulario:ContFormularios_body">
<table id="formulario:botones">
<tbody>
<tr>
<td class="estiloColumnas"><input id="formulario:j_id66"
name="formulario:j_id66"
onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id66':'formulario:j_id66'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id66'} );return false;"
value="Crear" type="button"></td>
<td class="estiloColumnas"><input id="formulario:j_id67"
name="formulario:j_id67"
onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id67':'formulario:j_id67'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id67'} );return false;"
value="Modificar" type="button"></td>
<td class="estiloColumnas"><input id="formulario:j_id68"
name="formulario:j_id68"
onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id68':'formulario:j_id68'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id68'} );return false;"
value="Borrar" type="button"></td>
<td></td>
</tr>
</tbody>
</table>
<table class="dr-table rich-table " id="formulario:tablaArticulos"
border="0" cellpadding="0" cellspacing="0">
<colgroup span="3"></colgroup>
<thead class="dr-table-thead">
<tr class="dr-table-subheader rich-table-subheader ">
<th class="dr-table-subheadercell rich-table-subheadercell "
scope="col" id="formulario:tablaArticulos:j_id69header">
<div id="formulario:tablaArticulos:j_id69header:sortDiv">Nombre</div>
</th>
<th class="dr-table-subheadercell rich-table-subheadercell "
scope="col" id="formulario:tablaArticulos:j_id71header">
<div id="formulario:tablaArticulos:j_id71header:sortDiv">Nombre</div>
</th>
<th class="dr-table-subheadercell rich-table-subheadercell "
scope="col" id="formulario:tablaArticulos:j_id75header">
<div id="formulario:tablaArticulos:j_id75header:sortDiv">Descripción</div>
</th>
</tr>
</thead>
<tbody id="formulario:tablaArticulos:tb">
<tr class="dr-table-firstrow rich-table-firstrow ">
<td class="dr-table-cell rich-table-cell center "
id="formulario:tablaArticulos:0:j_id69">
<table id="formulario:tablaArticulos:0:radioGroup1">
<tr>
<td><input id="formulario:tablaArticulos:0:radioGroup1:0"
type="radio" name="formulario:tablaArticulos:0:radioGroup1"
value="1" onclick="updateSelected('hidRegTablaArticulos', '1');"
title="Seleccionar"><label
for="formulario:tablaArticulos:0:radioGroup1:0"></label></td>
</tr>
</table>
</td>
<td class="dr-table-cell rich-table-cell center "
id="formulario:tablaArticulos:0:j_id71">fff</td>
<td class="dr-table-cell rich-table-cell center "
id="formulario:tablaArticulos:0:j_id75">PRUEBA SDS</td>
</tr>
<tr class="dr-table-firstrow rich-table-firstrow ">
<td class="dr-table-cell rich-table-cell center "
id="formulario:tablaArticulos:1:j_id69">
<table id="formulario:tablaArticulos:1:radioGroup1">
<tr>
<td><input id="formulario:tablaArticulos:1:radioGroup1:0"
type="radio" name="formulario:tablaArticulos:1:radioGroup1"
value="1" onclick="updateSelected('hidRegTablaArticulos', '2');"
title="Seleccionar"><label
for="formulario:tablaArticulos:1:radioGroup1:0"></label></td>
</tr>
</table>
</td>
<td class="dr-table-cell rich-table-cell center "
id="formulario:tablaArticulos:1:j_id71">dd</td>
<td class="dr-table-cell rich-table-cell center "
id="formulario:tablaArticulos:1:j_id75">PRUEBA SDS</td>
</tr>
</tbody>
</table>
<script>
setRadioGroup('radioGroup1');
</script></div>
</div>
<table id="formulario:botonera">
<tbody>
<tr>
<td><input id="formulario:j_id80" name="formulario:j_id80"
onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id80':'formulario:j_id80'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id80'} );return false;"
value="Grabar" type="button"></td>
</tr>
</tbody>
</table>
<input type="hidden" name="formulario" value="formulario"><input
type="hidden" name="autoScroll" value=""><input type="hidden"
name="formulario:j_idcl" value=""><input type="hidden"
name="formulario:_link_hidden_" value=""><script
type="text/javascript">function clear_formulario() {
_clearJSFFormParameters('formulario','',['formulario:j_idcl','formulario:_link_hidden_']);
}
function clearFormHiddenParams_formulario(){clear_formulario();}
function clearFormHiddenParams_formulario(){clear_formulario();}
clear_formulario();</script><input type="hidden" name="javax.faces.ViewState"
value="!40dc077b"></form>*
I finally got the answer!
The solution come from this blog, but with some modification (the blog, as many others, solve the problem for create a new element, not to modify an existant one).
The problem is that Internet Explorer does not allow some attributes modification during the run time. One of these is the attribute name. As it can not be modified, the behaviour is not what you're expecting. The solution is to create a new element, remove the old one and replace it by the new one.
Here the solution (work with Firefox 3 and IE 7):
<script>
function setRadioGroup (name){
var listaRadios = document.getElementsByTagName('input');
var tam = listaRadios.length;
for (i = 0; i < tam; i++){
cur = listaRadios[i];
if (cur.type == 'radio' ){
try {
// if not IE, raise an error and go to catch.
element = document.createElement('<input onclick="alert(this.name + this.value);" type="radio" name="' + name + '" value="' + cur.value + '">');
parentNode = cur.parentNode;
parentNode.insertBefore(element, cur);
parentNode.removeChild(cur);
} catch (err ) {
cur.setAttribute('name', name);
cur.setAttribute('onclick', 'alert(this.name + this.value);');
}
}
}
}
</script>
<html>
<head>
<title>My Page</title>
</head>
<body onload="setRadioGroup('test')">
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center"><br>
<input type="radio" value="Milk"> Milk<br>
<input type="radio" value="Butter" > Butter<br>
<input type="radio" value="Cheese"> Cheese
<hr>
<input type="radio" value="Water"> Water<br>
<input type="radio" value="Beer"> Beer<br>
<input type="radio" value="Wine" > Wine<br>
</div>
</form>
</body>
</html>