Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Change from a Button to an Image

Posted on 2013-01-12
15
Medium Priority
?
251 Views
Last Modified: 2013-01-13
I'm using this code that has buttons to load a listbox.  However, instead of buttons I want to use images to click on.  How would I switch this code so that I can click on an image as opposed to a button?

	$(document).ready(function() {
	$("button").click(function() {
	display( $(this).val() );
		})
	})

	function display(what)
	{
	$.getJSON("mydoggie.php?ajax=true", { "case" : what }, function(data) {
	$("#Doggie").empty();
	$.each(data, function(index, objRecord) {
	$("#Doggie").append('<option value="' + objRecord.ID + '">' + objRecord.Name + '</option>');
			});
		});
	}
</script>
</head>
<body>
<form>
    <button type="button" value="Place">Place</button>
 code]

This is what I am using for a clickable image now...
[code]   <input type="image" onClick= "javascript:display()"
              onMouseOver="MM_swapImage('Search','','SearchByPlace.jpg',1)"
              onMouseOut="MM_swapImgRestore()" src="Glass-Place.jpg" alt="Place"
              align="middle" width="160" height="151" value ="Place">[/

Open in new window

0
Comment
Question by:DS928
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
  • 2
15 Comments
 

Author Comment

by:DS928
ID: 38770945
Tried this....doesn't work.

function display(what)
	{
		$(this).val()
		$.getJSON("mydoggie.php?ajax=true", { "case" : what }, function(data) {
			$("#Doggie").empty();
			$.each(data, function(index, objRecord) {
			$("#Doggie").append('<option value="' + objRecord.ID + '">' + objRecord.Name + '</option>');
			});


<input type="image" value ="Place" onClick= "javascript:display()"
  onMouseOver="MM_swapImage('Search','','SearchByPlace.jpg',1)"
  onMouseOut="MM_swapImgRestore()" src="Glass-Place.jpg" alt="Place"
  align="middle" width="160" height="151">

Open in new window

0
 

Author Comment

by:DS928
ID: 38770970
Also tried this...doesn't work as well.

$(document).ready(function() {
$("#Glass").click(function() {
display( $(this).val() );
})
})

<input name="Glass" type="image" id="Glass" value ="Place" 
onMouseOver="MM_swapImage('Search','','SearchByPlace.jpg',1)"
onMouseOut="MM_swapImgRestore()" src="Glass-Place.jpg" alt="Place"
align="middle" width="160" height="151">

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 38770981
use : $("input:image")
instead : $("button")
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:DS928
ID: 38770985
Have this, and nothing is happening.

$("input:image").click(function() {
display( $(this).val() );
		})
	})
<input type="image" onClick= "javascript:display()"
onMouseOver="MM_swapImage('Search','','SearchByPlace.jpg',1)"
onMouseOut="MM_swapImgRestore()" src="Glass-Place.jpg" alt="Place"
align="middle" width="160" height="151" value ="Place">

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 38770995
remove the onclick in your image button, yo already have it line 1
0
 

Author Comment

by:DS928
ID: 38771014
Ok it sort of works.  If I quickly click on it two or three times the listbox loads......sometimes. onClick removed from image button.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38771015
give the new link to your page
0
 

Author Comment

by:DS928
ID: 38771022
Here is the direct link.

http://www.menuhead.net/index.html

Thank you.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 38771037
replace :
$("input:image").click(function() {
         display( $(this).val() );
})

Open in new window

by :
$("input:image").click(function(evt) {
        evt.preventDefault();
        display( $(this).val() );
})

Open in new window

0
 

Author Comment

by:DS928
ID: 38771044
Puurfect!  You are so good!  I don't know why this works, (at this point) but I have learned a lot today!  Thank you.
0
 

Author Closing Comment

by:DS928
ID: 38771045
The best, This person knows their stuff!  And they don't beat you over your head!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38771051
image button submit the page, this is so fast that you may not notice that. if the page refresh you lost all change made by the ajax call (if it reach before...)

evt.preventDefault() allow to break propagation of the submit event
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38771220
if you have no intention of submitting the form, dont use an image at all.

<a href="#" class="button" title="Place"
onMouseOver="MM_swapImage('Search','','SearchByPlace.jpg',1)"
onMouseOut="MM_swapImgRestore()"><img src="Glass-Place.jpg" alt="Place"
align="middle" width="160" height="151" border="0"></a>

and do

$(".button").on("click",function(e) {
  e.preventDefauilt(); // here too
  display( this.title );
});
0
 

Author Comment

by:DS928
ID: 38772356
Why would this be?  I'm new to this, all I want to do is click on an image and populate the list box.  Is this submiting the form?  Should that matter if its an image or a button? Thank you.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38772583
input type=image IS a submit button
input type button is not
a link is not either.

My suggestion is the most logical to use since you do not need to think about the form at all.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

604 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question