If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

textbox onblur get value do calculation

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

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.

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?

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.

Users who have thanked felgall for this post:

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.

"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.]

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?

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>