...

View Full Version : Put Event Handler in Submit button



lipak
11-12-2004, 09:13 PM
G'day!

Basically what we have here is some code that displays and image when the submit button is clicked.

I have been attempting take this event and place it within the input tag. The reason for this is that when the submit button is placed within a form the button submits and overlooks the load image onclick.

The code below works as is. Of course, as soon as you place the submit button between form tags the problem appears.

Any help would be greatly appreciated!



<html>
<head>
<script type="text/javascript">
function loading() //call this function onclick
{
document.getElementById("DIV1").style.display = ""; //this will actually
return true;
}

</script>
</head>

<body>

<input type="submit" value="test" name="B1" onclick="return loading();">

<div id="DIV1" style="display:none">
<img src='N2B_3E2.gif' />
</div>
</body>
</html>

lavalamp
11-12-2004, 09:18 PM
I'm sorry, what's the problem with this script? The only thing I can see is that when you click the submit button and the image appears, you don't have long to see it before you are taken to a different page.

lipak
11-12-2004, 09:35 PM
I'm sorry, I should have explained a bit more about the application of this script. It is going to be used for a PHP uploader and I was planning on using an animated GIF as the image which show's a looped "progress bar" until the upload summary page loads. So, there is technically no problem with the code listed above, it is just that it doesn't work for my situation.

lavalamp
11-13-2004, 04:51 PM
OK, so what actually needs to be changed? If N2B_3E2.gif is your animation then I don't know why it needs changing at all.

lipak
11-13-2004, 06:26 PM
Thanks for your interest in assisting me thus far. I apologize for not explaining things well - I'm trying. Basically I would like to take the code from my original post from a Javascript function and take it down to an event handler within the submit button.

I want to take the code from my first post from this (example of calling a function):



<HTML>
<HEAD>
<TITLE>JavaScript</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--

function alert_box()
{
alert("I am displayed from a function");
}

//-->
</SCRIPT>
</HEAD>
<BODY>

<A HREF="javascript:void(0)" onclick="alert_box()">Display alert</A>

</BODY>
</HTML>


To this (event handler running from within the submit button):



<HTML>
<HEAD>
</HEAD>
<BODY>
<input type="submit" value="Submit" onClick="alert('You clicked the submit button!')">
</BODY>
</HTML>


As I mentioned before, in my original code the image loading is overlooked because the submit button is busy submitting the data (uploading the file in my uploader). If I can place the event handler in the submit button the image will load while the upload proceeds. Typically the files that are uploaded are large enough that there is at least 30 seconds before the upload summary page loads. So you would in fact get a change to see the image load.

Thanks again for any assistance.

lavalamp
11-13-2004, 07:43 PM
Ah, I see. In that case do this:
<input type="submit" value="test" name="B1" onclick="document.getElementById('DIV1').style.display='block';return true;">

lipak
11-13-2004, 08:07 PM
Thank you! That is exactly what I was looking for. It works perfectly.

Your patience and help have been greatly appreciated! :)

lavalamp
11-13-2004, 11:33 PM
Happy to help. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum