JavaScript - Unable To Limit Numeric Value Upto 240 And Cursor Also Has A Problem
Hi,
I want to have a textbox in which only numeric values will be allowed whose maximum limit is 240( 230.99 should be allowed). I am unable to do that. I am able to format the value entered by placing . in proper places and also I have limited upto two decimal places. But the problem is the cursor is not moving left when I have entered a value and I am unable to limit the value upto 240. It is taking any huge number also. Please help. My code is as below :- <html> <head> <script> function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; } function format(input){ var num = input.value.replace(/\,/g,''); if(!isNaN(num)){ if(num.indexOf('.') > -1){ num = num.split('.'); if(num[1].length > 2){ num[1] = num[1].substring(0,num[1].length-1); } input.value = num[0]+'.'+num[1]; } else { input.value = num.toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g,'$1,').split('').reverse().join('').replace(/^[\,]/,'') }; } else { input.value = ""; } } </script> </head> <body> <label for="time">Files staged in the last -</label> <input name="time" id="time" type = "text" value="24" onkeypress="return isNumberKey(event)" onkeyup="format(this);"/> <span>hours</span> </body> </html> Similar TutorialsDear Experts I want textbox1 to accept only numeric data as 55,65,698.00 Is there any easy way to validate textbox1 with javascript? Please help Dear Experts I have following codes Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="language" content="english"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>Numeric Textbox Sample</title> <style type="text/css"> #box1 {width:200px;height:170px;border:1px solid green;background:#e3eeff;padding-top:20px;} .button {width:100px;margin-top:0px;} body { margin:0; margin-top:100px; } </style> <script language="javascript"> function NumericDotOnly() { var key = window.event.keyCode; if (((key >47) && (key <58)) || (key==46)) window.event.returnValue = true; else window.event.returnValue = false; } function formatCurrency(num) { num = num.toString().replace(/\$|\,/g,''); if(isNaN(num)) num = "0"; sign = (num == (num = Math.abs(num))); num = Math.floor(num*100+0.50000000001); cents = num%100; num = Math.floor(num/100).toString(); if(cents<10) cents = "0" + cents; for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++) num = num.substring(0,num.length-(4*i+3))+','+ num.substring(num.length-(4*i+3)); return (((sign)?'':'-') + num + '.' + cents); } </script> </head> <body onload="form2.text1.focus()" > <center> <p>I need following format<br> 99,999,999.99<br> </p> <div id="box1"> <form name=form2> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td>Amount</td> <td><input type=text name=text1 size=15 value="" onkeypress="NumericDotOnly ()";onblur="formatCurrency(this.value)"> </td></tr> <tr><td>Tax</td> <td><input type=text name=text2 size=15 value="" onkeypress="NumericDotOnly()";onblur="formatCurrency(this.value)"></td></tr> <tr><td>Result</td><td><input type=text name=text3 size=15 value="" disabled></td></tr> </table> <hr> <input class="button" type=button name=command1 value="Plus" onclick="form2.text3.value=parseFloat(form2.text1.value)+parseFloat(form2.text2.value)"><br> <input class="button" type=button name=command8 value="Focus" onclick="form2.text1.select()";"form2.text1.focus()"><br> <input class="button" type=reset name=command9 value="Reset"> </form> </div> </center> </body> </html> Please help me to apply following format 99,999,999.99 Thanks in advance Shouldn't this work? It's letting the form submit to the next page when I add in this if statement: Code: var first = document.forms["contact1"].elements["name"].value; else if (!preg_match("/^[a-z]$/i", first)) { alert("Please enter only letters for your first name"); return false; } Absolutely nothing happens when I click on the button, and I know NOTHING about Java. Need serious help! The user is supposed to arbitrarily type a number (1-5) and see if it's the same one that JavaScript generates. The function "secretNum" is supposed to be a global variable, but I don't have a clue as to what that means. Anyways, an alert should pop up saying either congrats or try again. Code: <html> <head> <title>Guessing Game</title> <script type="text/javascript"> function setUp () { secretNum = 1+Math.floor(5*Math.random()); alert = (secretNum); } function checkGuess () { userGuess = document.IfForm.guessBox.value; userGuess = parseFloat(userGuess); // get value from text box if (secretNum == userGuess) {alert ("Correct!");} else {alert ("Sorry, Try Again");} } </script> </head> <body style="text-align:center" onLoad="setUp();"> <h2>Guess the Number From 1 to 5</h2> <form name="IfForm"> Enter Your Guess: <input type="text" size="5" name="guessBox" value="" /> <br /> <input type="button" value="Check Guess" onClick="checkGuess" /> </form> </body> </html> First off, I would like to thank everyone who has offered their help so far in my little self-appointed project dealing with astral body locations. I finally have the script working the way it was intended to and am looking at cleaning it up at this point. One of the things I would like to do in cleaning it up is change the way values are inputed when converting from Polar Coordinates to Cartesian Coordinates. The script is currently set up such that Right Accension is input in three fields identified as Hours, Minutes and Seconds. By the same token, the Declination Angle is input through three fields identified as Degrees, Minutes and Seconds. What I would like to do at this point is convert each set of three input fields to a single input field and allow the user to input the values as; Right Accension = 13:23:15.2 Declination Angle = 22:17:33 I understand that these would be inputed as String values and am familiar enough with the Split feature to extract the individual pieces of string (in this instance they would be 13, 23, 15.2 and 22, 17 and 33). What I am not familiar with, however, is converting those string values into numbers. I have done a bit of research into it and haven't really found anything that makes sense to me just yet, so if anyone can offer a bit of guidance, I am all ears. Not looking for anyone to specifically write the code for me, but if one of you fine folks could point me in the right direction as far as tutorials go, I would be thankful. GW I would like to fill a text field using both text and variables.. i.e. it would say x+2, so i would write.. (if 2 were a given variable) form.form1.value = "x+" 2 ??? (I know that isn't correct, I'm just wondering how I would go about this..) Utilising "Search" what resides at: http://www.codingforums.com/showthread.php?t=6441 appears to be closest to my problem but does not solve it. I want to use HTML Input text boxes for processing within nested functions and with the results output back to the HTML table. The code contains the HTML and Javascript. As the code stands data is reported back to the HTML table because the wanted functions have been commented out. Within the code is a note regarding the above. If I try to engage the functions add() or take() I have "NaN" returned. I have attempted to use x=Number(yy), x=parseInt(yy), but to no avail. [code]<html > <head> </head> <body> <form id="myself"> <table border="1" bgcolor="lightblue"> <tr height="25px"> <td id="ad" width="25px"></td> <td id="sb" width="25px"></td> </tr> <tr height="25px"> <td><input id="lt" type="text" value="" onChange="calc();" style="width:20px"></td> <td><input id="rt" type="text" value="" onChange="calc();" style="width:20px"></td> </tr> </table> </form> <script language="javascript"> var mm; var nn; var tot; var subt; function calc(){ var n1=document.getElementById("lt").value; var n2=document.getElementById("rt").value; var nn; var mm; nn=Number(n1); mm=Number(n2); tot=mm+nn; // comment these lines out and ad.innerHTML=tot; // activate the functions subt=Math.abs(nn-mm); // sb.innerHTML=subt; // mm and nn need to passed to the functions //add(); //take(); } function add(){ tot=mm+nn; ad.innerHTML=tot; } function take(){ subt=Math.abs(nn-mm); sb.innerHTML=subt; } </script> </body> </html> [icode] Hi guys, This has been asked before, and i've seen many of the previous posts. And tried for hours. But finally i've broken and have to ask for help. What am I doing wrong here? Can someone please explain? Code: var u=document.forms["lead"]["name"].value; var v=document.forms["lead"]["city"].value; var x=document.forms["lead"]["country"].value; var y=document.forms["lead"]["mobile"].value; var z=document.forms["lead"]["email"].value; if (u==null || u=="") { alert("Please enter your first name."); return false; } if (v==null || v=="") { alert("Please enter your city."); return false; } if (isNaN(lead.y.value)) { alert("bloody work!"); return false; } if (x=="Argentina" && y.length < 11) { alert("Please enter a valid Argentinian phone number."); return false; } Thanks in advance. Hello experts, I have inserted the easy slider code into my web page to make a sliding gallery. I attempted to modify the code so that numeric navigation AND arrow navigation (next, previous) could toggle slides BUT I can't see the number navigation in IE6. Every other browser I have tested (mac Safari, Firefox, and Google Chrome as well as IE7,8) work perfectly. Since I modified the original, I assume the error is in my javascript code OR in my CSS. Please help. I wouldn't ask if I wasn't at the end of my rope! Here is the Javascript: Code: /* * Easy Slider 1.7 - jQuery plugin * written by Alen Grakalic * http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding * * Copyright (c) 2009 Alen Grakalic (http://cssglobe.com) * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. * * Built for jQuery library * http://jquery.com * */ (function($) { $.fn.easySlider = function(options){ // default configuration properties var defaults = { prevId: 'prevBtn', prevText: 'Previous', nextId: 'nextBtn', nextText: 'Next', controlsShow: true, controlsBefo '', controlsAfter: '', controlsFade: true, firstId: 'firstBtn', firstText: 'First', firstShow: false, lastId: 'lastBtn', lastText: 'Last', lastShow: false, vertical: false, speed: 900, auto: false, pause: 3000, continuous: false, numeric: false, numericId: 'controls' }; var options = $.extend(defaults, options); this.each(function() { var obj = $(this); var s = $("li", obj).length; var w = $("li", obj).width(); var h = $("li", obj).height(); var clickable = true; obj.width(w); obj.height(h); obj.css("overflow","hidden"); var ts = s-1; var t = 0; $("ul", obj).css('width',s*w); if(options.continuous){ $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px")); $("ul", obj).append($("ul li:nth-child(2)", obj).clone()); $("ul", obj).css('width',(s+1)*w); }; if(!options.vertical) $("li", obj).css('float','left'); if(options.controlsShow){ var html = options.controlsBefore; if(options.numeric){ html += '<ol id="'+ options.numericId +'"></ol>' if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>'; html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>'; html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>'; if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>'; }; html += options.controlsAfter; $(obj).after(html); }; for(var i=0;i<s;i++){ $(document.createElement("li")) .attr('id',options.numericId + (i+1)) .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>') .appendTo($("#"+ options.numericId)) .click(function(){ animate($("a",$(this)).attr('rel'),true); }); $("a","#"+options.nextId).click(function(){ animate("next",true); }); $("a","#"+options.prevId).click(function(){ animate("prev",true); }); $("a","#"+options.firstId).click(function(){ animate("first",true); }); $("a","#"+options.lastId).click(function(){ animate("last",true); }); }; function setCurrent(i){ i = parseInt(i)+1; $("li", "#" + options.numericId).removeClass("current"); $("li#" + options.numericId + i).addClass("current"); }; function adjust(){ if(t>ts) t=0; if(t<0) t=ts; if(!options.vertical) { $("ul",obj).css("margin-left",(t*w*-1)); } else { $("ul",obj).css("margin-left",(t*h*-1)); } clickable = true; if(options.numeric) setCurrent(t); }; function animate(dir,clicked){ if (clickable){ clickable = false; var ot = t; switch(dir){ case "next": t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1; break; case "prev": t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1; break; case "first": t = 0; break; case "last": t = ts; break; default: t = parseInt(dir); break; }; var diff = Math.abs(ot-t); var speed = diff*options.speed; if(!options.vertical) { p = (t*w*-1); $("ul",obj).animate( { marginLeft: p }, { queue:false, duration:speed, complete:adjust } ); } else { p = (t*h*-1); $("ul",obj).animate( { marginTop: p }, { queue:false, duration:speed, complete:adjust } ); }; if(!options.continuous && options.controlsFade){ if(t==ts){ $("a","#"+options.nextId).hide(); $("a","#"+options.lastId).hide(); } else { $("a","#"+options.nextId).show(); $("a","#"+options.lastId).show(); }; if(t==0){ $("a","#"+options.prevId).hide(); $("a","#"+options.firstId).hide(); } else { $("a","#"+options.prevId).show(); $("a","#"+options.firstId).show(); }; }; if(clicked) clearTimeout(timeout); if(options.auto && dir=="next" && !clicked){; timeout = setTimeout(function(){ animate("next",false); },diff*options.speed+options.pause); }; }; }; // init var timeout; if(options.auto){; timeout = setTimeout(function(){ animate("next",false); },options.pause); }; if(options.numeric) setCurrent(0); if(!options.continuous && options.controlsFade){ $("a","#"+options.prevId).hide(); $("a","#"+options.firstId).hide(); }; }); }; })(jQuery); and here is my CSS: Code: #photos{ background-color: #453F33; width: 875px; height: 400px; margin-top: -5px; position: relative; } #slider{ padding-top:50px; margin-left: 180px; } /* image replacement */ .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{ margin:0; padding:0; display:block; overflow:hidden; text-indent:-8000px; } #content{ position:relative; } /* Easy Slider */ #slider ul, #slider li, #slider2 ul, #slider2 li{ margin:0; padding:0; list-style:none; } #slider2{margin-top:1em;} #slider li, #slider2 li{ width:500px; height:312px; overflow:hidden; } #prevBtn, #nextBtn, #slider1next, #slider1prev{ display:block; position:absolute; top:170px; left: 40px; } #nextBtn, #slider1next{ left:780px; } #prevBtn a, #nextBtn a, #slider1next a, #slider1prev a{ display:block; position:relative; width:60px; height:77px; background:url(../images/btn_prev.jpg) no-repeat 0 0; } #nextBtn a, #slider1next a{ background:url(../images/btn_next.jpg) no-repeat 0 0; } /* numeric controls */ ol#controls{ margin:1em 0; padding:0; height:28px; margin-left: 650px; } ol#controls li{ margin:0 10px 0 0; padding:0; float:left; list-style:none; height:28px; line-height:28px; display: inline; } ol#controls li a{ float:left; height:28px; line-height:28px; background:#A6000E; color: #FFF; padding:0 10px; text-decoration:none; margin-top: -360px; } ol#controls li.current a{ background:#A1DFC6; color:#fff; } ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{ outline:none; } #slider li span { display: block; width: inherit; height:30px; margin-top: -317px; color: #000; padding-top: 10px; padding-left: 5px; overflow:hidden; overflow-y: hidden; overflow-x: hidden; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity: 0.7; opacity: 0.7; background-color: #B1AA9A; } And you can view my site in the wild at www.ibikeseoul.com Hi.. I am facing identifier starts immediately after numeric literal error in firefox onclick="document.location.href='<%= themeDisplay.getPathMain() %>/portal/ext/asite/assignOrg'"/> can any 1 solve this?? I am finishing up my Form page, and totally forgot to have a numeric only field. So I added it and I can't get it to work. I also am having issues throwing an error when you don't select at least one topping. And are these lines correct? Code: document.cookie = "toppings=" + encodeURIComponent(document.getElementsByName("toppings[]").value); Code: document.cookie = "extra=" + encodeURIComponent(extra); Here is a link to the page hosted on my dropbox http://dl.dropbox.com/u/49211616/dw/...orderPage.html Javascript: Code: function validateOrder () { var crustSelection = document.orderForm.crust.value; var crustPrice; //Adds $1 for Deep DishParmesagn, and Sourdough var count = 0; //Amount of Toppings Selected var choice = ""; //Toppings Selected list var x = ""; //Don't need for the Cookie var extra = 0; //extra charge for toppings over 3 try{ var error = ""; // Initialize Var to store the error messages. if(document.getElementById("delivery").checked != true && document.getElementById("takeout").checked != true) { error=error+"Order Type is required.\n" } if(document.getElementById("fname").value == "") { error = error + "First Name is required.\n"; } if(document.getElementById("lname").value == "") { error = error + "Last Name is required.\n"; } if(document.getElementById("address").value == "") { error = error + "Street address is required.\n"; } if (isNaN(document.getElementById("quantity"))) { error = error + "Enter Pizza Quantity in Numbers Only.\n"; } if(document.getElementById("crust").value == "") { error = error + "Crust Type is required.\n"; } if(document.getElementsByName("toppings").value == 0) { error = error + "Select at Least One Topping.\n"; } if(error == "") { // save all the information in the cookie document.cookie = "firstName=" + encodeURIComponent(document.getElementById("fname").value); document.cookie = "lastName=" + encodeURIComponent(document.getElementById("lname").value); document.cookie = "address=" + encodeURIComponent(document.getElementById("address").value); document.cookie = "order=" + encodeURIComponent((document.getElementById("delivery").checked) ? "delivery" : "takeout"); document.cookie = "quantity=" + encodeURIComponent(document.getElementById("quantity").value); document.cookie = "quantity=" + encodeURIComponent(document.getElementById("quantity").value); document.cookie = "crust=" + encodeURIComponent(document.getElementById("crust").value); document.cookie = "toppings=" + encodeURIComponent(document.getElementsByName("toppings[]").value); alert("Order successfully Placed!"); } else { alert(error); } } catch(ex) { alert("An error occurred!.\n" + "Error Name : " + ex.name + "\nError Message : " + ex.message); } for (var i=1; i<11; i++) { x = document.orderForm['toppings' + i].value; if (document.orderForm['toppings' + i].checked) { choice = choice + " " + x ; count ++; } } if (choice.length <= 0) { choice = choice + "NONE"; } if (count > 3) { extra = (count - 3) * 1 } document.cookie = "extra=" + encodeURIComponent(extra); } </script> HTML: Code: <form name = "orderForm" onsubmit="validateOrder()"> <table width="600" border="0"> <tr> <th scope="col" width="400" align="left"><b>First Name</b><br /><input type="text" id="fname" name="fname" size=30> <br /> <br /> <b>Last Name</b><br /> <input type="text" id="lname" name="lname" size=30> <br /> <br /> <b>Street Address</b><br /> <input type="text" id="address" name="address" size=30> <br /> <br /> <input name="orderType" value="delivery" id="delivery" type="radio">Delivery</font> <input name="orderType" value="takeOut" id="takeout" type="radio">Take Out</font></th> <th scope="col" width="200" align="Left"> How Many Pizzas? <input type="text" id="quantity" name="quantity" size=5> <br /> <br /> <select name="crust" id="crust"> <option selected value="false">Select Crust Type</option> <option value="regular">Regular Crust</option> <option value="thin">Thin Crust</option> <option value="deep">Deep Dish</option> <option value="Parmesagn">Parmesagn Cheese</option> <option value="sourdough">Sourdough</option> </select> <br /> <br /> Select at Least One Topping: <br /> <br /> <input name = "toppings1" type = "checkbox" value = "extraCheese"> Extra Cheese<br> <input name = "toppings2" type = "checkbox" value = "sausage"> Sausage<br> <input name = "toppings3" type = "checkbox" value = "pepperoni"> Pepperoni<br> <input name = "toppings4" type = "checkbox" value = "bacon"> Bacon<br> <input name = "toppings5" type = "checkbox" value = "canadianBacon"> Canadian Bacon<br> <input name = "toppings6" type = "checkbox" value = "mushroom"> Mushroom<br> <input name = "toppings7" type = "checkbox" value = "pineapple"> Pineapple<br> <input name = "toppings8" type = "checkbox" value = "onion"> Onion<br> <input name = "toppings9" type = "checkbox" value = "olive"> Olive<br> <input name = "toppings10" type = "checkbox" value = "greenPepper"> Green Pepper<br></th> </tr> </table> <input name="submit" type="submit" value="submit" /><input name="" type="reset" /> </form> I need a javascript that will print out the X and Y of the mouse on the screen as I move the mouse and keep up to date. The X and the Y must also be stored in a variable. (Trying to increase my knowledge of javascript so that I can make my web sites better and my experiments are all in making games) I would like to create a caret for a textarea like the one he http://www.dynamicdrive.com/forums/s...4576#post74576 it works great if I want a white background but when I changed it to black and tried to change the textarea's text color to yellow: Code: <textarea type="text" id="setter" style="color:yellow;"onkeydown="writeit(this, event);moveIt(this.value.length, event)" onkeyup="writeit(this, event)" onkeypress="writeit(this, event);"></textarea> I don't see anything on the screen other than the blinking cursor I have some own cursor with a .cur file. But it's very annoying to try changing each part from the css to the new cursor. Is there no aviable script in JS or HTML or CSS or whatever there is, that i can press the link for all cursor like: Pointer, defaut, wait, stop, link and so on. So they all changes into my own? Without having those white cursor. Good day! In my javascript code I have a function for the enter key. I want to add cursor key in that function/ I research about the coding for cursor key but I can't find the code same on what I want to happen. Here is the code: Code: <script language="javascript"> function handleEnter(e, nextfield) { var characterCode = (e && e.which)? e.which: e.keyCode; if(characterCode == 13) { document.getElementById(nextfield).focus(); return false; } else { return true; } } </script> <input type='text' name='plt' onkeypress='return handleEnter(event,\"b0\");' /> Thank you Do you guys have any idea how I could move a div around a page on mouse down? Like drag and drop it where I want it to be on the page and grab its x,y position? If you guys have any code snippets or tips that would be greatly appreciated thanks! I'm trying to write a function that is similar to the ctrl+f functionality you get in IE, where you have a search string and when you click 'next' the whole string if matched is highlighted by the cursor. This works fine for inputs and text areas using the following code: Code: function setCaretPos(obj, start, end) { var range = obj.createTextRange(); range.moveStart('character', start); range.moveEnd('character', end - obj.value.length); range.select(); } But now I need to get it to work for normal text in a text node that is in the HTML/DOM. Is there an equivalent way of making the above method work for text in text nodes? Alternatively is there a way to make the browser (IE) at least focus on some text in a text node? (I could then highlight it with CSS styles). I've got the following html code for a button - how can I get the cursor to turn into the hand shape when the mouse is over the button? Thanks PHP Code: <INPUT NAME="btn_cancel" TYPE="button" VALUE="Cancel" onClick="cancel_button_click()";> i need typing cursor back in first text box after clicking ok of alert [CODE] <html> <head> <script type='text/javascript'> function player() { document.getElementById("Player2").value= document.getElementById("Player1").value; } function notEmpty(elem, helperMsg){ if(elem.value.length == 0){ alert(helperMsg); elem.focus(); return false; } return true; } </script> </head> <body> <form> Player:<input type="Name" id="Player1" onkeyup="player()"/> <input type="Name" id="Player2" DISABLED /> <input type='button' onclick="notEmpty(document.getElementById('Player2'), 'Please fill in player field!')" value='Submit' /> </form> </body> </html> [ICODE] |