DS928
asked on
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">[/
ASKER
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">
use : $("input:image")
instead : $("button")
instead : $("button")
ASKER
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">
remove the onclick in your image button, yo already have it line 1
ASKER
Ok it sort of works. If I quickly click on it two or three times the listbox loads......sometimes. onClick removed from image button.
give the new link to your page
ASKER
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Puurfect! You are so good! I don't know why this works, (at this point) but I have learned a lot today! Thank you.
ASKER
The best, This person knows their stuff! And they don't beat you over your head!
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
evt.preventDefault() allow to break propagation of the submit event
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',' ','SearchB yPlace.jpg ',1)"
onMouseOut="MM_swapImgRest ore()"><im g src="Glass-Place.jpg" alt="Place"
align="middle" width="160" height="151" border="0"></a>
and do
$(".button").on("click",fu nction(e) {
e.preventDefauilt(); // here too
display( this.title );
});
<a href="#" class="button" title="Place"
onMouseOver="MM_swapImage(
onMouseOut="MM_swapImgRest
align="middle" width="160" height="151" border="0"></a>
and do
$(".button").on("click",fu
e.preventDefauilt(); // here too
display( this.title );
});
ASKER
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.
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.
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.
ASKER
Open in new window