473,396 Members | 2,154 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

submit button with image question

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
2 3473
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Nicolas Keller | last post by:
Hi! I'm used to have Mozilla for testing my PHP sites when I'm coding. The site's nearly finished, now I've made a test with the Internet Exlporer... guess what... failed. The problem: I'm...
3
by: Matt | last post by:
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...
4
by: Ice Man | last post by:
Hi all How Can I submit a form by clicking on an image instead of the submit button? Thanks
6
by: Adrian | last post by:
I need to have 2 submit buttons in one form calling the same page. I just need to know which was used. Being able to pass a hidden form input for each would be ideal. How can I do this?? ...
3
by: John Dunlop | last post by:
(Note crosspost and follow-ups to ciwah.) Nicolas Keller wrote in thread "Differences in form handling btw Mozilla and IE?": > The problem: I'm using a form that submit's (POST) its data via...
5
by: Steve JORDI | last post by:
Just a question using images as submit buttons and PHP4.4.4. It seems that my code correctly works in FireFox but not in IExplorer. For example, I have a FORM with 2 buttons called "search" and...
10
by: The Natural Philosopher | last post by:
I am coding up a bit of javascript stuff, and have managed to stumble my way through most of what I want.. But this one has got me stumped. I call submit() and get a javascript error 'Submit...
2
by: Mtek | last post by:
Hi, In the PHP form for my company, they use an image button to submit the form to some javascript for validation, then use the SUBMIT() to submit the form. The code is this: <TD...
7
by: Petr Vileta \(fidokomik\) | last post by:
I have a form with few text inputs. Every text input is followed by image type input. In this form I want to have 1 submit button on the top. A problem I want to resolve is: when user type...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.