textbox onblur get value do calculation

jswannabe · 11-07-2012, 06:10 PM

I am trying to teach myself javascript. I found http://www.webmonkey.com/2010/02/Jav...ial_-_Lesson_1 very valuable - the only tutorial I actually understood.

In a different trial, I have succeeded to capture user data with a prompt and then run two conditional if statements...

...but, prompts seem old and dumb to me so I am trying to capture user data with a textbox instead of a prompt and I'm running into failure. Here is what I am trying to do:
1. user puts data into textbox
2. I get value of textbox
3. I do a calculation with that value
4. I write the answer

This is what I've got:
Enter your birth year: <input type="text" id="birthyear" onblur="age ()">

<script>
function age()
{
var birthyear = document.getElementById('birthyear').value;
var today = 2012;
var age = today - birthyear;
document.writeln (age);
}
</script>

Please don't be too harsh on me

If you have a good tutorial to refer me to that'd be awesome too.

sunfighter · 11-08-2012, 01:17 PM

You never asked a question. Your code is fine, it works.

You should be aware of http://www.w3schools.com/ // http://www.w3schools.com/js/default.asp // http://www.w3schools.com/jsref/default.asp

jswannabe · 11-12-2012, 09:14 PM

My question was meant to be: why isn't this working? What am I doing wrong? But I tried it again and it worked so I don't know what went wrong the first time. Thank you for replying!

I'm slowly getting better. This is my latest thing that worked. I'm thinking there has to be a better way though.

Code:

<!DOCTYPE HTML>


<html>
<head>
<title>Calculate Form</title>
<link rel="stylesheet" href=".css">
<style>
label {display:block; width:250px; float:left; text-align:right;}
</style>
</head>
<body>


<form id="orderchocolates">
<fieldset>
<legend>Chocolates</legend>



<label for="almondcases">Almonds Case (30 unit per case): $48.00 </label>
<input type="text" size="4" id="almondcases" onblur="almondtotalfunction()" autofocus="autofocus"> 
<span id="almondtotalspan">Total: </span><br/>

 
<label for="caramelcases">Caramel Case (30 unit per case): $48.00</label>
<input type="text" size="4" id="caramelcases" onblur="carameltotalfunction()"> 
<span id="carameltotalspan">Total: </span><br/>

 
<label for="mintcases">Mint Case (30 unit per case): $48.00</label>
<input type="text" size="4" id="mintcases" onblur="minttotalfunction()"> 
<span id="minttotalspan">Total: </span><br/>



<label for="totalcost">Grand Total:</label>
<input type="text" size="4" id="totalcost" onfocus="grandtotalfunction()"><br/>

<input type="button" onclick="formReset ()" value="Clear Form">

</fieldset>
</form>

<script>
function almondtotalfunction()
{
var almondcasesvalue = document.getElementById("almondcases").value;
var almondcalculate = almondcasesvalue*48;
var almondspan = document.getElementById("almondtotalspan");
var almondDecimal = almondcalculate.toFixed(2);
almondspan.innerHTML = "Total: $" + almondDecimal;

}

function carameltotalfunction()
{
var caramelcasesvalue = document.getElementById("caramelcases").value;
var caramelcalculate = caramelcasesvalue*48;
var caramelspan = document.getElementById("carameltotalspan");
var caramelDecimal = caramelcalculate.toFixed(2);
caramelspan.innerHTML = "Total: $" + caramelDecimal;
}

function minttotalfunction()
{
var mintcasesvalue = document.getElementById("mintcases").value;
var mintcalculate = mintcasesvalue*48;
var mintspan = document.getElementById("minttotalspan");
var mintDecimal = mintcalculate.toFixed(2);
mintspan.innerHTML = "Total: $" + mintDecimal;

}

function grandtotalfunction()
{
var almondcasesvalue = document.getElementById("almondcases").value;
var almondcalculate = almondcasesvalue*48;
var caramelcasesvalue = document.getElementById("caramelcases").value;
var caramelcalculate = caramelcasesvalue*48;
var mintcasesvalue = document.getElementById("mintcases").value;
var mintcalculate = mintcasesvalue*48;
var GrandTotalSum = almondcalculate + caramelcalculate + mintcalculate;
var GrandTotalField = document.getElementById ("totalcost");
var GrandTotalFieldDecimal = GrandTotalSum.toFixed(2);
GrandTotalField.value = "$" + GrandTotalFieldDecimal;

}

function formReset ()
{
document.getElementById("orderchocolates").reset();
}





</script>



</body>
</html>

sunfighter · 11-13-2012, 02:06 PM

Instead of using a span for the total, use a div

Code:

<div id="almondtotal">Total: </div><br>

and style it with

Code:

div{display:inline;}

You can combine all three functions into one by sending it attributes to define the id="almondcases" and the id="almondtotalspan".
You should limit the number of digits that can be inputed, you can now do infinite and only allow numbers to be inputted.

Get rid of the box around the Grand Total . You can get numbers larger than the box size. Automatically figure the Grand Total and display it constantly. Hint: don't put it in a function.

jswannabe · 11-13-2012, 07:03 PM

It never occurred to me that I could combine those 3 scripts. I shall experiment.
I never knew you could limit the number of digits inputted or exclude letters. I shall google a tutorial on that.

Don't I need to keep the Grand Total in an input box so the total gets sent with the form data submission? I found that data in divs doesn't get sent...perhaps because I didn't name them, only id'd them. Hmm. I'll have to experiment with adding ids AND names to divs and see if the data gets sent. My newest version has names added to the input values and it submits the values now.

As for displaying a running total, that sounds awesome. I'm intrigued that it doesn't involve a function. So I'm thinking it is a variable that is the sum and a variable that is an innerHTML. I shall experiment with that to test it out.

On a side note, can the data sent by a form submitted by mailto contain CSS so that when the data shows up in the email it doesn't look like ...crap?

Thank you for your guidance sunfighter

felgall · 11-13-2012, 08:56 PM

You can't add names to divs - names are only valid on form fields and are what the server side processing uses as the field names for the data that is passed to it.

There is no need to store any calculated value in a hidden field to pass it to the server as the server is going to need to recalculate it anyway for when the form is submitted by people without JavaScript.

You are right that you shouldn't be using prompt. The prompt() confirm() and alert() dialogs were repurposed after Netscape 4 dies and are now suitable for debugging use only. Some browsers add checkboxes to them to make their use for debugging easier as you can check the checkbox to disable the dialogs or JavaScript (depending on the browser).

document.write and document.writeln went out of use at the same time since innerHTML is able to update the page after it finishes loading .

Embedding any JavaScript in the HTML is now unnecessary as you can easily attach the event handlers from within the JavaScript code. For example get rid of the onblur="age ()" form the HTML and add

Code:

document.getElementById('birthyear').onblur=age;

in the JavaScript instead.

Ideally you would wrap each JavaScript inside an anonymous function to reduce the chances of them interfereing with other scripts you might add to the page at a later time. To avoid the possibility of script clashes in trying to use the same event handler on the same element for different purposes you can substitute event listeners - but at the moment that involves slightly more code as IE8 and earlier use a different call to do it).

You can't submit a form to email using mailto: as modern browsers don't allow it - they will simply open the email program instead and ignore what was filled out in the form. You should use a form2mail script on the server instead to send the form to an email.

jswannabe · 11-14-2012, 01:41 AM

Shut the front door!
You can have javascript-free HTML? What do I google to learn that?!!

I'm using the mailto because I don't have a server to work with and I don't think I am ready to learn how to do that yet. I'm still trying to wrap my head around javascript. Mailto is working from my google chrome browser to my Windows Live Mail.

Ya, re:names on divs doesn't work. I experimented with that this afternoon and figured out that doesn't work.

Quote:

"There is no need to store any calculated value in a hidden field to pass it to the server as the server is going to need to recalculate it anyway for when the form is submitted by people without JavaScript."

[I'd ask why but I think the answer is way over my head right now.]

Quote:

The prompt() confirm() and alert() dialogs were repurposed after Netscape 4 dies and are now suitable for debugging use only.

Ok, so what should I do then if, as suggested, I put in a javascript code that limits the amount of digits, or excludes letter characters? The tutorial I read today suggested an alert box if users type in the wrong thing. Do I make a warning div to do an innerHTML warning message?

So much to learn. So much to learn.

jswannabe · 11-15-2012, 10:57 PM

Ok, from both of your suggestions, this is what I have now.

Code:

<!DOCTYPE HTML>


<html>
<head>
<title>javascriptCalculate fix3.2</title>

<link rel="stylesheet" href=".css">
<style>
form#orderchocolates {background: #85E085; font-family:arial; font-size:12px;}
label {display:block; width:250px; float:left; text-align:right; }
input {text-align:center;}
legend {font-size:20px;  }
.totalalign {display:inline;}
.warning {display:inline; background: white; color:red; font-size:14px;}


</style>

</head>
<body>


<form onclick="value=" action="mailto:me@myprovider.eh?subject=Chocolate Order" method="post" enctype="text/plain"  id="orderchocolates" name="Order Chocolates" >
<!--add this code to the form onsubmit="return validate()" and write the function that won't let you submit if things are wrong. I'm going to have to look up a tutorial on that...-->
<fieldset>
<legend>Chocolates</legend>



<label for="almondcases">Almonds Case (30 unit per case): $48.00 </label>
<input type="text" size="4" tabindex=1 id="almondcases" name="I'm ordering this many cases of almonds...." onblur="subtotalfunction()" autofocus="autofocus"> 
<div class="totalalign">Total: </div>
<input type="text" size="4" id="almondsubtotal" name="almond subtotal"  onblur="almondsubtotal ()">
<div id="almondwarning" class="warning"></div>
 <br/>

 
<label for="caramelcases">Caramel Case (30 unit per case): $48.00</label>
<input type="text" size="4" tabindex=2 id="caramelcases" name="I'm ordering this many cases of caramels..." onblur="subtotalfunction()"> 
<div class="totalalign">Total: </div>
<input type="text" size="4" id="caramelsubtotal" name="caramel subtotal" onblur="caramelsubtotal ()">
<div id="caramelwarning" class="warning"></div>
<br/>

 
<label for="mintcases">Mint Case (30 unit per case): $48.00</label>
<input type="text" size="4" tabindex=3 id="mintcases" name="I'm ordering this many cases of mints........." onblur="subtotalfunction()"> 
<div class="totalalign">Total: </div>
<input type="text" size="4" id="mintsubtotal" name="mint subtotal" onblur="mintsubtotal()">
<div id="mintwarning" class="warning"></div>
<br/>


<label for="totalcost">Grand Total:</label>
<input type="text" size="4" tabindex=4 id="totalcost" name="Total Cost....................................................." onfocus="grandtotalfunction()"><br/>

<input type="button" onclick="formReset ()" value="Clear Form"><br/>
</fieldset>


<fieldset>  
<legend>Billing & Shipping Address</legend>  
<label for="first name">First Name</label>
<input id="firstname" name="firstname" type="text" /><br/>
<label for="last name">Last Name</label>
<input id="lastname" name="lastname" type="text" /><br/>
<label for="street">Street address</label>  
<input id="street" name="street" type="text" /><br/>  
<label for="city">City</label>  
<input id="city" name="city" type="text" /> <br/> 
<label for="province">Province</label>  
<input id="province" name="province" type="text" /> <br/> 
<label for="postalcode">Postal Code</label>  
<input id="postalcode" name="postalcode" type="text" /> <br/> 
</fieldset>  

<input type="submit" value="Submit">
</form>




<script>
var warningnumeral= "You may only enter numerals in this field!";
var warningcasemax= "Maximum number of cases is 100";

function subtotalfunction()
{
var almondcasesvalue = document.getElementById("almondcases").value;
var almondcalculate = almondcasesvalue*48;
var almondspan = document.getElementById("almondsubtotal");
var almondDecimal = almondcalculate.toFixed(2);
almondspan.value = "$" + almondDecimal;

if (/[^0-9]/gi.test (almondcasesvalue))
{
document.getElementById("almondwarning").innerHTML=warningnumeral;
}
if (almondcasesvalue > 100)
{
document.getElementById("almondwarning").innerHTML=warningcasemax;
}


var caramelcasesvalue = document.getElementById("caramelcases").value;
var caramelcalculate = caramelcasesvalue*48;
var caramelspan = document.getElementById("caramelsubtotal");
var caramelDecimal = caramelcalculate.toFixed(2);
caramelspan.value = "$" + caramelDecimal;


if (/[^0-9]/gi.test (caramelcasesvalue))
{
document.getElementById("caramelwarning").innerHTML=warningnumeral;
}

if (caramelcasesvalue > 100)
{
document.getElementById("caramelwarning").innerHTML=warningcasemax;
}



var mintcasesvalue = document.getElementById("mintcases").value;
var mintcalculate = mintcasesvalue*48;
var mintspan = document.getElementById("mintsubtotal");
var mintDecimal = mintcalculate.toFixed(2);
mintspan.value = "$" + mintDecimal;


if (/[^0-9]/gi.test (mintcasesvalue))
{document.getElementById("mintwarning").innerHTML=warningnumeral;
}

if (mintcasesvalue > 100)
{
document.getElementById("mintwarning").innerHTML=warningcasemax;
}

}

function grandtotalfunction()
{
var almondcasesvalue = document.getElementById("almondcases").value;
var almondcalculate = almondcasesvalue*48;
var caramelcasesvalue = document.getElementById("caramelcases").value;
var caramelcalculate = caramelcasesvalue*48;
var mintcasesvalue = document.getElementById("mintcases").value;
var mintcalculate = mintcasesvalue*48;
var GrandTotalSum = almondcalculate + caramelcalculate + mintcalculate;
var GrandTotalField = document.getElementById ("totalcost");
var GrandTotalFieldDecimal = GrandTotalSum.toFixed(2);
GrandTotalField.value = "$" + GrandTotalFieldDecimal;

}

function formReset ()
{
document.getElementById("orderchocolates").reset();
}





</script>

The things I learned making this webpage are many!!!
<h3>HTML</h3>
<ol>
<li>label - I relearned that label gives you something to style with CSS in order to line up the adjacent input values.
<li>mailto - I relearned how to do mailto form submission. I learned from others that mailto is outdated.</li>
<li>tabindex - I relearned how to set which input field the tab will take you to next.</li>
<li>autofocus - I relearned how to make an input field active upon load.</li>
<li>displayinline - I learned that you can make a div not create a line break by using CSS to command the div to display inline like a span.</li>
<li>id & class - I relearned that a div can have both an id and a class assigned.</li>
<li>reset - I learned how to do a form reset command.</li>
</ol> 

<h3>Javascript</h3>
<ol>
<li>.toFixed(2) - I learned that you can force place value to be displayed.</li>
<li>/[^0-9]/gi.test - I learned that you can exclude numbers or letters from input fields.</li>
<li>I learned that you can make a variable that can be used more than once. It works kind of like class in CSS</li>
<li>I learned that you can write in a text field</li>
</ol>

</body>
</html>

jswannabe · 11-23-2012, 08:50 PM

Ok, I know this looks dumb replying to myself but I improved some things:
I got the form to calculate on the go.
I got a fieldset to be hidden until checkbox checked.











<!DOCTYPE HTML>





<html>

<head>

<title>javascriptCalculate fix3.3</title>



<link rel="stylesheet" href=".css">

<style>

form#orderchocolates {background: #85E085; font-family:arial; font-size:12px;}

label {display:block; width:250px; float:left; text-align:right; }

input {text-align:center;}

legend {font-size:20px;  }

.totalalign {display:inline;}

.warning {display:inline; background: white; color:red; font-size:14px;}

#billingfieldset {display:none;}





</style>



</head>

<body>





<form onclick="value=" action="mailto:you@yourprovider.net?subject=Chocolate Order" method="post" enctype="text/plain"  



id="orderchocolates" name="Order Chocolates" >

<fieldset>

<legend>Chocolates</legend>







<label for="almondcases">Almonds Case (30 unit per case): $48.00 </label>

<input type="text" size="4" tabindex=1 maxlength="3" id="almondcases" name="I'm ordering this many cases of almonds...." 



onkeyup="subtotalfunction()" autofocus="autofocus"> 

<div class="totalalign">Total: </div>

<input type="text" size="4" id="almondsubtotal" name="almond subtotal"  onkeyup="almondsubtotal ()">

<div id="almondwarning" class="warning"></div>

 <br/>



 

<label for="caramelcases">Caramel Case (30 unit per case): $48.00</label>

<input type="text" size="4" tabindex=2 maxlength="3" id="caramelcases" name="I'm ordering this many cases of caramels..." 



onkeyup="subtotalfunction()"> 

<div class="totalalign">Total: </div>

<input type="text" size="4" id="caramelsubtotal" name="caramel subtotal" onkeyup="caramelsubtotal ()">

<div id="caramelwarning" class="warning"></div>

<br/>



 

<label for="mintcases">Mint Case (30 unit per case): $48.00</label>

<input type="text" size="4" tabindex=3 maxlength="3" id="mintcases" name="I'm ordering this many cases of mints........." 



onkeyup="subtotalfunction()"> 

<div class="totalalign">Total: </div>

<input type="text" size="4" id="mintsubtotal" name="mint subtotal" onkeyup="mintsubtotal()">

<div id="mintwarning" class="warning"></div>

<br/>





<label for="totalcost">Grand Total:</label>

<input type="text" size="4" tabindex=4 id="totalcost" name="Total Cost....................................................." 



><br/>





<input type="button" onclick="formReset ()" value="Clear Form"><br/>

</fieldset>





<fieldset>  

<legend>Shipping Address</legend>  

<label for="first name">First Name</label>

<input id="firstname" name="firstshipname" type="text" /><br/>

<label for="last name">Last Name</label>

<input id="lastname" name="lastshipname" type="text" /><br/>

<label for="street">Street address</label>  

<input id="street" name="shipstreet" type="text" /><br/>  

<label for="city">City</label>  

<input id="city" name="shipcity" type="text" /> <br/> 

<label for="province">Province</label>  

<input id="province" name="shipprovince" type="text" /> <br/> 

<label for="postalcode">Postal Code</label>  

<input id="postalcode" name="shippostalcode" type="text" /> <br/> 

<label for="showbilling">Check this box if Billing and Shipping address is not the same</label>

<input type="checkbox" onclick="ShowBilling(this)">

</fieldset>  



<div id="billingfieldset">

<fieldset>  

<legend>Billing Address</legend>  

<label for="first name">First Name</label>

<input id="firstname" name="firstbillname" type="text" /><br/>

<label for="last name">Last Name</label>

<input id="lastname" name="lastbillname" type="text" /><br/>

<label for="street">Street address</label>  

<input id="street" name="billstreet" type="text" /><br/>  

<label for="city">City</label>  

<input id="city" name="billcity" type="text" /> <br/> 

<label for="province">Province</label>  

<input id="province" name="billprovince" type="text" /> <br/> 

<label for="postalcode">Postal Code</label>  

<input id="postalcode" name="billpostalcode" type="text" /> <br/> 

</fieldset> 

</div>



<input type="submit" value="Submit">

</form>









<script>

var warningnumeral= "You may only enter numerals in this field!";

var warningcasemax= "Maximum number of cases is 100";



var runningtotal = document.getElementById("runningtotal");

runningtotal.innerHTML=GrandTotalFieldDecimal;





function subtotalfunction()

{

var almondcasesvalue = document.getElementById("almondcases").value;

var almondcalculate = almondcasesvalue*48;

var almondspan = document.getElementById("almondsubtotal");

var almondDecimal = almondcalculate.toFixed(2);

almondspan.value = "$" + almondDecimal;



var caramelcasesvalue = document.getElementById("caramelcases").value;

var caramelcalculate = caramelcasesvalue*48;

var caramelspan = document.getElementById("caramelsubtotal");

var caramelDecimal = caramelcalculate.toFixed(2);

caramelspan.value = "$" + caramelDecimal;



var mintcasesvalue = document.getElementById("mintcases").value;

var mintcalculate = mintcasesvalue*48;

var GrandTotalSum = almondcalculate + caramelcalculate + mintcalculate;

var mintspan = document.getElementById("mintsubtotal");

var mintDecimal = mintcalculate.toFixed(2);

mintspan.value = "$" + mintDecimal;





var GrandTotalSum = almondcalculate + caramelcalculate + mintcalculate;

var GrandTotalField = document.getElementById ("totalcost");

var GrandTotalFieldDecimal = GrandTotalSum.toFixed(2);

GrandTotalField.value = "$" + GrandTotalFieldDecimal;





if (/[^0-9]/gi.test (almondcasesvalue))

{

document.getElementById("almondwarning").innerHTML=warningnumeral;

}

if (almondcasesvalue > 100)

{

document.getElementById("almondwarning").innerHTML=warningcasemax;

}



if (/[^0-9]/gi.test (caramelcasesvalue))

{

document.getElementById("caramelwarning").innerHTML=warningnumeral;

}



if (caramelcasesvalue > 100)

{

document.getElementById("caramelwarning").innerHTML=warningcasemax;

}

if (/[^0-9]/gi.test (mintcasesvalue))

{document.getElementById("mintwarning").innerHTML=warningnumeral;

}



if (mintcasesvalue > 100)

{

document.getElementById("mintwarning").innerHTML=warningcasemax;

}



}











function formReset ()

{

document.getElementById("orderchocolates").reset();

}





function ShowBilling(box)

{

document.getElementById("billingfieldset").style.display=box.checked?"block":"none";

}







</script>



The things I learned making this webpage are many!!!

<h3>HTML</h3>

<ol>

<li>label - I relearned that label gives you something to style with CSS in order to line up the adjacent input values.

<li>mailto - I relearned how to do mailto form submission. I learned from others that mailto is outdated.</li>

<li>tabindex - I relearned how to set which input field the tab will take you to next.</li>

<li>autofocus - I relearned how to make an input field active upon load.</li>

<li>displayinline - I learned that you can make a div not create a line break by using CSS to command the div to display 



inline like a span.</li>

<li>id & class - I relearned that a div can have both an id and a class assigned.</li>

<li>reset - I learned how to do a form reset command.</li>

<li>maxlength - I learned that I can limit the amount of characters a field can receive.</li>

</ol> 



<h3>CSS</h3>

<ol>

<li>display:none - I relearned how to hide a div by giving the div and id and setting its css to display:none. What was cool 



was that I wrapped the div around a fieldset of a form and hid it until it was needed or called by the user.</li>

</ol>



<h3>Javascript</h3>

<ol>

<li>.toFixed(2) - I learned that you can force place value to be displayed.</li>

<li>/[^0-9]/gi.test - I learned that you can exclude numbers or letters from input fields.</li>

<li>I learned that you can make a variable that can be used more than once. It works kind of like class in CSS</li>

<li>I learned that you can write in a text field</li>

<li>I successfully copied a script to hide and show a div. I'm working on understanding how the script works.</li>

</ol>



</body>

</html>