 JavaScript onkeyup Event |
  |
| Terminator |
 Sep 9 2016, 10:44 AM
Post
#1
|
|
Advanced Member  Group: Members Posts: 218 Joined: 19-March 15 Member No.: 22,398  |
One of the many things they dont show you in school is JavaScript doing instant calculations, etc without having to hit a submit button.
If you type in rectangle area calculator in Google you will see a Rectangle Area Calculator at the top of the page. There is no direct link for Google's calculator, it just shows up at the top of the search results: https://www.google.com/webhp?sourceid=chrom...area+calculator If I want to do something just like that where it automatically does calculations once the user has typed input in all required text fields, should I look into the onkeyup Event? It even validates automatically if the user types in anything other than a positive number. Not sure if they are using any jQuery or if this is all done with JavaScript, but I am wanting to learn how to do calculations and validate instantly, without having to use a submit button. |
  |
 
|
| Terminator |
Sep 9 2016, 11:04 AM
Post
#2
|
|
Advanced Member Group: Members Posts: 218 Joined: 19-March 15 Member No.: 22,398 |
Actually after doing more research I found this below, although it is using jQuery, but it does do instant calculations:
CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function() { $('#pages').keyup(function(ev){ var total = $('#pages').val() * 0.2; $('#total').html((total).toFixed(2)); }); }); </script> </head> <body> Pages: <input type="text" name="pages" id="pages" /> <br/><br/> Total: <span id="total">0.00</span> </body> </html> This post has been edited by Terminator: Sep 9 2016, 11:05 AM |
|
|
|
| Christian J |
Sep 9 2016, 01:07 PM
Post
#3
|
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
QUOTE(Terminator @ Sep 9 2016, 05:44 PM)  should I look into the onkeyup Event? oninput might work even better (in supporting browsers), since it also lets the user paste in text. But a script that starts outputting lots of changing results before the user has finished typing might be confusing/annoying. If there are several text fields you might check that all required fields have content before outputting results. |
|
|
|
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 19th April 2024 - 07:56 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC