Why I can not received the value in input from javascript - javascript

Why i dont get the javascript value after calculation in input tag of my htm given
`id=""result"`
while i get this in span id and using document.write(num);
<?php include ('header.php'); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Calculator </title>
</head>
<body>
<form>
<table>
<tr>
<td>
<label style="padding-top: 5px" >Enter Your Per KG Price : </label>
</td>
<td style="padding-left:15px;">
<input type="tex" id="perkg" placeholder="Enter Per KG Price">
</td>
</tr>
<tr>
<td>
<label style="padding-top: 10px" >Enter Your Price : </label>
</td>
<td style="padding-left:15px; padding-top: 10px">
<input id="required" placeholder="Desired Amount">
</td>
</tr>
<tr>
<td>
<input type="button" onClick="multiply()" Value="Multiply" />
</td>
</tr>
<td>
<label style="padding-top: 10px" > Weight Given To Customer In Grams </label>
</td>
<td style="padding-left:15px; padding-top: 10px">
<input id="result" value="" placeholder="In Grams">
</td>
</tr>
</table>
<input type="button" onClick="divideBy()" Value="Divide" />
<p>The Result is : <br>
<span id = "results"></span>
</p>
</form>
<script type="text/javascript">
function multiply()
{
var num1 = document.getElementById("perkg").value;
var num2 = document.getElementById("required").value;
var num = (1000/num1) * num2;
document.getElementById("result").innerHTML = num;
//document.write(num); its working
}
</script>
</body>
</html>


To update input value attribute use value property instead of innerHTML
document.getElementById("result").value = num;

Related

implementing innerHTML to display output by using form

im planning to display my output thru innerHTML but the javascript cant seem to display my input just like i wanted. when user enter input into the form, i want to display the input by using innerHTML.
my attempt output is just in a normal list similar to something like this:
to students
output 1
output 2
output 3
to organizer
k1
k2
k5
<html>
<head>
<title>part b</title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<form onsubmit="printChecked()">
<table>
<tr>
<th colspan="2">
activities
</th>
</tr>
<tr>
<td colspan="2">
list 3 kind of activities that you interest
</td>
</tr>
<tr>
<td>
1. to students
</td>
<td>
<textarea name = "pelajar1" rows = "4" cols = "110"></textarea>
<textarea name = "pelajar2" rows = "4" cols = "110"></textarea>
<textarea name = "pelajar3" rows = "4" cols = "110"></textarea>
</td>
</tr>
<tr>
<td>
TO ORGANIZER
</td>
<td>
<input type="checkbox" name="kl" value="communication">K1
<br>
<input type="checkbox" name="kl" value="problems">K2
<br>
<input type="checkbox" name="kl" value="teamwork">K3
<br>
<input type="checkbox" name="kl" value="info">K4
<br>
<input type="checkbox" name="kl" value="business">K5
<br>
<input type="checkbox" name="kl" value="ethics">K6
<br>
<input type="checkbox" name="kl" value="leadership">K7
<br>
</td>
</tr>
</table>
<br><br>
<input type="Submit" value="Submit">
</form>
<script>
function printChecked()
{
var pel1 = document.getElementsByName('pelajar1');
var pel2 = document.getElementsByName('pelajar2');
var pel3 = document.getElementsByName('pelajar3');
var items=document.getElementsByName('kl');
var selectedItems="";
for(var i=0; i<items.length; i++){
if(items[i].type=='checkbox' && items[i].checked==true)
selectedItems+=items[i].value+"\n";
}
document.getElementsByName("pelajar1").innerHTML = pel1;
document.getElementsByName("pelajar2").innerHTML = pel2;
document.getElementsByName("pelajar3").innerHTML = pel3;
document.getElementsByName("kl").innerHTML = items;
}
</script>
</body>
</html>

try this and see console
<html>
<head>
<title>part b</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<th colspan="2">activities</th>
</tr>
<tr>
<html>
<head>
<title>part b</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<form onsubmit="printChecked">
<table>
<tr>
<th colspan="2">activities</th>
</tr>
<tr>
<td colspan="2">
list 3 kind of activities that you
interest
</td>
</tr>
<tr>
<td>1. to students</td>
<td>
<textarea
id="pelajar1"
rows="4"
cols="110"
></textarea>
<textarea
id="pelajar2"
rows="4"
cols="110"
></textarea>
<textarea
id="pelajar3"
rows="4"
cols="110"
></textarea>
</td>
</tr>
<tr>
<td>TO ORGANIZER</td>
<td>
<br />
<input
type="checkbox"
id="k1"
value="communication"
/>K1
<input
type="checkbox"
id="k2"
value="problems"
/>K2
<br />
<input
type="checkbox"
id="k3"
value="teamwork"
/>K3
<br />
<input
type="checkbox"
id="k4"
value="info"
/>K4
<br />
<input
type="checkbox"
id="k5"
value="business"
/>K5
<br />
<input
type="checkbox"
id="k6"
value="ethics"
/>K6
<br />
<input
type="checkbox"
id="k7"
value="leadership"
/>K7
<br />
</td>
</tr>
</table>
<br /><br />
<input
type="button"
onclick="printChecked()"
value="Submit"
/>
</form>
<div id="form"></div>
<script>
function printChecked() {
var pel1 =
document.getElementById("pelajar1");
var pel2 =
document.getElementById("pelajar2");
var pel3 =
document.getElementById("pelajar3");
var items = [];
for (let i = 0; i < 7; i++) {
var a = document.getElementById(
"k" + (i + 1),
);
a.checked ? items.push(a.value) : null;
}
console.log(
"1 : " +
pel1.value +
"\n2 :" +
pel2.value +
"\n3 :" +
pel3.value,
);
items.forEach((element) => {
console.log(element);
});
}
</script>
</body>
</html>
</tr>
</table>
</form>
</body>
</html>

Okay i am not so clear about what you want to achieve in here, i believe you want the form submit not to do submission and get the details in the function for some kind of computation , i use this as for a javascript approach for preventing default form submit
make use of a return function that returns false stating not to submit the form as in below example
if this satisfies your query, please refer=>
function printChecked() {
var pel1 = document.getElementsByName('pelajar1');
var pel2 = document.getElementsByName('pelajar2');
var pel3 = document.getElementsByName('pelajar3');
var items = document.getElementsByName('kl');
var selectedItems = "";
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox' && items[i].checked == true)
selectedItems += items[i].value + "\n";
}
console.log("pel1-data=> "+pel1[0].value);
console.log("pel2-data=> "+pel2[0].value);
console.log("pel3-data=> "+pel3[0].value);
console.log("checkbox-data=> "+selectedItems);
return false;
}
table,
th,
td {
border: 1px solid black;
}
<form onsubmit="return printChecked()">
<table>
<tr>
<th colspan="2">
activities
</th>
</tr>
<tr>
<td colspan="2">
list 3 kind of activities that you interest
</td>
</tr>
<tr>
<td>
1. to students
</td>
<td>
<textarea name="pelajar1" rows="4" cols="110"></textarea>
<textarea name="pelajar2" rows="4" cols="110"></textarea>
<textarea name="pelajar3" rows="4" cols="110"></textarea>
</td>
</tr>
<tr>
<td>
TO ORGANIZER
</td>
<td>
<input type="checkbox" name="kl" value="communication">K1
<br>
<input type="checkbox" name="kl" value="problems">K2
<br>
<input type="checkbox" name="kl" value="teamwork">K3
<br>
<input type="checkbox" name="kl" value="info">K4
<br>
<input type="checkbox" name="kl" value="business">K5
<br>
<input type="checkbox" name="kl" value="ethics">K6
<br>
<input type="checkbox" name="kl" value="leadership">K7
<br>
</td>
</tr>
</table>
<br><br>
<input type="Submit" value="Submit">
</form>
you can see return for onsubmit of form which gets value from the function printChecked() -> see last return statement in function
Additional
for jquery inside the called function definition we can just add the received event's preventDefault function
$("form").submit(function(event){
event.preventDefault();
});
Edit-> prints data on the same page using innerHtml
function printChecked() {
var pel1 = document.getElementsByName('pelajar1');
var pel2 = document.getElementsByName('pelajar2');
var pel3 = document.getElementsByName('pelajar3');
var items = document.getElementsByName('kl');
var selectedItems = "";
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox' && items[i].checked == true)
//selectedItems += items[i].value + "\n";
//add values as li elements
selectedItems += '<li>'+ items[i].value + '</li>';
}
//show list on submit
document.getElementById("toStudents").style.display = "block";
document.getElementById("toOrganizer").style.display = "block";
//add tostudents text area values in to list
document.getElementById("pelajar1").innerHTML=pel1[0].value;
document.getElementById("pelajar2").innerHTML=pel2[0].value;
document.getElementById("pelajar3").innerHTML=pel3[0].value;
//add toorganizer checkbox values in to list
document.getElementById("toOrganizer").innerHTML=selectedItems;
//just printing values in console
//console.log("pel1-data=> "+pel1[0].value);
//console.log("pel2-data=> "+pel2[0].value);
//console.log("pel3-data=> "+pel3[0].value);
//console.log("checkbox-data=> "+selectedItems);
return false;
}
table,
th,
td {
border: 1px solid black;
}
/*list is hidden at first*/
#toStudents,#toOrganizer{
display:none;
list-style:none;
}
<form onsubmit="return printChecked()">
<table>
<tr>
<th colspan="2">
activities
</th>
</tr>
<tr>
<td colspan="2">
list 3 kind of activities that you interest
</td>
</tr>
<tr>
<td>
1. to students
</td>
<td>
<textarea name="pelajar1" rows="4" cols="110"></textarea>
<textarea name="pelajar2" rows="4" cols="110"></textarea>
<textarea name="pelajar3" rows="4" cols="110"></textarea>
</td>
</tr>
<tr>
<td>
TO ORGANIZER
</td>
<td>
<input type="checkbox" name="kl" value="communication">K1
<br>
<input type="checkbox" name="kl" value="problems">K2
<br>
<input type="checkbox" name="kl" value="teamwork">K3
<br>
<input type="checkbox" name="kl" value="info">K4
<br>
<input type="checkbox" name="kl" value="business">K5
<br>
<input type="checkbox" name="kl" value="ethics">K6
<br>
<input type="checkbox" name="kl" value="leadership">K7
<br>
</td>
</tr>
</table>
<br><br>
<input type="Submit" value="Submit">
<h2>To Students</h2>
<ul id="toStudents">
<li id="pelajar1"></li>
<li id="pelajar2"></li>
<li id="pelajar3"></li>
</ul>
<h2>To Organizer</h2>
<ul id="toOrganizer">
</ul>
</form>

the issue you seem to be experiencing is from the page reloading on the form submit BEFORE the JS function is called. Based on your code, you are calling printChecked() onsubmit when the button is clicked.
To fix your issue, look into Stop form refreshing page on submit, which, among other things, would involve adding return false to your onsubmit call. Other solutions from the same page mention not using button type="submit", and instead focusing on using the type="button" with a separate call from there onclick.
Hopefully this helps!

Conflict in including of a file

I'm trying to include a file which generates 2 random numbers that needs to be add or what we call captcha. I have two logins: one that requires employee id, birthdate, and the captcha answer(Which I call the easy login). While the other one requires your first name, last name, birthdate, and captcha(I call it the standard login). So I have two radio buttons for the user to choose whether an easy login or standard login. So I'm encountering this problem when you choose a login then you need to answer the captcha (The captcha sends sessions for its answer) so whats happening right know is that the captcha in the easy login is always being override by the captcha in the standard login. What I thought that I would do is set a condition where if the radio button is selected (easy login) then thats the time it will be included. But I don't know how to do that.
Here is the captcha code:
captcha.php
<?php
session_start();
$n1=rand(1,6); //Generate First number between 1 and 6
$n2=rand(5,9); //Generate Second number between 5 and 9
$answer=$n1+$n2;
$math = "What is ".$n1." + ".$n2." ? ";
$_SESSION['vercode'] = $answer;
print $math;
?>
Then here is the code for my interface:
index.php
<SCRIPT TYPE="text/javascript">
function toggleTables(which)
{
if(which == "0") {
document.getElementById('standard').style.display = "table";
document.getElementById('customize').style.display = "none";
}
if(which == "1") {
document.getElementById('customize').style.display = "table";
document.getElementById('standard').style.display = "none";
}
}
</SCRIPT>
</head>
<body style="background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;" >
<?php include('../include/logoheader.php'); ?>
<div class="row">
<div class="twelve columns">
<hr />
</div>
</div>
<div class="row">
<div class="two columns">
</div>
<div class="eight columns">
<div class="content">
<?php include('../include/retain-empid.php'); ?>
<br>
<input name="radio" type="radio" id="customize_1" onClick="toggleTables('0')" value="radio" /><font color="white">Standard Login</font>
<input name="radio" type="radio" id="customize_0" onClick="toggleTables('1')" value="radio" checked="checked"/><font color="white">Easy Login</font>
<form name="loginform" action="login_exec.php" method="post" >
<center><?php include('../function/login_errmsg.php'); ?></center>
<table width="100%" class="imagetable" cellpadding="0" cellspacing="0" id="customize">
<tr>
<th colspan="4">
Easy Log-in For Registered Convergys Employees
</th>
</tr>
<tr>
<td align="right">
<label>Employee Number</label>
</td>
<td>
<input type="text" placeholder="Employee Number" name="txt_EmpID" autoComplete="off" value=<?php echo $value; ?> >
</td>
<td align="right">
<label>Birthday</label>
</td>
<td>
<input type="date" class="" placeholder="Birthday" id="txt_BDate" name="txt_BDate" autoComplete="off" maxlength = "10"
style ="width:170px;"/>
</td>
</tr>
<tr>
<td align="right">
<label class="labels" align="center">
<strong>
</strong>
</label>
</td>
<td>
<?php
include ('../include/mathcaptcha.php');
?>
</td>
<td>
<input name="captcha" type="text" placeholder="Answer to math question">
</td>
<td>
</td>
<td>
<input type="submit" id="submit" name="btn_refer" class="btn" value="Submit"
style=" width: 170px; height: 30px; font-size: 11pt; ">
</td>
</tr>
</table>
</form>
<form action="otherlogin_exec.php" method="post">
<table width="100%" class="imagetable" cellpadding="0" cellspacing="0" id="standard" style="display: none">
<tr>
<th colspan="4">
Standard Log-in For All Registered Users
</th>
</tr>
<tr>
<td align = "right">
<label>First name:</label>
</td>
<td>
<input type="text" placeholder="First Name" name="txtFirstName" autoComplete="off" >
</td>
<td>
<label>Last name:</label>
</td>
<td>
<input type="text" placeholder="Last Name" name="txtLastName" autoComplete="off" >
</td>
</tr>
<tr>
<td>
<label>Birthday:</label>
</td>
<td>
<input type="date" class="" placeholder="Birthday" id="txt_BDate"
name="txtPassword" autoComplete="off" maxlength = "10" style = "width:170px;"/>
</td>
<td>
<label class="labels" align="center">
<strong>
</strong>
</label>
</td>
<td>
<?php
include ('../include/mathcaptcha.php');
?>
</td>
<td>
<input name="captcha" type="text" placeholder="Answer to math question">
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<input type="submit" id="submit" name="btn_refer" class="btn" value="Submit"
style=" width: 100%; height: 30px; font-size: 11pt; ">
</td>
</tr>
</table>
</form>
</div>
</div>

Make the first line of your file
<?php include_once ('../include/mathcaptcha.php'); ?>
then change the lines from
<td>
<?php
include ('../include/mathcaptcha.php');
?>
</td>
to
<td><?php echo $math;?></td>
and take the print out of the captcha file. PHP doesnt affect the design of pages only the outputted data does which should be altered as needed.

Form validation using Jquery focus and blur method

I am trying to do simple form validation by using jQuery. Actually I am try to validate the input boxes on blur and focus. I am just validating first input for now which validate user first name.It is not functioning properly.
Can any please help me?
HTML & JS CODE:
<!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>
Test
</title>
<style type="text/css">
.showerror{
display:block;
}
.noshowerror{
display:none;
}
.remerr{
display:none;
}
.redborder{
border:#F00 solid 1px;
background-color:yellow;
}
.greenborder {
border:#0F3 solid 1px;
background-color:#6F6;
}
</style>
</head>
<body>
<div style="width:450px">
<div style="float:left">
<table>
<form id="eg">
<tr>
<td>
<label>
Name:
</label>
<td>
<input type="text" id="name" />
</tr>
<tr>
<td>
<label>
Surname:
</label>
<td>
<input type="text" id="surname" />
</tr>
<tr>
<td>
<label>
Email:
</label>
<td>
<input type="text" id="email" />
</tr>
<tr>
<td>
<label>
Number:
</label>
<td>
<input type="text" id="number" />
</tr>
<tr>
<td>
<label>
Age:
</label>
<td>
<input type="text" id="age" />
</tr>
<tr>
<td>
<label>
Comment:
</label>
<td>
<input type="text" id="comment" />
</tr>
<tr>
<td>
<label>
Password
</label>
<td>
<input type="password" id="pwd" />
</tr>
<tr>
<td>
<label>
Confirm Password
</label>
<td>
<input type="password" id="cnfmpwd" />
</tr>
<tr>
<td colspan="2">
<input type="submit" value="test" />
</td>
</tr>
</form>
</table>
</div>
<div style="float:right">
<p id="fail" class="noshowerror" >
Please enter name
</p>
<p id="nameerr2" class="remerr">
Name is correct
</p>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
});
$('#name').blur(function () {
var nameRegex = /^[A-Za-z]+$/;
var fname = document.getElementById("name").value;
if (!nameRegex.test(fname)) {
$("#name").addClass('redborder');
} else if (fname == " ") {
$("#name").addClass('redborder');
} else {
$("#name").addClass('greenborder');
return false;
}
});
});
</script>
</body>
</html>
Thanks in advance

I have refined our code and its working as you intended, there were several mistake in defining the elements within table,may be you can have a look at my code on how to define it .
LIVE DEMO
HTML CODE:
<body>
<div style="width:450px">
<div style="float:left">
<form id="eg" action="/">
<table>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" id="name" />
</td>
</tr>
<tr>
<td>
<label>Surname:</label>
</td>
<td>
<input type="text" id="surname" />
</td>
</tr>
<tr>
<td>
<label>Email:</label>
</td>
<td>
<input type="text" id="email" />
</td>
</tr>
<tr>
<td>
<label>Number:</label>
</td>
<td>
<input type="text" id="number" />
</td>
</tr>
<tr>
<td>
<label>Age:</label>
</td>
<td>
<input type="text" id="age" />
</td>
</tr>
<tr>
<td>
<label>Comment:</label>
</td>
<td>
<input type="text" id="comment" />
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input type="password" id="pwd" />
</td>
</tr>
<tr>
<td>
<label>Confirm Password</label>
</td>
<td>
<input type="password" id="cnfmpwd" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="test" onclick="return false;" />
</td>
</tr>
</table>
</form>
</div>
</div>
<div style="float:right">
<p id="fail" class="noshowerror">Please enter name</p>
<p id="nameerr2" class="remerr">Name is correct</p>
</div>
</body>
JS CODE:
$(document).ready(function () {
if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
});
$('#name').blur(function () {
var nameRegex = /^[A-Za-z]+$/;
// var fname = document.getElementById("name").value;
var fname = $("#name").val();
alert(nameRegex.test(fname));
if (!(nameRegex.test(fname))) {
$("#name").removeClass('greenborder').addClass('redborder');
} else if (fname == " ") {
$("#name").removeClass('greenborder').addClass('redborder');
} else {
$("#name").removeClass('redborder').addClass('greenborder');
return false;
}
});
});
When your using jQuery lib, make sure you make the most of it, i have seen that there was raw javascript syntax in your code. jQuery was designed make things easier by reducing the syntax.
Edited:
I have refined the code, so that the code work on any number of times.
Happy Coding :)

$('#name').blur(function(){
trigger the blur event.
To listen for the blur event, made by the user :
$('#name').on("blur", function(){

if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
can be changed by :
<input type="text" name="name" id="name" placeholder="Name Please" />
http://www.w3schools.com/tags/att_input_placeholder.asp
For your issue :
var fname = $("#name").val(); //jQuery style
$('#name').on("blur", function(){
// we want element #name a range of letters
var regexp = /^([A-Za-z])+$/;
// if the element #name contains a range of letters defined in var regexp
if (!nameRegex.test(fname)) {
$("#name").addClass('redborder');
return true;
}
// if the element #name is empty, does not contain string
if ( $("name").length === 0 ) {
$("#name").addClass('redborder');
return true;
}
// if we are still here, means that the element #name is valid
$("#name").addClass('greenborder');
return false;
}
// on focus name input
$("#name").on("focus", function() {
// if the input get the redborder class, then reset
if ( fname.hasClass("redborder") ){
fname.removeClass("redborder");
}
}

Javascript Calculation - If Statement

I would like to display a different option for different choices.
If MenuNo1 (textinput) equal either 1,2,3,4 or 5 - then the value of menuPrice1 should be R70.00.
If MenuNo1(textinput) equal either 8,9,12 - then the value of menuPrice1 should be R85.00.
If MenuNo1 (textinput) equal 11 - then the value of menuPrice1 should be R105.00.
I have tried doing it this way: However nothing appears in the MenuPrice1 field? There are also no errors in the console.
function calcMenu(form) {
var MenuPrice1 = (+form.MenuPrice1.value);
var MenuNo1 = (+form.MenuNo1.value);
if ([1,2,3,4,5].indexOf(+form.MenuNo1.value) != -1) {
MenuPrice1.value = "70";
}
else if ([8,9,12].indexOf(+form.MenuNo1.value) != -1) {
MenuPrice1.value = "85";
}
else if (+form.MenuNo1.value == 11) {
MenuPrice1.value = "105";
}
}
HTML
<form id="quote" action="" method="get">
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function($) {
jQuery('#quote').change(function() {
doTotal(this)
});
});
// ]]>
</script>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function($) {
jQuery('#quote').change(function() {
calcMenu(this)
});
});
// ]]>
</script>
<table width="532" border="1" cellspacing="1" cellpadding="0.5">
<tbody>
<tr>
<th scope="col" width="70">
<div align="center">
Date
</div></th>
<th scope="col" width="158">
<div align="center">
Amount of Delegates ½ Day Conference # R 240 pp
</div></th>
<th width="112">
<div align="center">
Amount of Delegates Full Day Conference # R 260 pp
</div></th>
<th width="112">
<div align="center">
Menu No
</div></th>
<th width="112">
<div align="center">
Price pp for Menu (1-7: R70, 8-10 R85, 11: R105, 12: R85)
</div></th>
<th width="134">
<div align="center">
Total for the day
</div></th>
</tr>
<tr>
<td>
<div align="center">
<input type="text" name="date1" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="halfday1" size="15" maxlength="10" />
</div></td>
<td>
<div align="center">
<input type="text" name="fullday1" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="MenuNo1" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="MenuPrice1" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="total1" size="15" />
</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="text" name="date2" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="halfday2" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="fullday2" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="MenuNo2" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="MenuPrice2" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="total2" size="15" />
</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="text" name="date3" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="halfday3" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="fullday3" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="MenuNo3" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="MenuPrice3" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="total3" size="15" />
</div></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</form>

You have var MenuPrice1 = (+form.MenuPrice1.value); and are doing MenuPrice1.value = later on.
Also there is a cleaner way to do this that would make it easier to maintain in the future too.
Fiddle: http://jsfiddle.net/8q7Fh/3
var prices = [
{
values: [1,2,3,4,5],
price: 'R70.00'
},
{
values: [8,9,12],
price: 'R85.00'
},
{
values: [11],
price: 'R105.00'
}
];
function calcMenu(form)
{
var i, searchValue = parseInt(form.MenuNo1.value);
form.MenuPrice1.value = '';
for (i in prices)
{
if ($.inArray(searchValue, prices[i].values) != -1)
{
form.MenuPrice1.value = prices[i].price;
}
}
}
Notes: You are currently missing prices for when the values are either 6, 7 and 10. For now I've set it so that it will clear the value in the MenuPrice if it cannot find a definite price. Something to think about!

Adding up form values with JavaScript

How would I use JavaScript to add up some values from a form? I want to display the value in a read-only text field at the bottom of the form. Here is my code so far, I have made each form value the value of what I want to add:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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 type="text/javascript">
function checkAll(){
document.getElementById("notop").checked=false;
}
function uncheckAll(field)
{
for (i = 0; i < field.length; i++)
field[i].checked = false ;
}
</script>
</head>
<body>
<div class="head">
<h3 align="center">Gourmet Pizza</h3>
</div>
<div class="main">
<form action="" method="get" name="pizza">
<table border="1" cellpadding="5" cellspacing="3">
<tr>
<td>Name:</td>
<td><input name="name" type="text" id="name" /></td>
</tr>
<tr>
<td>E-Mail:</td>
<td><input name="email" type="text" id="email" /></td>
</tr>
<tr>
<td>Phone:</td>
<td><input name="name" type="text" id="phone"/></td>
</tr>
<tr>
<td style="border:none"><input name="size" type="radio" value="8.00" id="small" onclick="this.form.total.value=calculateTotal(this);" > <label for="small">Small ($8.00)</label></td>
<td style="border:none">
<input type="checkbox" name="topping" id="pepperoni" value="0.50" onClick="checkAll(document.pizza.topping)" class="top"/>
<label for="pepperoni">Pepperoni
</label>
<input type="checkbox" name="topping" id="sausage" value="0.50" onClick="checkAll(document.pizza.topping)" class="top" />
<label for="sausage">Sausage
</label>
</td>
</tr>
<tr>
<td style="border:none"><input name="size" type="radio" value="10.00" id="medium" onclick="this.form.total.value=calculateTotal(this);" /> <label for="medium">Medium ($10.00)</label></td>
<td style="border:none">
<input type="checkbox" name="topping" id="mushroom" value="0.50" onClick="checkAll(document.pizza.topping)" class="top"/>
<label for="mushroom">Mushroom
</label>
<input type="checkbox" name="topping" id="olive" value="0.50" onClick="checkAll(document.pizza.topping" class="top"/>
<label for="olive">Olive
</label>
</td>
</tr>
<tr>
<td style="border:none"><input name="size" type="radio" value="12.00" id="large" onclick="this.form.total.value=calculateTotal(this);" onselect="addTwelve()"/> <label for="large">Large ($12.00)</label></td>
<td style="border:none">
<input type="checkbox" name="Un_CheckAll" value="0.00" id="notop" class="none" onClick="uncheckAll(document.pizza.topping)"/>
<label for="notop">No Toppings (Cheese Pizza)
</label>
</td>
</tr>
<tr>
<td colspan="2">
Your Order:<br />s
<textarea name="" colums="2">
</textarea>
</td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" name="button" id="button" value="Process Order" />
<input type="reset" name="button2" id="button2" value="Clear Order" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Any help is greatly appreciated!

you can do something like this
var total = 0;
window.onload = function() {
var toppings = document.pizza.topping;
for (var i = 0, l = toppings.length; i < l; i++) {
toppings[i].addEventListener("change", function() {
if (this.checked) {
total += parseFloat(this.value);
} else {
total -= parseFloat(this.value);
}
alert(total);
}, false);
}
};
see example here

Categories

Resources