By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,850 Members | 1,026 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,850 IT Pros & Developers. It's quick & easy.

submit button with image question

P: n/a
In the following code, I have 2 questions regarding submit button with image.

1) Does this code <input type="image" name="populate" src="populate.gif">
behave the same as an HTML submit button with image populate.gif?
When I click p1 or p2 button, it will post the page to process.asp.

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.src = "validate.gif"; doesn't work. But
InputForm.p1.value = "validate button"; is working for a regular HTML submit
button.

Any workarounds? Please advise. Thanks!!

<html>
<head>
<script type="text/javascript">
function cb_onClick()
{ if (InputForm.C1.checked == true) //NOT InputForm.C1.value == "on"
{
InputForm.p1.value = "validate button";
InputForm.p2.src = "validate.gif";
}
else
{
InputForm.p1.value = "populate button";
InputForm.p2.src = "populate.gif";
}
}
</script>
</head>
<body>
<form name="InputForm" method="POST" action="process.asp">
<p><input type="checkbox" name="C1" onClick="cb_onClick()"></p>
<p><input type="submit" name="p1" value="populate button">
<p><input type="image" name="p2" src="populate.gif">
</form>
</body>
</html>
Jul 23 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Matt wrote:
1) Does this code <input type="image" name="populate" src="populate.gif">
behave the same as an HTML submit button with image populate.gif?
Yes, just try it.
[...]
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.src = "validate.gif"; doesn't work. But
InputForm.p1.value = "validate button"; is working for a regular
HTML submit button.
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 HTMLInputElement and HTMLFormElement
objects as of DOM Level 1+, thus you are required to use DOM Level 1+
retrieval methods like document.getElementById() for references to
those element objects.
<html>
A DOCTYPE declaration prior to the root element is required for
Valid HTML. <http://validator.w3.org/>
<head>
<script type="text/javascript">
if (typeof document != "undefined")
{
if (document.getElementById)
{
function getElemById(s)
{
return document.getElementById(s);
}
}
else if (document.all)
{
function getElemById(s)
{
return document.all(s);
}
}
else
{
function getElemById()
{
return null;
}
}

if (document.getElementsByName)
{
function getElemByName(s, i)
{
var result = document.getElementsByName(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.getElementsByTagName)
{
function getElemByName(s, i)
{
var result = document.getElementsByTagName(s);
if (result && !isNaN(i) && i > -1)
{
result = result[i];
}
return result;
}
}
else if (document.all && document.all.tags)
{
function getElemByTagName(s, i)
{
var result = document.all.tags(s);
if (result && !isNaN(i) && i > -1)
{
result = result[i];
}
return result;
}
}
else
{
function getElemByTagName()
{
return null;
}
}
}
function cb_onClick()
You should pass a reference to the form to the method:

function cb_onClick(o)

{ if (InputForm.C1.checked == true) //NOT InputForm.C1.value == "on"
`checked' is a boolean property and repeated lookups are inefficient:

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

{
InputForm.p1.value = "validate button";
InputForm.p2.src = "validate.gif";
Replace the previous two lines with

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

} else
{
InputForm.p1.value = "populate button";
InputForm.p2.src = "populate.gif";
Replace the previous two lines with

o['p1'].value = "Populate";
if (p2)
{
p2.src = "populate.gif";
p2.alt = o['p1'].value;
}
}
}
</script>
</head>
<body>
<form name="InputForm" method="POST" action="process.asp">
Unless you have several forms in the document, this can be simplified:

<form action="process.asp" method="post">
<p><input type="checkbox" name="C1" onClick="cb_onClick()"></p>
Replace with

<p><input type="checkbox" name="C1" onClick="cb_onClick(this)"></p>
<p><input type="submit" name="p1" value="populate button">
The `value' attribute specifies the caption of the submit button.
Replace with

<p><input type="submit" name="p1" value="Populate">
<p><input type="image" name="p2" src="populate.gif">
An `alt' attribute is required for valid HTML. Replace with

<p><input type="image" name="p2" src="populate.gif" 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.gif" alt="Populate">
[...]


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
Jul 23 '05 #2

P: n/a
Thomas 'PointedEars' Lahn wrote:
[...]
if (document.getElementsByTagName)
{
function getElemByName(s, i)


Should be

function getElemByTagName(s, i)

of course.
PointedEars
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.