Solved

Change from a Button to an Image

Posted on 2013-01-12
15
247 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
  • 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
Technology Partners: 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

Technology Partners: 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

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

679 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