Submit Button Display

JavaScript and client side scripting.

Moderator: General Moderators

icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Submit Button Display

Post 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">
}
AlecH
Forum Commoner
Posts: 27
Joined: Fri Feb 24, 2006 4:22 pm
Location: New Hampshire

Post 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
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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>
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post 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.
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Post 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?
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post 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.
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Post 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? :?
Last edited by icesolid on Wed Mar 01, 2006 6:25 pm, edited 1 time in total.
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post 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.
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Post 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? :?
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post by nickman013 »

Yeah you are, I dont understand why you would if you found what you were looking for. :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :? :?
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Post 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?
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post 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.
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Post 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:
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post 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?
Post Reply