JavaScript - Validate Values Greater Than 8 Hours?
I have the below form where the user enters the hours and minutes worked on a task. I want to be sure that the total for the form is at least 8 hours. How can I do that?
Code: <form method="POST" onSubmit="return validateHours()" name="theForm" > <p>Hours<input type="text" name="hours[]" size="20">Minutes<input type="text" name="minutes[]" size="20"></p> <p>Hours<input type="text" name="hours[]" size="20">Minutes<input type="text" name="minutes[]" size="20"></p> <p>Hours<input type="text" name="hours[]" size="20">Minutes<input type="text" name="minutes[]" size="20"></p> <p>Hours<input type="text" name="hours[]" size="20">Minutes<input type="text" name="minutes[]" size="20"></p> <p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p> </form> Similar TutorialsHi all, I create textboxes dynamically by the following code function addElement() { var contentID = document.getElementById('content'); var newTBDiv = document.createElement('div'); newTBDiv.setAttribute('id','strText'+intTextBox); divname='strText'+intTextBox; newTBDiv.innerHTML = "Text "+intTextBox+": <input type='text' id='divid' +intTextBox name='txtbx[]'/>"; intTextBox = intTextBox + 1; contentID.appendChild(newTBDiv); } It works fine,but i want to get the values and validate it so i use the following code.. var idval=new Array(); for(var i=0;i<intTextBox;i++) { idval[i]=document.getElementById('divid').value; alert(idval[i]); } but it didn`t work out,Any suggestions really helpful. Thankyou. hi im using dhtml xgrid where i need to do validation for time ,(from-time and to-time i.e ind==1 and ind==2 ) to-time must be greater than from-time else i need to alert a message to-time must be greater than from-time. can any one send me the code for it time format is[05:00]. Code: var err_str=""; function validate_grid(value,id,ind) { $("#result").html(" ").show(); if(ind==1 || ind==2) { var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/; if(!patt.test(value)) { mygrid.setCellTextStyle(id,ind,"background-color:yellow;"); if(err_str!="") err_str+="\n"+(ind+1)+".Enter numbers and : only.."; else err_str=(ind+1)+".Enter numbers and : only"; return false; } else { mygrid.setCellTextStyle(id,ind,"background-color:white;"); return true; } } } Hello im using dhtmlx grid in this cells i have from time and to time (i.e ind==1 and ind==2) i need to validate time where to-time must be greater than from-time else it should alert an message,i have writeen a normal Regular expression for the time validation.as the time is i string format i.e[05:00],please can any one send me code for that. Code: var err_str=""; function validate_grid(value,id,ind) { if(ind==1 || ind==2) { var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/; if(!patt.test(value)) { mygrid.setCellTextStyle(id,ind,"background-color:yellow;"); if(err_str!="") err_str+="\n"+(ind+1)+".Enter numbers and : only.."; else err_str=(ind+1)+".Enter numbers and : only"; return false; } else { mygrid.setCellTextStyle(id,ind,"background-color:white;"); return true; } } } Hi Code: var err_str=""; function validate_grid(value,id,ind) { $("#result").html(" ").show(); if(ind==1 || ind==2) { var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/; if(!patt.test(value)) { mygrid.setCellTextStyle(id,ind,"background-color:yellow;"); if(err_str!="") err_str+="\n"+(ind+1)+".Enter numbers and : only.."; else err_str=(ind+1)+".Enter numbers and : only"; return false; } else { mygrid.setCellTextStyle(id,ind,"background-color:white;"); return true; } } } alert(err-str); here ind==1 is from_time and ind==2 is to_time,i need to validate time as to_time must be always greater than from-time,if condition fails an alert msg should populate.time format is[05:00]as it is in string format im unable to do the validation for it.(ex:from-time=08:00 to-time=07:59 condition fails) thank you. Hello all, I have a form that submits a POST request when data is submitted. A Servlet then processes this POST request and a JavaBean is used to make some calculations. The HTML response is not generated within the Servlet but instead I forward the request to a JSP to generate the response. - This all works fine, thankfully. However, I am stupidly suck trying to validate the form on the client side with a JavaScript function before the form is submitted. Here is my index.jps: Code: <%-- Document : index Created on : 19-Nov-2009, 13:41:30 Author : lk00043 --%> <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/JavaScript"> <!-- Start hiding JavaScript Statements function validateForm() { var student; var score1, score2, score3, score4; student = document.getElementById('student'); s1 = document.getElementById('score1'); s2 = document.getElementById('score2'); s3 = document.getElementById('score3'); s4 = document.getElementById('score4'); score1 = parseInt(s1.value); score2 = parseInt(s2.value); score3 = parseInt(s3.value); score4 = parseInt(s4.value); if(student.value.length == 0) { document.getElementById('StudentError1').innerHTML = " Enter a student name!"; return false; } if ((isNaN(score1)) || (score1 < 0) || (score1 > 100)) { document.getElementById('Error1').innerHTML = " Enter a number between 0 and 100!"; return false; } if ((isNaN(score2)) || (score2 < 0) || (score2 > 100)) { document.getElementById('Error2').innerHTML = " Enter a number between 0 and 100!"; return false; } if ((isNaN(score3)) || (score3 < 0) || (score3 > 100)) { document.getElementById('Error3').innerHTML = " Enter a number between 0 and 100!"; return false; } if ((isNaN(score4)) || (score4 < 0) || (score4 > 100)) { document.getElementById('Error4').innerHTML = " Enter a number between 0 and 100!"; return false; } } // End hiding JavaScript Statements --> </script> <title>Lab Class 7 - Task 2</title> </head> <body> <h1>Lab Class 7</h1> <form name="collectgrades" action="AssessGrades" method="POST" onSubmit="validateForm()" > Name of Student: <input type="text" name="student" id="student"/><span id="StudentError1"> </span><br /> Presentation: <input type="text" name="score" id="score1"/><span id="Error1"> </span><br /> Writing style: <input type="text" name="score" id="score2"/><span id="Error2"> </span><br /> Technical content: <input type="text" name="score" id="score3"/><span id="Error3"> </span><br /> Depth of analysis: <input type="text" name="score" id="score4"/><span id="Error4"> </span><br /> Feedback:<select name="feedback" size="4" multiple="multiple"> <option>"Could be better structured."</option> <option>"Depth of analysis is good."</option> <option>"Very advanced material."</option> <option>"Very well structured."</option> </select><br /> <input type="submit" value="Submit" /> </form> </body> </html> Regardless of whether incorrect input is given, the data is still POSTed to the server and calculated on or a Server Side error is given. Am I correct in calling the function onClick? The validation essentially needs to be so that: - Student field contains a string - Score1, Score2, Score3 and Score 4 contain a number between 0 and 100 Any help is most appreciated, Cheers, Beetle. i seem to be having problems with the basic javascript >= < operations i have being doing test before placing them on a final page this is the test script , i have done the alerts just for a test run d gets the info from a text box of the page and when i type the number 1 in the page it displays that its less than 100 but when i type in 2 , it alerts me that its HIGH even though its still less than 100 , i dont know what is wrong i have done a script nearly the same as this before and it worked fine so i dont know whats going on now if (d > "100"){ alert("HIGH") return false } else{ alert("LESS") return false } any help please Hi all, Im in the process of creating a auction site for charity, im working on the last page which allows the user to enter a bid i have this javascript function that i have been working on to try and achieve the following. the user enters a bid use javascript to check to make sure its greater then and not equal to the current price simple right? But no its not well as im new to this maybe iv got lost in the code some where heres my code Code: function IsNewBidGreater(windowname) { var NewBid; var CurrentPrice; CurrentPrice = document.getElementById('MainContent_txtCurrentPrice').value; NewBid = document.getElementById('MainContent_txtNewBid').value; parseFloat(NewBid).toFixed(2); parseFloat(CurrentPrice).toFixed(2); if (NewBid < CurrentPrice || NewBid == CurrentPrice) { NewBid.className = "error"; document.getElementById('MainContent_ErrorLowBid').style.display = 'block'; return false; } else { document.getElementById('MainContent_ErrorLowBid').style.display = 'none'; document.getElementById('MainContent_BidConfirm').innerHTML = NewBid; ConPopUp(windowname) } } where i enter 10.50 and the current price is 9.99 i get the error message saying needs to be greater MainContent_ErrorLowBid is a hidden div on the web page which shows an error message any help would be highly appreciated Hi Everyone.! I have to create a quite simple javascript but being a newbie I'm having trouble in it. It's a javascript about showing a value greater than the earlier for a variable. Let me show you. Code: var count=2o var countNow=count+1 What should I use here to show 21 Please help me. I am trying to create a Table of Contents from a html document that has h1, h2, and h3 tags. In my js code i retrieve the h3 tags for a given h2 tag and store it into a variable called numSubs then in my for loop i set the condition j < numSubs.length but the problem is that it keeps saying that numSubs.length is 0 so the for loop never gets implemented. Can you tell me why numSubs.length keeps getting set to 0 when it should be 1 or two? Code: var subs = "sub" + (i + 1); var numSubs = document.getElementsByName(subs); alert(numSubs.length); for(j=0; j < numSubs.length; j++) { alert(); toc.innerHTML += "<li>" + numSubs.item(j).innerHTML + "</li>"; } this is the body of the html Code: <h1>Boolean Algebra</h1> <h2>Fundamental Boolean functions</h2> <h3 name = "sub1">Boolean Wrapper Class</h3> <h3 name = "sub1">Boolean Computations</h3> <h2>Computational Completeness</h2> <h3 name = "sub2">Calculating Machanics</h3> <h2>Identities of Boolean algebra</h2> <h3 name = "sub3">NAND and NOR</h3> <h2>NAND and NOR</h2> How can I truncate all words greater than 30 characters using a class name when the page loads? Been trying to do this for about 5 hours. Trying to conside the following: * Truncate long words and churn anything above the minimum length with an ellipse. * Only truncate words and not the whole sentence or paragraph. * Should truncate text that are inside HTML tags and not truncate the tags themselves. * When you hover over the ellipse, it will show you the complete word. * The long words are already truncated when the page load (SEO friendly). * Block of text are included in a max of 25 <div> elements and a minimum of 1. That's why I'm not using ID. So far I have this lines of code: Code: <script charset="utf-8" language="javascript" type="text/javascript"> function test(gaz) { var sbText = gaz.innerHTML; var sbTextArr = sbText.split(' '); var tempText = ""; for (var s=0; s<sbTextArr.length; s++) { if (sbTextArr[s].length > 30) { sbTextArr[s] = "marco"; } gaz.innerHTML = ""; tempText = tempText + " " + sbTextArr[s]; gaz.innerHTML = tempText; } }</script> <div class="myClass" onmouseover="test(this);"><p>This is a <strong>looooooooooooooo</strong><em>ooooooooooooooooooooooooooooooong</em> word.</p></div> <div class="myClass" onmouseover="test(this);">A text without long word.</div> <div class="anotherClass"><p>Another set</p><p>But should not affect if there's a loooooooooooooooooong word.</p></div> I got this from the web and modified it but not working as I intended it to be. Useful for posts in forums, blog comments, and guestbooks hey im simply tryna make a 24 hours countdown, reg ardless of timezones, computer clock etc., just a straight 24 h our stretch. here is what i have, somehow its not working, any help on fixing>? PHP Code: <script language="JavaScript"> TargetDate = 24 * 60 * 60 * 1000; ForeColor = "navy"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%H%% Hours, %%M%% Minutes, %%S%% Seconds."; FinishMessage = "It is finally here!"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script> Hello, I understand that this question have been posted before several times. I looked at many of those threads and tried it but could not get it to work. So the idea is to use either cookies or html5 localstorage to control the java script behavior, but how do I really implement it on my code? Please help me out here on piecing all the code together. Either cookie/localstorage is fine. Thanks in advance Code: <div id='cptup-ready'> </div> <script data-cfasync='false' type='text/javascript'> //<![CDATA[ window.captain = {up: function(fn) { captain.topics.push(fn) }, topics: []}; // Add your settings he captain.up({ api_key: 'XXXXXXXX' }); //]]> </script><script data-cfasync='false' type='text/javascript'> //<![CDATA[ setTimeout(function() { var cpt = document.createElement('script'); cpt.type = 'text/javascript'; cpt.async = true; cpt.src = 'http' + (location.protocol == 'https:' ? 's' : '') + '://captainup.com/assets/embed.en.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(cpt); }, 31000)(); //]]> </script> hi guys, as im still a noob at javascript, so im asking for your help, i didnt make this script, someone else did and i asked for their permission to change it to my needs, the problem is, i have it working for times that are over an hour long, but i need to also make it possible to display in just under an hour aswell, eg instead of 01:00:00 it would display 60:00 then 59:59 eg, so basically im asking, how can i take the hours out of this, without it currupting the entire JS? Code: var HAS_EXPIRED = 'Time has Expired!'; var IS_NONE = 'None'; function secondCountdown(s){ if(s){ var timeleft = document.getElementById('timeleft').innerHTML; if((timeleft == HAS_EXPIRED) || (timeleft == IS_NONE)) return false; timeleft = timeleft.replace('<font>', ''); timeleft = timeleft.replace('</font>', ''); var time = timeleft.split(":"); var secs = time[2] * 1; var mins = time[1] * 1; var hrs = time[0] * 1; secs += (mins * 60) + (hrs * 3600); secs -= 1; if(secs <= 0){ document.getElementById('timeleft').innerHTML = HAS_EXPIRED; return false; } else { hrs = Math.floor(secs/3600); secs -= (hrs * 3600); mins = Math.floor(secs/60); secs -= (mins * 60); if(hrs < 10) hrs = '0' + hrs; if(mins < 10) mins = '0' + mins; if(secs < 10) secs = '0' + secs; document.getElementById('timeleft').innerHTML = hrs + ':' + mins + ':' + secs; } } setTimeout('secondCountdown(true)',1000); } bootloaderAdd('secondCountdown()'); bootloaderOn(); Cheers. Dan I am wanting to display an image for 24 hours, how can I do this?
Hi guys, I've looked around the web and tried to find a Javascript Countdown, however, the only ones I could really find were the ones that countdown to a particular date (see below). Code: <script language="JavaScript"> TargetDate = "12/31/2020 5:00 AM"; BackColor = "palegreen"; ForeColor = "navy"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; FinishMessage = "It is finally here!"; </script> <script language="JavaScript" src="/js/countdown.js"></script> Problem is, it counts down to a particular date, and I don't want that. The reason why is because everyone's time will be different, and I want it to be a "global" countdown, fr an event happening on a website (like the launch of something). Is it possible to, other then going by date, go by days/hours/minutes/seconds? So if I enter say, 2 days, 5 hours, 0 minutes, 0 seconds, it'll start counting down EXACTLY 2 days and 5 hours, and not change per people's time zone? Any help would be greatly appreciated. If someone can point me in the right direction, or has a code already developed, I'd really appreciate it.. Thank you so much! hi, I have three variables - string openTime format hh:mm - eg "08:30" - string closeTime format hh:mm eg "17:30" - float lunchHours eg 1.5 Are there any js functions I can use to calculate how many hours the shop is open ? thanks Hey everyone. I need a little help and I'm not an expert by any stretch of the imagination with javascript. I have a simple little code script and I'd like either the onClick function (or the entire code itself, whichever is easiest) to only load once every 24 hours for each IP address. So "123.1.22.333" should only get the effect of this code once every 24 hours regardless if they revisit my site 5 times a day let's say. So here's my little script: Code: <script language="JavaScript"> function goNewWin() { TheNewWin=window.open("http://google.com",'Google','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1'); TheNewWin.blur(); } </script> <body onClick="goNewWin()"> Any help would be very appreciated. Thanks! Changing Seconds to Hours in Timer Code: <script type="text/javascript"> // Javascript to compute elapsed time between "Start" and "Finish" button clicks function timestamp_class(this_current_time, this_start_time, this_end_time, this_time_difference) { this.this_current_time = this_current_time; this.this_start_time = this_start_time; this.this_end_time = this_end_time; this.this_time_difference = this_time_difference; this.GetCurrentTime = GetCurrentTime; this.StartTiming = StartTiming; this.EndTiming = EndTiming; } //Get current time from date timestamp function GetCurrentTime() { var my_current_timestamp; my_current_timestamp = new Date(); //stamp current date & time return my_current_timestamp.getTime(); } //Stamp current time as start time and reset display textbox function StartTiming() { this.this_start_time = GetCurrentTime(); //stamp current time document.TimeDisplayForm.TimeDisplayBox.value = 0; //init textbox display to zero } //Stamp current time as stop time, compute elapsed time difference and display in textbox function EndTiming() { this.this_end_time = GetCurrentTime(); //stamp current time this.this_time_difference = (this.this_end_time - this.this_start_time) / 1000; //compute elapsed time document.TimeDisplayForm.TimeDisplayBox.value = this.this_time_difference; //set elapsed time in display box } var time_object = new timestamp_class(0, 0, 0, 0); //create new time object and initialize it //--> </script> <form> <input type="button" value="Start" onClick="time_object.StartTiming()"; name="StartButton"> </form> <form> <input type="button" value="Finish" onClick="time_object.EndTiming()"; name="EndButton"> </form> <form name="TimeDisplayForm"> Elapsed time: <input type="text" name="TimeDisplayBox" size="6"> seconds </form> |