Page 1 of 2

Submit Button Display

Posted: Wed Mar 01, 2006 4:20 pm
by icesolid
I was wondering if I could use JavaScript to make an image display if a form button was hit. I do not want the page to reload, I just want an image to display if the button is hit.

For example (obviously not real java code below, just logic):

Code: Select all

<input type="button" name="show_image">

if(show_image is hit by user) {
    print <img src="image_name.gif">
}

Posted: Wed Mar 01, 2006 4:59 pm
by AlecH
Ah, thats easy. All you need is plain HTML. Something like this.

Code: Select all

<input type='image' src='imgsrchere' name='submit'>
its something like that, not quite sure exactly what it is. :D

Posted: Wed Mar 01, 2006 5:08 pm
by icesolid
No I want a form button that WHEN the user clicks on it THEN a image will display.

Basically when the page is first loaded there is no image on the web site, but WHEN the user clicks on this form button a image will make the image appear.

In other words when a user clicks the SHOW IMAGE button I want an image to just display.

Posted: Wed Mar 01, 2006 5:53 pm
by RobertGonzalez
You're going to want to load the image inside a <div> whose 'display' style attribute is originally set to 'none', then when the button is clicked, have it change to 'True'. The code below take an image, and when the image is clicked, shows a hidden div and changes the image to another image. This isn't exactly what you want, but you might be able to gleen something from this...

Code: Select all

function togglePanelUseImage( targetID, buttonID, trackerID, imageUrl, collapsedImageUrl )
{
	if ( document.getElementById ) 
	{
		var target = document.getElementById( targetID );
		
		if ( target != null ) 
		{
			target.style.display = ( target.style.display != "none" ) ? "none" : "";
		}
		
		if ( collapsedImageUrl != "" ) 
		{
			var imageButton = document.getElementById( buttonID );
			
			if ( imageButton != null ) 
			{
				imageButton.src = ( target.style.display != "none" ) ? collapsedImageUrl : imageUrl;
			}
		}
		
		var tracker = document.getElementById( trackerID );
		
		if ( tracker != null ) 
		{
			tracker.value = ( target.style.display == "none" ) ? "True" : "False";
		}
		
		return false;
	}
	return true;
}
You can call it like this...

Code: Select all

<p>
<input id="add_tracker_faq" name="add_tracker_faq" type="hidden" value="True" />
<input type="image" id="add_clicker_faq" name="add_clicker_faq" onclick="return togglePanelUseImage('add_form_faq', 'add_clicker_faq', 'add_tracker_faq', 'images/img_question_ask.gif', 'images/img_question_ask_no.gif');" src="images/img_question_ask.gif" title="Ask us a question" border="0" />
</p>

<div id="add_form_faq" style="display: none;">
<h1>Shows up after clicking the image AND changes the image</h1>
</div>

Posted: Wed Mar 01, 2006 6:18 pm
by nickman013
Put this in your head of the page.

Code: Select all

<script  type="text/javascript">
	function alterDisplayProperties(linkName, divName){
	if (document.getElementById(divName).style.display == "none"){
	document.getElementById(divName).style.display = "BLOCK";
	document.getElementById(linkName).innerHTML = '<input type=button value="HIDE IMAGE">';
	}else{
	document.getElementById(divName).style.display = "none";
	document.getElementById(linkName).innerHTML = '<input type=button value="SHOW IMAGE">';
	}
	}
</script>

Put this where you want your button to be.

Code: Select all

<div>
	<span>
		&nbsp;&nbsp;<a href="#" id = 'link29499' onclick="alterDisplayProperties('link29499', 'div29499')"><input type=button value="WHAT DO YOU WANT BUTTON TO SAY"></a>
	</span>
	<div id="div29499" style="display:none">
		  <img src=PATHTOIMAGE.jpg>
       </div>
</div>
This is exactly what you are looking for.

Good Luck!

To make multiple of these, change the numbers of the id's. But for each one make them the same number for each id.

Posted: Wed Mar 01, 2006 6:20 pm
by icesolid
Hmhm...this isent makign sense to me.

All I want is a form button that when pressed a image appears on the site.

I didden't think it would require that much code.

Any easier ways?

Posted: Wed Mar 01, 2006 6:21 pm
by nickman013
The one I posted is the easiest way. Who cares about so much code, its not even alot! Also take what you get for granted, your lucky you have people here helping you in the first place.

Posted: Wed Mar 01, 2006 6:24 pm
by icesolid
I realize that people are only here to help. I was not saying your solution was not helpful. I was simply asking ANYONE on the forum if they had an easier solution.

In fact I was using this forum the way it should be. We are here for discussion on web site development, right? :?

Posted: Wed Mar 01, 2006 6:25 pm
by nickman013
Oh. Did you atleast try the ones we provided you :roll:, its exactly what you want (the one I posted).

Are you familiar with HTML?

EDIT: It doesnt really get any easier than this anyway.

Posted: Wed Mar 01, 2006 6:27 pm
by icesolid
Yes I tried it, and it worked.
I realize that people are only here to help. I was not saying your solution was not helpful. I was simply asking ANYONE on the forum if they had an easier solution.
I was simply ASKING for anyone elses opinion on an easier solution, am I allowed to do that? :?

Posted: Wed Mar 01, 2006 6:28 pm
by nickman013
Yeah you are, I dont understand why you would if you found what you were looking for. :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :?

Posted: Wed Mar 01, 2006 6:34 pm
by icesolid
Because I am asking for someone elses opinion, there probally is an easier method of accomplishing my solution.

Or do you know everything?

Posted: Wed Mar 01, 2006 6:40 pm
by nickman013
Aright im not going to sit here and argue with you. If you want to use it, use it. This is a very simple method. I am sorry you want people writing your codes and doing your homework for you. But we provided you with very good methods. Mine is not even long!

Oh well, good luck

EDIT: Also I dont know if you didnt know, you only have to put that one code in the head of the document. Not everywhere.

Posted: Wed Mar 01, 2006 6:56 pm
by icesolid
Sorry I did not see your resuced code above, the only time I looked at it was when you first posted and had it all in a class.

Only thing about the code above is I dont want the option to hide it, I just want the image to show when the button is clicked, that's it.

My bad :oops:

Posted: Wed Mar 01, 2006 7:17 pm
by nickman013
I see..

Then replace

Code: Select all

innerHTML = '<input type=button value="HIDE IMAGE">';
with

Code: Select all

innerHTML = '<input type=button value="">';
hows that?