Solved

Change from a Button to an Image

Posted on 2013-01-12
15
248 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 

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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

These days socially coordinated efforts have turned into a critical requirement for enterprises.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
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…

739 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