Load and display an image.

[bruce]

Why doesn't this work? When I execute the "onClick" event, the image
appears briefly, then goes away.

I'm trying to develop a page where I can change the image being
displayed.

<script type='text/javascript'>

function getImage() {
var image = "images/MtRushmore.JPG" ;
document.getElementById('imgSpot').src=image;
}

</script>
<form name="form1" id="form1" method="post" action="">
<img id='imgSpot' name='imgSpot' src="" height="200" width="200"/>
<br ? />
<input name="Submit" type="submit" onclick="getImage()"
value="Submit" />
</form>

Thanks for the help

 

[johncoltrane]

Le 29/05/10 05:58, bruce a écrit :

Why doesn't this work? When I execute the "onClick" event, the image
appears briefly, then goes away.

I'm trying to develop a page where I can change the image being
displayed.

<script type='text/javascript'>

function getImage() {
var image = "images/MtRushmore.JPG" ;
document.getElementById('imgSpot').src=image;
}

</script>
<form name="form1" id="form1" method="post" action="">
<img id='imgSpot' name='imgSpot' src="" height="200" width="200"/>
<br ? />
<input name="Submit" type="submit" onclick="getImage()"
value="Submit" />
</form>

Thanks for the help

You need to prevent the default behavior of your form's Submit button:

<form name="form1" id="form1" method="post" action="">
<img id="imgSpot" name="imgSpot" src="" height="200" width="200">
<br>
<input name="Submit"
type="submit"
onclick="getImage();return false;" // here
value="Submit">
</form>

Also you may try to be more coherent with your quotes. Mixing simple
quotes '' and double quotes "" is not that dangerous AFAIK but it's
considered messy by a lot of people.

There is a curious interrogation point in your BR.

 

[johncoltrane]

Le 29/05/10 05:58, bruce a écrit :

Why doesn't this work? When I execute the "onClick" event, the image
appears briefly, then goes away.

I'm trying to develop a page where I can change the image being
displayed.

<script type='text/javascript'>

function getImage() {
var image = "images/MtRushmore.JPG" ;
document.getElementById('imgSpot').src=image;
}

</script>
<form name="form1" id="form1" method="post" action="">
<img id='imgSpot' name='imgSpot' src="" height="200" width="200"/>
<br ? />
<input name="Submit" type="submit" onclick="getImage()"
value="Submit" />
</form>

Thanks for the help

You need to prevent the default behavior of your form's Submit button:

<form name="form1" id="form1" method="post" action="">
<img id="imgSpot" name="imgSpot" src="" height="200" width="200">
<br>
<input name="Submit"
type="submit"
onclick="getImage();return false;" // here
value="Submit">
</form>

Also you may try to be more coherent with your quotes. Mixing simple
quotes '' and double quotes "" is not that dangerous AFAIK but it's
considered messy by a lot of people.

There is a curious interrogation point in your BR.

 

[Garrett Smith]

Why doesn't this work? When I execute the "onClick" event, the image
appears briefly, then goes away.

Giving the form an empty action causes the current location to be used,
provided you have no BASE element in your document. When the form is
submitted to the same page, it appears that the page has reloaded.

Instead of submitting a form to swap the image, you may instead want to
use a link.

<a onclick="getImage(this.href)" href="images/MtRushmore.JPG">Get Image</a>

function getImage() {
var image = "images/MtRushmore.JPG" ;
document.getElementById('imgSpot').src=image;
}

[...]

</script>
<form name="form1" id="form1" method="post" action="">
<img id='imgSpot' name='imgSpot' src="" height="200" width="200"/>
<br ? />

Interesting. I've not seen that one before.

Spaces come across better than tabs; tabs don't have a set width. They
may even be displayed as zero width, making the code harder to understand.

Garrett

 

[Garrett Smith]

Giving the form an empty action causes the current location to be used,
provided you have no BASE element in your document. When the form is
submitted to the same page, it appears that the page has reloaded.

Instead of submitting a form to swap the image, you may instead want to
use a link.

<a onclick="getImage(this.href)" href="images/MtRushmore.JPG">Get Image</a>

Make that <a onclick="getImage(this.href); return false;"

- return false will prevent the default action. That will work for the
submit button as well.

Garrett

 

[SAM]

Le 5/29/10 5:58 AM, bruce a écrit :

Why doesn't this work? When I execute the "onClick" event, the image
appears briefly, then goes away.

because you don't avoid the submitting and the form's action fires
(here that will refresh same displayed page)

<input type="submit" onclick="return false">
or, much better :

I'm trying to develop a page where I can change the image being
displayed.

<script type='text/javascript'>

function getImage() {
var image = "images/MtRushmore.JPG" ;
document.getElementById('imgSpot').src=image;
}

</script>
<form name="form1" id="form1" method="post" action="">
<img id='imgSpot' name='imgSpot' src="" height="200" width="200"/>

tags auto-closing only if Xhtml (the '/' in end of tag)
size is optional
attribute 'alt' omitted
'name' for 'img' can be admitted
(depends of the doctype, not allowed in Xhtml not "transitional")

<br ? />

no '?'

<input name="Submit" type="submit" onclick="getImage()"
value="Submit" />

'name' has not to be set if you don't need to use that element in JS or
server-side.
'value' may be omitted
preferable to use the form's JS method/function 'onsubmit'

</form>

Thanks for the help

Examples :

1) (html) :
===========

<script type='text/javascript'>

function getImage(imageContainer) {
var image = "images/MtRushmore.JPG" ;
imageContainer['imgSpot'].src = image;
imageContainer.style.display = 'none';
return false;
}

</script>
<form action="" onsubmit="return getImage(this)">
<div>
<img name='imgSpot' src="" alt="the image" title="">
<br />
<input type="submit" value="Show image">
</div>
</form>



2) (xhtml) : (expecting that script is in the head)
============

<script type='text/javascript'>

function getImage(theLink) {
var image = theLink.href;
document.getElementById('imgSpot').src = image;
theLink.style.display = 'none';
return false;
}

</script>

<p>
<a href="images/MtRushmore.JPG" onclick="return getImage(this)">
show image
</a><br />
<img id="imgSpot" src="#" alt="the image" title="" />
</p>


3) (html) :
===========

<script type='text/javascript'>

function getImage(theLink) {
var image = theLink.href;
document.images['imgSpot'].src = image;
theLink.style.display = 'none';
return false;
}

</script>

<p>
<a href="images/MtRushmore.JPG" onclick="return getImage(this)">
show image
</a><br />
<img name="imgSpot" src="#" alt="the image" title="">

.... closing tag for 'p' is optional (except in Xhtml)


info (alt and title in img tag) :
=================================
The alt attribute must be set (even if it is empty)
The empty attribute 'title' avoid the bull-info with the 'alt' content
(even with IE),
that title may get another content than the alt,
the bull-info will show the title content then (even with IE).
The alt attribute is to show a text of replacement if the image's file
doesn't exists, or at a wrong address (IE is wrong showing that in a
bull-info)

 

[Thomas 'PointedEars' Lahn]

bruce a écrit :


You need to prevent the default behavior of your form's Submit button:

<form name="form1" id="form1" method="post" action="">
<img id="imgSpot" name="imgSpot" src="" height="200" width="200">
<br>
<input name="Submit"
type="submit"
onclick="getImage();return false;" // here
value="Submit">
</form>

No.

1. Never name a form control "submit", that overrides the built-in submit()
method of the form.

2. Cancel the `submit' event of the form, not the `click' event of the
submit button. You never know how the user is going to submit the form.

3. For this to work, the form does not need a name and ID, and the image
does not need an ID. The form "knows itself" by `this' in the event
handler attribute, and the image can be accessed through the
`document.images[...]' collection.

The proper way to do this is of course

<form action="" method="post"
onsubmit="getImage('imgSpot'); return false;">
<img name="imgSpot" src="" height="200" width="200"
alt="alternative text">
<br>
<input type="submit" name="submit_button" value="Submit">
</form>

or not to use a form at all. The form(er) approach can be made accessible,
though (by use of an iframe and the `target' attribute), the latter is
less user-friendly (navigation to an image).

You would want to change the required `alt' attribute according to the image
selected, by assigning to the image object's `alt' property.


PointedEars

 

[bruce]

bruce a écrit :

You need to prevent the default behavior of your form's Submit button:

<form name="form1" id="form1" method="post" action="">
   <img id="imgSpot" name="imgSpot" src="" height="200" width="200">
   <br>
   <input name="Submit"
          type="submit"
          onclick="getImage();return false;" // here
          value="Submit">
</form>

No.

1. Never name a form control "submit", that overrides the built-in submit()
   method of the form.

2. Cancel the `submit' event of the form, not the `click' event of the
   submit button.  You never know how the user is going to submit the form.

3. For this to work, the form does not need a name and ID, and the image
   does not need an ID.  The form "knows itself" by `this' in the event
   handler attribute, and the image can be accessed through the
   `document.images[...]' collection.

The proper way to do this is of course

  <form action="" method="post"
        onsubmit="getImage('imgSpot'); return false;">
    <img name="imgSpot" src="" height="200" width="200"
         alt="alternative text">
    <br>
    <input type="submit" name="submit_button" value="Submit">
  </form>

or not to use a form at all.  The form(er) approach can be made accessible,
though (by use of an iframe and the `target' attribute), the latter is
less user-friendly (navigation to an image).

You would want to change the required `alt' attribute according to the image
selected, by assigning to the image object's `alt' property.

PointedEars
--
    realism:    HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness:    XHTML 1.1 as application/xhtml+xml
                                                    -- Bjoern Hoehrmann

Thanks to all for the responses. These suggestions will solve my
problem.

A brief apology. The sample code was indeed sloppy. Next time I'll try
to be more careful.

The <br ?/> was a typo. Should have been <br />...

Thanks again for the great examples...

Bruce

 

[bruce]

bruce a écrit :

You need to prevent the default behavior of your form's Submit button:

<form name="form1" id="form1" method="post" action="">
   <img id="imgSpot" name="imgSpot" src="" height="200" width="200">
   <br>
   <input name="Submit"
          type="submit"
          onclick="getImage();return false;" // here
          value="Submit">
</form>

No.

1. Never name a form control "submit", that overrides the built-in submit()
   method of the form.

2. Cancel the `submit' event of the form, not the `click' event of the
   submit button.  You never know how the user is going to submit the form.

3. For this to work, the form does not need a name and ID, and the image
   does not need an ID.  The form "knows itself" by `this' in the event
   handler attribute, and the image can be accessed through the
   `document.images[...]' collection.

The proper way to do this is of course

  <form action="" method="post"
        onsubmit="getImage('imgSpot'); return false;">
    <img name="imgSpot" src="" height="200" width="200"
         alt="alternative text">
    <br>
    <input type="submit" name="submit_button" value="Submit">
  </form>

or not to use a form at all.  The form(er) approach can be made accessible,
though (by use of an iframe and the `target' attribute), the latter is
less user-friendly (navigation to an image).

You would want to change the required `alt' attribute according to the image
selected, by assigning to the image object's `alt' property.

PointedEars
--
    realism:    HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness:    XHTML 1.1 as application/xhtml+xml
                                                    -- Bjoern Hoehrmann

I'm using a form because the actual image I want to display is on the
server. I plan to send a POST request, using AJAX, to get the image as
well as some other data. Thoughts on this approach?

Thanks...

 

[Thomas 'PointedEars' Lahn]

The proper way to do this is of course

<form action="" method="post"
onsubmit="getImage('imgSpot'); return false;">
<img name="imgSpot" src="" height="200" width="200"
alt="alternative text">
<br>
<input type="submit" name="submit_button" value="Submit">
</form>

or not to use a form at all. The form(er) approach can be made
accessible, though (by use of an iframe and the `target' attribute), the
latter is less user-friendly (navigation to an image).
[...]

I'm using a form because the actual image I want to display is on the
server. I plan to send a POST request, using AJAX, to get the image as
well as some other data. Thoughts on this approach?

AISB, you will need one or two fallback solutions (but you can use basically
the same markup for them). Neither XHR/AJAX nor client-side scripting may
be supported. A first step would be to return `false' only if retrieving
the image with scripting failed, so that the default action (the form
submit) is not prevented then.

Please trim your quotes to the relevant minimum, do not quote signatures
unless you are referring to them.

<http://jibbering.com/faq/#posting>


PointedEars

 

[SAM]

Le 5/29/10 6:14 PM, bruce a écrit :

I'm using a form because the actual image I want to display is on the
server. I plan to send a POST request, using AJAX, to get the image as
well as some other data. Thoughts on this approach?

Not sure that Ajax needs absolutely to be activated by a form submission.

The function that will send the request via Ajax ways can "post" by itself.
.../...
httpRequest.open('POST', url, true);
.../...

Using the form solution permits to send easily the request in "normal"
way if the Ajax fails (javascript disabled for instance), if you need to
send too some more data as name of visitor, a date, or anything else
requested by visitor.
If no visitor's info are needed, a simple link may do the job
(but not in post method).

<form action="emergencyWay.php" method="post" onsubmit="return myAjax()">

<a href="emergencyWay.php?image=tutu.jpg&text=file.htm" onclick="return
myAjax()">

in both solutions myAjax() in case of :
- success will have to return false
- failure will have to return true

<https://developer.mozilla.org/en/AJAX/Getting_Started>
(in several languages)

 

[Thomas 'PointedEars' Lahn]

AISB, you will need one or two fallback solutions (but you can use
basically the same markup for them). Neither XHR/AJAX nor client-side
scripting may be supported. A first step would be to return `false' only
if retrieving the image with scripting failed,

^^^^^^
I meant _succeeded_, sorry.

so that the default action (the form submit) is not prevented then.

Strike through the "not", then.


PointedEars

 

[bruce]

The proper way to do this is of course

  <form action="" method="post"
        onsubmit="getImage('imgSpot'); return false;">
    <img name="imgSpot" src="" height="200" width="200"
         alt="alternative text">
    <br>
    <input type="submit" name="submit_button" value="Submit">
  </form>

This did exactly what I wanted to do. I did have to add "id" to the
<img tag so that "getElementById" would work.

Thanks...

Bruce

 

[Thomas 'PointedEars' Lahn]

onsubmit="return getImage('imgSpot');">

whereas getImage() would return `false' if retrieving the image with
scripting would be (supposed to be) successful.

This did exactly what I wanted to do. I did have to add "id" to the
<img tag so that "getElementById" would work.

AISB, you can lose the `id' attribute if you use document.images[...]
instead of document.getElementById(...).

Thanks...

You're welcome.


PointedEars