JavaScript - How To Stop Refreshing The Page When Captcha Is Wrong
hi everyone,
Here's part of the codes I got from our website. Right now, when someone wants to register on our website, they have to put into the Captcha after they finish all the other information. If the captcha is empty, there would be an alert; if it's wrong, the page would be refreshed, and there would be another alert, and at the same time, all the information would be lost and they have to fill them again. Now the question is, how can I stop the page refreshing itself? All I need is an alert and then you could retype the captcha without losing the other information. Thank you in advance for your advice! <script type="text/javascript"> function ltrim(stringToTrim) { return stringToTrim.replace(/^\s+/,""); } function validateForm() { var okSoFar=true with (document.practitioner_profile) { if (firstname.value=="" && okSoFar) { okSoFar=false alert("Please enter your first name.") firstname.focus() } if (lastname.value=="" && okSoFar) { okSoFar=false alert("Please enter your last name.") lastname.focus() } //some other things here... if (verify_code.value=="" && okSoFar) { okSoFar=false alert("Please enter your security code.") verify_code.focus() } if (okSoFar==true) submit(); } } //here's the submit button in the html code, <div class="practsubmit"> <div class="signupform"><h4>* Security Code:</h4> <p>Please type in what you see in the box below and press submit. Characters are case-sensitive.</p></div> <div class="signupform"><img id="captcha" src="index.php?option=com_egbcaptcha&width=150&height=50&characters=5" /><br /><input id="verify_code" name="verify_code" type="text" /></div> <input type="button" class="button" value="Send" name="B1" ONCLICK="javascript:validateForm()"> <input type="reset" class="button" value="Clear" name="clear"> </div> Similar TutorialsI am a music geek. I am also a Javascripter who doesn't know much, but enough to get around the language. Anyways, I wrote a script to construct chords to make writing music easier for me. The script works, it shows there are no errors, and it does what I want it to do, but the page keeps refreshing almost immediately after the Alert box goes away. I have no idea whats going on. I don't know if it's the JS or the HTML part of the page. If you have any ideas that would be great. Code: <head> <script> function calc() { var type, note, root, third, fifth, seven, ans; var notess, notesb; type=document.f1.type.value note=document.f1.note.value*1 notess=["A","A#","B","C","C#","D","D#","E","F","F#","G","G#"] notesb=["A","Bb","B","C","Db","D","Eb","E","F","Gb","G","Ab"] if(type=="maj") { root=notess[note] third=notess[(note+4)%12] fifth=notess[(note+7)%12] seven=notess[(note+11)%12] ans=root+", "+third+", "+fifth+", "+seven; alert(ans) } if(type=="min") { root=notess[note] third=notess[(note+3)%12] fifth=notess[(note+7)%12] seven=notess[(note+11)%12] ans=root+", "+third+", "+fifth+", "+seven; alert(ans) } document.getElementById("here").innerHTML=ans } </script> </head> <body> <h1>Chord Builder</h1><p> <form name="f1"> Make a:<br> <select name="note"> <option value="0">A<br> <option value="1">A#/Bb<br> <option value="2">B<br> <option value="3" selected>C<br> <option value="4">C#/Db<br> <option value="5">D<br> <option value="6">D#/E<br> <option value="7">E<br> <option value="8">F<br> <option value="9">F#/Gb<br> <option value="10">G<br> <option value="11">G#/Ab<br> </select> <select name="type"> <option value="maj" selected>Major<br> <option value="min">Minor<br> </select> <br> <button onClick="calc()">Make my Chord!</button></br> </form> <span id="here">-chords will be here soon-</span> <p> </body> My URL is: http://localhost/testproject/product.html#catId=155 I want to URL: http://localhost/testproject/product.html without refreshing the page. Is this possible using javascript/jquery or not ? Hi, Im not sure if im going about this the right way but what I'm trying to achieve is to have my webpage seperated into two main div's. The first div contains a media player so it cant be refreshed or the media stops. The second div is used to view content. I've used innerHTML to change the content of the second div from links in the first. The problem is the URL displayed doesn't reflect the change in content of the second div. I want to be able to load content into the second div using innerHTML while changing the URL so people can link directly to that content. Any help or alternative ideas are greatly apprectiated. Thanks. Hello! I have been designing a schedule website which will be displayed on several computers throughout the building, I would like to be able to edit the JS during the day but I do not want to be going all through the building refreshing every computer to make sure it has the latest JS version. I also do not want use the meta HTML tag to refresh because that is too noticeable with the images reloading. Basically I would like to only refresh the JS file. I found this link, but it has a button which defeats the purpose. Any way of doing this without the button? FYI, I have the javascript setTimeout("driver()",1000); already so that the clock stays up to date. Not sure if that will make things easier or more complicated... EDIT: not sure why the ICODE tags are not working EDIT 2: Forgot the website! http://www.philnicholas.com/2009/05/...ing-your-page/ D.I.C Head ** Joined: 29 Jan, 2009 Posts: 94 Thanked: 1 times My Contributions Hello, I am teaching myself javascript and in the course of my experimentation have run into this roadblock: I want to display a styled navigation bar with a button beneath it. When the button is clicked, an onclick event will be triggered and the response of the browser should be to print the word "test" right beneath the button. However, what actually happens is the page blanks out and the word 'test' appears in the upper left corner of the screen. I'm hoping someone would be kind enough to fix this code and explain to me where I've gone wrong here. CODE <html> <head> <title>JavaScript Navanimation Example</title> <style type="text/css"> #navsite h5 { display: none; } #navsite ul { padding: 3px 0; margin-left: 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif; } #navsite ul li { list-style: none; margin: 0; display: inline; } #navsite ul li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none; } #navsite ul li a:link { color: #448; } #navsite ul li a:visited { color: #667; } #navsite ul li a:link:hover, #navsite ul li a:visited:hover { color: #000; background: #AAE; border-color: #227; } /* #navsite ul li a#current { background: white; border-bottom: 1px solid white; } */ </style> </title> <script language="JavaScript" type="text/javascript"> function navanimate() { document.write("test"); return false; } </script> </head> <body language="JavaScript" type="text/javascript"> <div id="navsite"> <h5>Site Navigation</h5> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/archives/">Archives</a></li> <li><a href="/writing/">Writing</a></li> <li><a href="/speaking/">Speaking</a></li> <li><a href="/Contact/">Contact</a></li> </ul> </div> <input type="button" name="button" value="Drop Down" onclick="return navanimate()"> </body> </html> Thanks! I have the below code i been trying to figure out how to reset the font changes made without having to refresh the website (f5). Currently I have created a button that onClick uses history.go(0) which refreshes the page removing the font changes. I would like help with figuring out a solution to reset (remove font) step1-5 without having to refresh the page. Thanks. Preview of Code Code: <html> <head> <title>My Title Page</title> <script type="text/javascript"> function selectTextArea() { document.FormTextArea.TextAreaBox.select(); document.FormTextArea.TextAreaBox.focus(); } function changeStepColor(id) { document.getElementById(id).style.font="italic bold 15px arial,serif"; } function inputPrompt(String , msg) { String=prompt(msg, ""); if (String!=null && String!="") { document.FormTextArea.TextAreaBox.value=document.FormTextArea.TextAreaBox.value + msg + ' ' + String + '\r' + '----------------------------------' + '\r' } else { document.FormTextArea.TextAreaBox.value=document.FormTextArea.TextAreaBox.value + msg + ' N/A' + '\r' + '----------------------------------' + '\r' } } </script> </head> <body> <table border="1" cellpadding="2" cellspacing="2" width="100%"> <tr> <td width="50%" align="center" valign="top"> <form name="FormTextArea"> <textarea name="TextAreaBox" cols="40" rows="12" wrap="virtual"></textarea> </form> </td> <td width="50%" valign="top"> <font size="2" id="step1">1. Step One</font> <input type="button" value="Input" onclick="inputPrompt('a', 'Step 1:'); changeStepColor('step1');" /><br /> <font size="2" id="step2">2. Step Two</font> <input type="button" value="Input" onclick="inputPrompt('a', 'Step 2:'); changeStepColor('step2');" /><br /> <font size="2" id="step3">3. Step Three</font> <input type="button" value="Input" onclick="inputPrompt('a', 'Step 3:'); changeStepColor('step3');" /><br /> <font size="2" id="step4">4. Step Four</font> <input type="button" value="Input" onclick="inputPrompt('a', 'Step 4:'); changeStepColor('step4');" /><br /> <font size="2" id="step5">5. Step Five</font> <input type="button" value="Input" onclick="inputPrompt('a', 'Step 5:'); changeStepColor('step5');" /> </td> </tr> <tr> <td width="50%" align="center" valign="top"> <input type="button" value="Select Text Area" onClick="selectTextArea()" /> <input type="button" value="Clear Text Area" onClick="document.FormTextArea.TextAreaBox.value=''; history.go(0)" /> </td> <td width="50%" align="center" valign="top">   </td> </tr> </table> </body> </html> How can I execute this: From the dropdown list build up from mysql database (say a list of fruits). I select "Add New Fruit". This triggers it to either have a modal form to add new fruit or a table form. Once submitted, Select dropdown list RELOADS including the newly added data (fruit) without reloading the whole page which contains other form control such as textbox. is it possible to refresh a select list on it's own without refreshing the whole page?
Hi Everyone I'll explain the situation first: I need to build a website that allows students to select from a drop down list and then hit an 'Add button'. From there, that value will go to another part of the screen and display as bullets. Once that list is built, they can hit a final submit button that sends an email to someone with everything they selected. More Detail: LEFT SIDE OF SCREEN: [DROP DOWN LIST] <- this will have all the courses listed that we offer. Once once is selected. [ADD] <- add button that puts the values from the dropdown list to an array. RIGHT SIDE OF SCREEN: My Courses: * TEST1001 * TEST1002 This is being updated dynamically so that whenever the add button is hit, this lists grows. [SEND] <- Send button Thank you, how could i save radio buttons choices especially when i have many groups of radio buttons. i mean when refreshing the page they stay as they are.
I have home page with session close button and 10 child window link and i am opening all child window.All child windows should close after clicking on session close button. Code bellow <html> <script type="text/javascript"> openWins = []; curWin = 0; function openWin(page) { openWins[curWin++] = window.open(page,'_blank'); } function closeAll() { for(var i=0; i<openWins.length; i++) if (openWins[i] && !openWins[i].closed) openWins[i].close(); } window.onunload = closeAll; </script> <body > <input type="button" onClick="openWin('http://www.google.com');" value="Open PopUps"> <input type="button" onClick="closeAll('http://www.google.com');" value="Close PopUps"> </body> </html> Is there anyway to stop the page 'jumping to the top' when using a link like the below? Code: <a href="#" onClick="arrangeCards();">blah</a> .. I just want it to stay in the same position on the page & not jump to the top of the page every time a link like that is clicked. Cheers! Hi, I am using javascript function for refreshing html page. I have used [window.location.reload(true);] method to reload page from server. This code works if i use it by using Link/button etc. For Example: <input type="button" value="Refresh" onclick="window.location.reload(true);" /> But i want to refresh page when page loads. For Example: <body onload = "window.location.reload(true);> But this time, page reloads in an infinite loop. i don't know why... I have also used following function (against body onLoad) to reload and then stop, but this also does'nt work. function doLoad(){ var timeoutId = setTimeout( window.location.reload(true), 1000 ); window.clearTimeout(timeoutID); } Is there a way to stop reloading page after one refresh ? Thanks... I'm attaching my php test file but this is a JS problem. When I scroll down in the web page and the meta refresh hits, in Windows Safari and IE6/7/8 browsers, the web page re-positions back to the top. In Opera and FF the page refreshes but it stays where it is. Can someone look at my test script and see why it is not working in IE and Win Safari? My goal is to have the web page not re-position to the top on the auto refresh. Thanks... when i click on submit button, all the data in form will be inserted into my db. but when i click on refresh the form will be submitted again .. how can i prevent this?
Probably a stupid noob question, is there any way I can stop document.write from outputting info to a new page I would prefer to have it shown in a textarea. Info from an array that is suppose to display in a text area when button is clicked and when another button is clicked it is suppose to show some other info. But what happens is the first info displays in textarea for a few seconds and then the second info is displayed but on a new page and not the textarea where I want it to go I have marked code within the code // I want this specific code to be displayed second but I know its in the wrong spot. Here is the code [CODE] function show() { var myArray = new Array(); myArray[0] = document.getElementById('fullname').value; ' myArray[1] = document.getElementById('address').value; myArray[2] = document.getElementById('phone').value; myArray[3] = document.getElementById('email').value; //Code I want to display second in the textarea //var string = myArray.join("\n") //document.getElementById('textarea').value = string; document.writeln('Thank you for registering,' + ' ' + myArray[0] + '. Your membership will be confirmed by E-mail to ' + myArray[2] + "<br>"); document.writeln('Registration Details:') document.writeln("<br>") for (var i=0; i<myArray.length; i++) { document.write(myArray[i] + "<br>"); } } [\CODE] Thanks in advance Hello there I've been searching and searching but couldn't make this script stop reseting after reloading the page. The scripts counts down some timers every x hours but the problem is that each time the page is reloaded the timer resets. Could anyone help me here how to keep the countdown going even if i reload page? thanks in advance I call the timers with. Example Timer 8: >div... etc id="timeLeft8" Code: <script type="text/javascript"> var events = new Array(); events[1]={name: 'Blood Castle:', startUp: new Array( {hour:0,minute:25}, {hour:2,minute:25}, {hour:4,minute:25}, {hour:6,minute:25}, {hour:8,minute:25}, {hour:10,minute:25}, {hour:12,minute:25}, {hour:14,minute:25}, {hour:16,minute:25}, {hour:18,minute:25}, {hour:20,minute:25}, {hour:22,minute:25} )} events[2]={name: 'Devil Squa ', startUp: new Array( {hour:1,minute:55}, {hour:3,minute:55}, {hour:5,minute:55}, {hour:7,minute:55}, {hour:9,minute:55}, {hour:11,minute:55}, {hour:13,minute:55}, {hour:15,minute:55}, {hour:17,minute:55}, {hour:19,minute:55}, {hour:21,minute:55}, {hour:23,minute:55} )} events[3]={name: 'Chaos Castle:', startUp: new Array( {hour:0,minute:55}, {hour:2,minute:55}, {hour:4,minute:55}, {hour:6,minute:55}, {hour:8,minute:55}, {hour:10,minute:55}, {hour:12,minute:55}, {hour:14,minute:55}, {hour:16,minute:55}, {hour:18,minute:55}, {hour:20,minute:55}, {hour:22,minute:55} )} events[4]={name: 'Red Dragon:', startUp: new Array( {hour:0,minute:0}, {hour:2,minute:0}, {hour:4,minute:0}, {hour:6,minute:0}, {hour:8,minute:0}, {hour:10,minute:0}, {hour:12,minute:0}, {hour:14,minute:0}, {hour:16,minute:0}, {hour:18,minute:0}, {hour:20,minute:0}, {hour:22,minute:0} )} events[5]={name: 'Gold Invasion:', startUp: new Array( {hour:0,minute:0}, {hour:2,minute:0}, {hour:4,minute:0}, {hour:6,minute:0}, {hour:8,minute:0}, {hour:10,minute:0}, {hour:12,minute:0}, {hour:14,minute:0}, {hour:16,minute:0}, {hour:18,minute:0}, {hour:20,minute:0}, {hour:22,minute:0} )} events[6]={name: 'White Wizard:', startUp: new Array( {hour:0,minute:0}, {hour:2,minute:0}, {hour:4,minute:0}, {hour:6,minute:0}, {hour:8,minute:0}, {hour:10,minute:0}, {hour:12,minute:0}, {hour:14,minute:0}, {hour:16,minute:0}, {hour:18,minute:0}, {hour:20,minute:0}, {hour:22,minute:0} )} events[7]={name: 'Blue:', startUp: new Array( {hour:0,minute:40}, {hour:1,minute:40}, {hour:2,minute:40}, {hour:3,minute:40}, {hour:4,minute:40}, {hour:5,minute:40}, {hour:6,minute:40}, {hour:7,minute:40}, {hour:8,minute:40}, {hour:9,minute:40}, {hour:10,minute:40}, {hour:11,minute:40}, {hour:12,minute:40}, {hour:13,minute:40}, {hour:14,minute:40}, {hour:15,minute:40}, {hour:16,minute:40}, {hour:17,minute:40}, {hour:18,minute:40}, {hour:19,minute:40}, {hour:20,minute:40}, {hour:21,minute:40}, {hour:22,minute:40}, {hour:23,minute:40}, {hour:24,minute:40} )} events[7]={name: 'Hide&Seek:', startUp: new Array( {hour:0,minute:42}, {hour:1,minute:22}, {hour:2,minute:32}, {hour:3,minute:42}, {hour:4,minute:52}, {hour:6,minute:02}, {hour:7,minute:12}, {hour:8,minute:22}, {hour:9,minute:32}, {hour:10,minute:42}, {hour:11,minute:52}, {hour:13,minute:02}, {hour:14,minute:12}, {hour:15,minute:22}, {hour:16,minute:32}, {hour:17,minute:42}, {hour:18,minute:52}, {hour:20,minute:02}, {hour:21,minute:12}, {hour:22,minute:22}, {hour:23,minute:32} )} events[8]={name: 'Sky:', startUp: new Array( {hour:1,minute:5}, {hour:4,minute:5}, {hour:7,minute:5}, {hour:10,minute:5}, {hour:13,minute:5}, {hour:16,minute:5}, {hour:19,minute:5}, {hour:23,minute:5} )} events[9]={name: 'Boss Attack:', startUp: new Array( {hour:1,minute:50}, {hour:4,minute:50}, {hour:7,minute:50}, {hour:10,minute:50}, {hour:13,minute:50}, {hour:16,minute:50}, {hour:23,minute:50} )} events[10]={name: 'Happy Hour:', startUp: new Array( {hour:5,minute:5}, {hour:2,minute:5}, {hour:8,minute:5}, {hour:11,minute:5}, {hour:14,minute:5}, {hour:17,minute:5}, {hour:20,minute:5}, {hour:0,minute:5} )} events[11]={name: 'Hit and Up:', startUp: new Array( {hour:0,minute:20}, {hour:2,minute:20}, {hour:5,minute:20}, {hour:8,minute:20}, {hour:11,minute:20}, {hour:14,minute:20}, {hour:20,minute:20} )} events[12]={name: 'Raklion:', startUp: new Array( {hour:0,minute:15}, {hour:3,minute:15}, {hour:6,minute:15}, {hour:9,minute:15}, {hour:12,minute:15}, {hour:15,minute:15}, {hour:18,minute:15}, {hour:21,minute:15} )} events[13]={name: 'Moss:', startUp: new Array( {hour:3,minute:35}, {hour:7,minute:35}, {hour:11,minute:35}, {hour:15,minute:35}, {hour:19,minute:35}, {hour:23,minute:35} )} events[14]={name: 'Illusion Temple:', startUp: new Array( {hour:0,minute:25}, {hour:1,minute:25}, {hour:2,minute:25}, {hour:3,minute:25}, {hour:4,minute:25}, {hour:5,minute:25}, {hour:6,minute:25}, {hour:7,minute:25}, {hour:8,minute:25}, {hour:9,minute:25}, {hour:10,minute:25}, {hour:11,minute:25}, {hour:12,minute:25}, {hour:13,minute:25}, {hour:14,minute:25}, {hour:15,minute:25}, {hour:16,minute:25}, {hour:17,minute:25}, {hour:18,minute:25}, {hour:19,minute:25}, {hour:20,minute:25}, {hour:21,minute:25}, {hour:22,minute:25}, {hour:23,minute:25}, {hour:24,minute:25} )} events[15]={name: 'Castle Deep:', startUp: new Array( {hour:1,minute:25}, {hour:7,minute:25}, {hour:13,minute:25}, {hour:19,minute:25} )} events[16]={name: 'CryWolf:', startUp: new Array( {hour:1,minute:45}, {hour:4,minute:45}, {hour:7,minute:45}, {hour:10,minute:45}, {hour:13,minute:45}, {hour:16,minute:20}, {hour:19,minute:45}, {hour:22,minute:45} )} var curTime=1336998502 var dateTime=1336953600 function timeLeft(i){ for(j in events[i].startUp){ tmp=events[i].startUp[j].hour*3600+events[i].startUp[j].minute*60 if(dateTime+tmp>curTime){ return dateTime+tmp-curTime; } } tmp=events[i].startUp[0].hour*3600+events[i].startUp[0].minute*60 return dateTime+86400+tmp-curTime; } function getFormatedLeftTime($seconds){ $second = $seconds % 60; $minutes = parseInt(($seconds / 60) % 60); $hour = parseInt(($seconds / 3600) % 24); $days = parseInt($seconds / (24 * 3600)); $ret = ''; if ($days > 0) if ($days == 1) $ret += '1 day '; else $ret += $days + ' days '; if ($hour > 0){ if ($hour < 10) $hour = '0' + $hour; $ret += $hour + ':'; }else if ($days > 0) $ret += '00:'; if($minutes < 10) $minutes = '0' + $minutes; $ret += $minutes + ':'; if ($second < 10) $second = '0' + $second; $ret += $second; return $ret; } function updateTimes(){ curTime++; for (i in events){ document.getElementById("timeLeft"+i).innerHTML=getFormatedLeftTime(timeLeft(i)); } } for(i in events) document.getElementById("eventList").innerHTML+="<div style='float:right; color: #FFFF00;' id='timeLeft"+i+"'>"+getFormatedLeftTime(timeLeft(i))+"</div><div style=\"color: #00FFFF;\"><strong>"+events[i].name+"</strong></div>"; setInterval("updateTimes()", 1000); </script> I have a set of tabs that are set with an href that adds a query string to the url such as "?t=1", meaning the first tab is selected. Technically it works just fine but every time I click a tab it reloads the page and I'm not entirely sure how to stop this. I'm using a jquery plugin to handle the query strings. Here's the plugin. Here's the piece of the code that matters: Code: var url = location.search; var tab = $.query.get('t'); init(tab); function init(tab){ $("div.tab").hide(); //hides all the content boxes related to the tabs $("div#tab"+tab).fadeIn("fast"); //Shows the selected tab's content box setInactive(); //Styles unselected tabs setActive(tab); //Styles selected tab } Any help would be greatly appreciated. <HTML> <HEAD> <title>User Emails</title> <%@ script type="text/javascript" %> <% set conn=Server.CreateObject("ADODB.Connection"); conn.Provider="Microsoft.Jet.OLEDB.4.0"; conn.Open "e:/Users.mdb"; if (conn!!Null) {sql="INSERT INTO [CustomerResponse] (UserID,UserName,Company,Inserted,Source,Page)"; sql=sql & " VALUES " & "(" & Request.QueryString(UserId) & ",'" & Request.QueryString(UserName) & "',#" & Date() & "#," & Request.QueryString(Source) & "," & Request.QueryString(Page) & ")"; Set rs=conn.Execute(sql); } %> </script> <meta http-equiv="Refresh" content="5;url=http://www.Microsoft.com"> <STYLE> </HEAD> <body> Do Nothing </BODY> </HTML> ================ End of page ============= Note: e:\ is a local drive in the server box Users.mdb is an Access database Thanks in advance for any support(s) or input(s) When user answers correctly (on key up AND key down), text field (CAPTCH) should become disabled, and span of id=correct should change to "√ Correct".. What is wrong with my code? No errors are returned. It just doesnt work. Please excuse my novice knowledge of javascript. Im just starting. Could someone please explain to me my error rather than solve it? I wanna learn, not be handed the answer. Thanks in advance, Robert PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Captcha</title> <script type="text/javascript"> var x = 44; var y = document.getElementById('CAPTCHA'); function correct() { if (y = x.value) { document.getElementById("correct").innerHTML = "√ Correct"; document.getElementById("CAPTCHA").innerHTML.disabled = "disabled"; } else {} } </script> </head> <body> 11 x 4 = <input type="text" id="CAPTCHA" onkeyup="correct()" onkeydown="correct()" /> <span id="correct">.....</span> </body> </html> |