submit button with image question

**Thomas 'PointedEars' Lahn** · Jul 23 '05, 11:51 AM

Re: submit button with image question

Matt wrote:[color=blue]
> 1) Does this code <input type="image" name="populate" src="populate.g if">
> behave the same as an HTML submit button with image populate.gif?[/color]

Yes, just try it.
[color=blue]
> [...]
> 2) When I check the checkbox, I want the image in submit button
> change from populate.gif to validate.gif. Unfortunately, the code
> InputForm.p2.sr c = "validate.g if"; doesn't work. But
> InputForm.p1.va lue = "validate button"; is working for a regular
> HTML submit button.[/color]

In DOM Level 0 as of IE/NS 3+, Input objects with type="image" have
been erroneously excluded from the `elements' collection of a Form
object (proper referencing would be
document.forms['InputForm'].elements['p2'].src). Unfortunately this
has not changed in browsers with HTMLInputElemen t and HTMLFormElement
objects as of DOM Level 1+, thus you are required to use DOM Level 1+
retrieval methods like document.getEle mentById() for references to
those element objects.
[color=blue]
> <html>[/color]

A DOCTYPE declaration prior to the root element is required for
Valid HTML. <http://validator.w3.or g/>
[color=blue]
> <head>
> <script type="text/javascript">[/color]

if (typeof document != "undefined" )
{
if (document.getEl ementById)
{
function getElemById(s)
{
return document.getEle mentById(s);
}
}
else if (document.all)
{
function getElemById(s)
{
return document.all(s) ;
}
}
else
{
function getElemById()
{
return null;
}
}

if (document.getEl ementsByName)
{
function getElemByName(s , i)
{
var result = document.getEle mentsByName(s);
if (result && !isNaN(i) && i > -1)
{
result = result[i];
}
return result;
}
}
else if (document.all)
{
function getElemByName(s , i)
{
var result = document.all(s) ;
if (result && !isNaN(i) && i > -1)
{
result = result[i];
}
return result;
}
}
else
{
function getElemByName()
{
return null;
}
}

if (document.getEl ementsByTagName )
{
function getElemByName(s , i)
{
var result = document.getEle mentsByTagName( s);
if (result && !isNaN(i) && i > -1)
{
result = result[i];
}
return result;
}
}
else if (document.all && document.all.ta gs)
{
function getElemByTagNam e(s, i)
{
var result = document.all.ta gs(s);
if (result && !isNaN(i) && i > -1)
{
result = result[i];
}
return result;
}
}
else
{
function getElemByTagNam e()
{
return null;
}
}
}
[color=blue]
> function cb_onClick()[/color]

You should pass a reference to the form to the method:

function cb_onClick(o)

[color=blue]
> { if (InputForm.C1.c hecked == true) //NOT InputForm.C1.va lue == "on"[/color]

`checked' is a boolean property and repeated lookups are inefficient:

{
if ((o = o.elements))
{
var p2 = getElemById("p2 ");
if (o['C1'].checked)

[color=blue]
> {
> InputForm.p1.va lue = "validate button";
> InputForm.p2.sr c = "validate.g if";[/color]

Replace the previous two lines with

o['p1'].value = "Validate";
if (p2)
{
p2.src = "validate.g if";
p2.alt = o['p1'].value;
}

}[color=blue]
> else
> {
> InputForm.p1.va lue = "populate button";
> InputForm.p2.sr c = "populate.g if";[/color]

Replace the previous two lines with

o['p1'].value = "Populate";
if (p2)
{
p2.src = "populate.g if";
p2.alt = o['p1'].value;
}
[color=blue]
> }
> }
> </script>
> </head>
> <body>
> <form name="InputForm " method="POST" action="process .asp">[/color]

Unless you have several forms in the document, this can be simplified:

<form action="process .asp" method="post">
[color=blue]
> <p><input type="checkbox" name="C1" onClick="cb_onC lick()"></p>[/color]

Replace with

<p><input type="checkbox" name="C1" onClick="cb_onC lick(this)"></p>
[color=blue]
> <p><input type="submit" name="p1" value="populate button">[/color]

The `value' attribute specifies the caption of the submit button.
Replace with

<p><input type="submit" name="p1" value="Populate ">
[color=blue]
> <p><input type="image" name="p2" src="populate.g if">[/color]

An `alt' attribute is required for valid HTML. Replace with

<p><input type="image" name="p2" src="populate.g if" alt="Populate">

Unless you have several input[type="image"] elements, you should use
the `id' attribute instead:

<p><input type="image" id="p2" src="populate.g if" alt="Populate">
[color=blue]
> [...][/color]

BTW: You should not use tab characters to indent code as display of
them differs on different devices. Use two and/or four spaces instead.

HTH

PointedEars

**Thomas 'PointedEars' Lahn** · Jul 23 '05, 11:51 AM

Re: submit button with image question

Thomas 'PointedEars' Lahn wrote:[color=blue]
> [...]
> if (document.getEl ementsByTagName )
> {
> function getElemByName(s , i)[/color]

Should be

function getElemByTagNam e(s, i)

of course.

PointedEars

submit button with image question

submit button with image question

Comment

Comment