input type=image and type=button behave differently

XML, Perl, Python, and other languages can be discussed here, even if it isn't PHP (We might forgive you).

Moderator: General Moderators

Post Reply
jpummill
Forum Newbie
Posts: 3
Joined: Thu Oct 28, 2004 3:01 pm

input type=image and type=button behave differently

Post by jpummill »

nigma | Help us, help you. Please use

Code: Select all

and

Code: Select all

tags where approriate when posting code. Read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url][/color]

I have a small test page that displays a text input field and then two buttons designed to pop up a javascript calendar.  

The first button is of type=image and the second one is of type=button.  If I click on the image button, the calendar pops up for an instant and then the form is submitted which is not the right behavior.  

when I click on the normal button, the calendar is displayed until I click a date.  The data is then placed in the text box.  I would like for the image button to work the same way.

I have tested this code under IE 6.0, and Firefox with the same results.

Thanks for any ideas?

I have included the code but not the javascript or image for the button.  If anyone is interested in that I can post it also.

CODE:

Code: Select all

<?PHP
echo "<HTML>\n";
echo "<HEAD>\n";
?>
<!--  Load Pop-up Calendar functions   - - - - - - - - - - - - - - - - - -->
<SCRIPT LANGUAGE='JavaScript' SRC="/javascript/popcalendar.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="/javascript/lw_layers.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="/javascript/lw_menu.js"></SCRIPT> 
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<form name="opportunityEnterForm" method="POST" action="popuptest.php">

<table cellspacing="2" cellpadding="2" border="0" width="100%">
	<tr valign="top" height="20">
		<td align="right"> <b> Technical Close Date :  </b> </td>
		<td> <input type="text" name="thisTech_close_dateField" size="10" maxlength="10" value="2005/01/01">  
                    <script language='javascript'>
                        if (!document.layers) {
                            <!--  DOESN'T WORK  -->
                            document.write("<input type=image  onclick='popUpCalendar(this, opportunityEnterForm.thisTech_close_dateField, "yyyy/mm/dd")' src='/images/buttons/cal_small.gif' align='absbottom' vspace='1'>")
                            <!--  THIS ONE WORKS  -->
                            document.write("<input type=button onclick='popUpCalendar(this, opportunityEnterForm.thisTech_close_dateField, "yyyy/mm/dd")' value='...' style='font-size:11px'>")
                        }
                    </script>					
                </td> 
	</tr>
</table>

<input type="submit" name="submitEnterOpportunityForm" value="Submit">
<input type="reset" name="resetForm" value="Clear Form">
</form>
nigma | Help us, help you. Please use

Code: Select all

and

Code: Select all

tags where approriate when posting code. Read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url][/color]
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

If you set an input butons type attribute to "image" it is going to submit the form by default. You could use CSS to make a regular form button have an image as it's background if you want.
jpummill
Forum Newbie
Posts: 3
Joined: Thu Oct 28, 2004 3:01 pm

Post by jpummill »

1) Thank you for the quick reply...

2) I will use PHP and CODE tags in the future. Sorry about that.

3) Where can I find an example on how to use CSS to change the background image of a regular form button? Can this be done for only one button on the page? And should I use inline CSS or a CSS file?

Thanks again for the help,
jpummill
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

Both the size of the image that'll be used as a background and the number of times the image will appear should effect your decision. If your image is pretty big and is going to appear on many of your sites pages i'd recommend using an external stylesheet so that viewer's browsers can cache the style. If the image is fairly small and is going to appear on only a few pages then using an inline style should suffice.

Check out this tutorial for a guide on how to work with css:
http://www.w3schools.com/css/css_intro.asp
jpummill
Forum Newbie
Posts: 3
Joined: Thu Oct 28, 2004 3:01 pm

Post by jpummill »

Thanks again for the helpful information.

I tested various methods of solveing the problem and finally settled on the following:

Code: Select all

document.write("<IMG src='/images/buttons/cal_small.gif' align='absbottom' vspace='1' onclick='popUpCalendar(this, opportunityEnterForm.thisTech_close_dateField, "yyyy/mm/dd")' >")
Post Reply