jmc92 Posted January 21, 2010 Share Posted January 21, 2010 Ok I have an image button on a registration formbut what im trying to do is make it so when the button is clicked the image will change an stay changedand a 10 second delay before the next page loadshelp please Link to comment Share on other sites More sharing options...
just2comment Posted January 21, 2010 Share Posted January 21, 2010 You can use the functionsetTimeoutI've had some trouble to execute a function with parameters, but I'm not an expert, and you will find a lot of pages explaining setTimeout anyway.If you want to completely "freeze" your browser (code copied from some site/s I don't remember):function sleep(milliseconds2sleep) {var start = new Date().getTime();while ((new Date().getTime() - start) < milliseconds2sleep);However, it's rather dangerous on non-threaded browsers since it freezes the browser, i.e. every "Tab". Link to comment Share on other sites More sharing options...
jmc92 Posted January 21, 2010 Author Share Posted January 21, 2010 hmmokwhat about the image switch Link to comment Share on other sites More sharing options...
just2comment Posted January 21, 2010 Share Posted January 21, 2010 I think you will have to send the javascript code and the HTML you are using... It's not possible (at least for me) to figure it out Link to comment Share on other sites More sharing options...
jmc92 Posted January 21, 2010 Author Share Posted January 21, 2010 I have this codebut it does it onunclick even though I said for it to do a onclick <head><script TYPE="text/javascript"><!--// copyright 1999-2001 Idocs, Inc. http://www.idocs.com/tags/// Distribute this script freely, but keep this // notice with the code.var submitRolls = new Object();function submitroll(src, oversrc, name){this.src=src;this.oversrc=oversrc;this.name=name;this.alt="Submit Query";this.write=submitroll_write;}function submitroll_write(){var thisform = 'document.forms[' + (document.forms.length - 1) + ']';submitRolls[this.name] = new Object();submitRolls[this.name].over = new Image();submitRolls[this.name].over.src = this.oversrc;submitRolls[this.name].out = new Image();submitRolls[this.name].out.src = this.src;document.write ( '<A Onclick="if (document.images)document.images[\'' + this.name + "'].src=submitRolls['" + this.name + '\'].over.src"' + ' Onclick="if (document.images)document.images[\'' + this.name + "'].src=submitRolls['" + this.name + '\'].out.src"' + ' HREF="java script:' );if (this.sendfield) { if (! this.sendvalue) this.sendvalue = 1; document.write(thisform, ".elements['", this.sendfield, "'].value='", this.sendvalue, "';"); }document.write(thisform + '.submit();void(0);"');if (this.msg)document.write(' onClick="return confirm(\'' , this.msg, '\')"');document.write('>');document.write('<IMG SRC="' + this.src + '" ALT="' + this.alt + '" BORDER=0 NAME="' + this.name + '"');if (this.height)document.write(' HEIGHT=' + this.height);if (this.width)document.write(' WIDTH=' + this.width);if (this.otheratts)document.write(' ' + this.otheratts);document.write('></A>');if (this.sendfield) { document.write('<INPUT TYPE=HIDDEN NAME="' + this.sendfield + '">'); document.forms[document.forms.length - 1].elements[this.sendfield].value=''; }}//--></SCRIPT></head><FORM ACTION="../cgi-bin/mycgi.pl">email: <INPUT NAME="email"><script TYPE="text/javascript"><!--var sr = new submitroll("submit.out.gif","submit.over.gif","mysubmit");sr.write();//--></SCRIPT><NOSCRIPT><INPUT TYPE=SUBMIT VALUE="Go!"></NOSCRIPT></FORM> Link to comment Share on other sites More sharing options...
jeffman Posted January 21, 2010 Share Posted January 21, 2010 unclick? You mean when the mouse is released? That's a click. If you want just the mousedown, use mousedown. Just know that users dislike that.That's pretty old code, BTW. You don't see stuff like that too much these days Link to comment Share on other sites More sharing options...
jmc92 Posted January 21, 2010 Author Share Posted January 21, 2010 Coding for older browsers is something I do alotOk I have a working script for the image switchBut the delay of page load after I click the button wont work <head><script>function showLoading(button) { button.style.backgroundImage = 'url(loading-arrows_12x12.gif)'; button.style.color = '#676561'; wait(400); // Else the form will submit before the background image changes return true;}function wait(ms) { var date = new Date(); var curDate = null; do{ curDate = new Date(); } while(curDate - date < ms);}</script><script>function myfunction() { } var delay = 5000; setTimeout( myfunction, delay )</script><style>.submitBtn { background-image: url('blank.gif'); background-repeat: no-repeat; background-position: 100% 50%; padding-right: 15px; text-align: center;}</style></head><FORM ACTION="../cgi-bin/mycgi.pl">email: <INPUT NAME="register"><button class="submitBtn" onclick="showLoading(this); setTimeout( myfunction, delay );">Submit</button></FORM> Link to comment Share on other sites More sharing options...
justsomeguy Posted January 21, 2010 Share Posted January 21, 2010 Coding for older browsers is something I do alotWhy? It's not really necessary to support anything before IE6, and IE6 is able to understand the more modern code.The wait function you're using isn't really a great idea. That function will basically max out your CPU while it continually runs in a loop. It's not exactly efficient for a "wait" method to max out the CPU. The setTimeout and setInterval functions are specifically for running a piece of code after a certain number of milliseconds. If you want to click the button, then wait a while, then submit the form, then you need to use an onsubmit handler on your form, not an onclick handler on your button. You can use onclick to change the button, but you need to use onsubmit to cancel the form's submit action and instead do it manually yourself after a certain amount of time. The form.submit method will submit a form, and your onsubmit handler can return false to cancel the default submit. Link to comment Share on other sites More sharing options...
jeffman Posted January 21, 2010 Share Posted January 21, 2010 It's important to grab the submit event also because forms can be submitted when the user hits enter when the focus is on a text input. So you'd have to invest a lot of code into grabbing the enter key. Or just do as JSG suggests. Link to comment Share on other sites More sharing options...
just2comment Posted January 22, 2010 Share Posted January 22, 2010 Just to see if this is what the site needs and the last posts suggest------------------------------------------<html><head><script>function showLoadingAndSubmit() { button = document.getElementById('myBtn'); button.style.backgroundImage = 'url(loading-arrows_12x12.gif)'; button.style.color = '#676561'; var delay = 5000; setTimeout("document.forms['myform'].submit()", delay); return false;}</script><style>.submitBtn { background-image: url('blank.gif'); background-repeat: no-repeat; background-position: 100% 50%; padding-right: 15px; text-align: center;}</style></head><body> <FORM name="myform" id="myform" ACTION="../cgi-bin/mycgi.pl" onsubmit="return showLoadingAndSubmit()"> email: <INPUT NAME="register"> <button class="submitBtn" id="myBtn">Submit</button> </FORM></body></html>------------------------------------------However, the field value (that of "register") will be assigned at the time the actual submit is made, not the time at which the form button or enter are "used", i.e. the user is able to change the value of "register" after the UI suggests it's loading the new page content. I think AJAX should be used to "solve" this, but maybe there are other ways... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.