Solved

Change from a Button to an Image

Posted on 2013-01-12
15
249 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 500 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

Independent Software Vendors: 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!

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

688 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