index.html to jquery

Question

Hi!

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>

Answer 1

$("#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" />');

Answer 2

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:

1. the above all need to be enclosed by a $(document).ready(/*...*/) (or equivalent).
2. the onClick inline click-handler is no longer required if the above is used, and might actively complicate matters if it remains in place.

Answer 3

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>