onClick delay

[unplugged_web]

Is it possible to set a delay to an onClick command? I've got

onclick="$('#question3').hide(); $('#phone').show(); return false;"

on a button, but I wanted to change it so that it waits for a second or two before running through that script. I've used css to change the background colour of the button so that when you roll over the button it's one colour and then a different one when you click on it.Thanks

[justsomeguy]

You need to define a new function with the actions you want to happen, and schedule that function to run using setTimeout. Keep in mind that you still need to return false when the click happens, the return statement should still run immediately instead of waiting. You could do it like this:onclick="setTimeout(function() {$('#question3').hide(); $('#phone').show();}, 1000); return false;"

[unplugged_web]

You need to define a new function with the actions you want to happen, and schedule that function to run using setTimeout. Keep in mind that you still need to return false when the click happens, the return statement should still run immediately instead of waiting. You could do it like this:onclick="setTimeout(function() {$('#question3').hide(); $('#phone').show();}, 1000); return false;"

Thanks, that's exactly what I wanted. One question though - when somebody clicks the button the active state (a file called on_click.png) is shown, but only for a second - is it possible to have that shown permanently after someone has clicked it?Thanks

[unplugged_web]

Also that doesn't seem to send any value at all. The whole form looks like this:

<form action="answer_sms.php" method="post">				<div id="question1" style="position: relative; top: 292px; left: 342px; width: 600px; text-align: center;">					<h1>Just answer the following questions</h1>					<h2 style="padding-bottom: 37px;">1. How many days in February?</h2>					<ul>					   <li><input name="answer1" type="image" value="feb31" onclick="setTimeout(function() {$('#question1').hide(); $('#question2').show();}, 2000); return false" class="button1"/></li>						<li><input name="answer1" type="image" value="feb28" onclick="setTimeout(function() {$('#question1').hide(); $('#question2').show();}, 2000); return false" class="button2"/></li>						<li><input name="answer1" type="image" value="feb30" onclick="setTimeout(function() {$('#question1').hide(); $('#question2').show();}, 2000); return false" class="button3"/></li>					</ul>				</div>				<div id="question2" style="position: relative; top: 292px; left: 342px; width: 600px; text-align: center; display: none;">					<h1>Two more questions to go...</h1>					<h2>2. How many is June?</h2>					<ul>						<li><input name="answer2" type="image" value="june30" onclick="setTimeout(function() {$('#question2').hide(); $('#question3').show();}, 2000); return false" class="button2"/></li>						<li><input name="answer2" type="image" value="june31" onclick="setTimeout(function() {$('#question2').hide(); $('#question3').show();}, 2000); return false" class="button4"/></li>						<li><input name="answer2" type="image" value="june28" onclick="setTimeout(function() {$('#question2').hide(); $('#question3').show();}, 2000); return false" class="button4"/></li>					</ul>				</div>				<div id="question3" style="position: relative; top: 292px; left: 342px; width: 600px; text-align: center; display: none;">					<h1>Final question...</h1>					<h2>3. How any days in 2009?</h2>					<ul>						<li><input name="answer3" type="image" value="165" onclick="setTimeout(function() {$('#question3').hide(); $('#phone').show();}, 2000); return false" class="button6"/></li>						<li><input name="answer3" type="image" value="365" onclick="setTimeout(function() {$('#question3').hide(); $('#phone').show();}, 2000); return false" class="button5"/></li>						<li><input name="answer3" type="image" value="265" onclick="setTimeout(function() {$('#question3').hide(); $('#phone').show();}, 2000); return false" class="button6"/></li>					</ul>				</div>				<div id="phone" style="position: relative; top: 292px; left: 342px; width: 600px; text-align: center; display: none;">					<h1>You're done!</h1>					  <h2>Now if you send us your email address we'll send you a discount voucher.</h2>					<div class="input"><input type="text" id="mobile" value="07" maxlength="11" /></div>					<div class="button"><input name="submit" type="image" value="Enter Now" class="send"></div>					<div class="clearer"></div>					<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />					<div class="terms">Got a question or need to <a href="#" onclick="java script:$('#faq').trigger('click');">contact us?</a> </div>				</div>			  </form>

[ShadowMage]

Thanks, that's exactly what I wanted. One question though - when somebody clicks the button the active state (a file called on_click.png) is shown, but only for a second - is it possible to have that shown permanently after someone has clicked it?Thanks

You can change it with javascript in your onclick handler. Just rip the stuff out of the handler and put it into another function, which you'd then call from the onclick event. Ex.

function doStuff() {   document.getElementById("yourBtn_ID").className = "activeClass";   setTimeout(function() {$('#question3').hide(); $('#phone').show();}, 1000);   return false;}

Your onclick would now look like this:onclick="doStuff();"

[unplugged_web]

You can change it with javascript in your onclick handler. Just rip the stuff out of the handler and put it into another function, which you'd then call from the onclick event. Ex.

function doStuff() {   document.getElementById("yourBtn_ID").className = "activeClass";   setTimeout(function() {$('#question3').hide(); $('#phone').show();}, 1000);   return false;}

Your onclick would now look like this:onclick="doStuff();"

Great thanks, I'll give that a go. The form doesn't seem to send any values at all can I do that with that function too?

[justsomeguy]

How do you know the form isn't submitting anything? Have you printed $_POST or checked in something like Firebug?

[unplugged_web]

How do you know the form isn't submitting anything? Have you printed $_POST or checked in something like Firebug?

Yep I've tried that - I just get an error saying:

Undefined variable: answer1

and I get that for everything

[ShadowMage]

Could you show us a snippet of your code?Try using this:echo nl2br(print_r($_POST, true));to print everything that's in $_POST. What do you get?

[unplugged_web]

Could you show us a snippet of your code?Try using this:echo nl2br(print_r($_POST, true));to print everything that's in $_POST. What do you get?

I'm not sure what it means, but this is what I got:

Array([submit_x] => 0[submit_y] => 0[submit] => Enter Now)

[justsomeguy]

I posted in the other thread that the problem is the image input element.