How do I write this in jquery? I want to display a image 600x400 inside the div block on click?
<script>
function displayImage() {
document.getElementById("demo").innerhtml ="image.jpg";
}
</script>
<form>
<input type="submit" onClick="displayImage()">
</form>
<div id="demo">
</div>
$("#demo").html("image.jpg");
However, "image.jpg" is not HTML. So you should just use:
$("#demo").text("image.jpg");
If you are trying to add an image to the div, use:
$("#demo").html('<img src="image.jpg" />');
$(".SomeClass").append('<img src="image.jpg" />'); Or something like that. You selector and data you are appending would need to change.
Assuming you want only the image to be displayed within the #demo (and also assuming you want this to happen on form submission):
$('form').submit(
function() {
$('#demo').html('<img src="path/to/image.jpg" />');
return false;
}
);
If, instead, you want to add an image to the #demo (though still assuming this is on form submit):
$('form').submit(
function() {
$('<img src="path/to/image.jpg" />').appendTo('#demo');
return false;
}
);
Just a quick note, but it seemed worth mentioning:
$(document).ready(/*...*/) (or equivalent).onClick inline click-handler is no longer required if the above is used, and might actively complicate matters if it remains in place.assuming you want the image to be displayed... change your html to look like so:
<input type="submit" id="SubmitButtonId" />
<img id="demo" src="someimage.jpg" />
and your javascript to:
<script>
$(function(){
$('#SubmitButtonId').live('click', function(){
$('#demo').src('image.jpg');
});
});
</script>
<script>tag.