Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 253
  • Last Modified:

Change from a Button to an Image

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
DS928
Asked:
DS928
  • 8
  • 5
  • 2
1 Solution
 
DS928Author Commented:
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
 
DS928Author Commented:
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
 
leakim971PluritechnicianCommented:
use : $("input:image")
instead : $("button")
0
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.

 
DS928Author Commented:
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
 
leakim971PluritechnicianCommented:
remove the onclick in your image button, yo already have it line 1
0
 
DS928Author Commented:
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
 
leakim971PluritechnicianCommented:
give the new link to your page
0
 
DS928Author Commented:
Here is the direct link.

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

Thank you.
0
 
leakim971PluritechnicianCommented:
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
 
DS928Author Commented:
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
 
DS928Author Commented:
The best, This person knows their stuff!  And they don't beat you over your head!
0
 
leakim971PluritechnicianCommented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
DS928Author Commented:
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
 
Michel PlungjanIT ExpertCommented:
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

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 8
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now