View Full Version : Button vs Clickable Image

06-17-2010, 05:30 PM
I have a "button" that calls formA, which in turns calls formB, all done through javascript. As a button:

<input type="button" value="Preview" onClick="popupform();">

works perfectly. Of course the user doesn't want some ugly standard button. They want this beautiful image to show instead (personally, I think the .gif they made looks like barf, but that's besides the point...sorry).

When I substitute

<input type="image" src="/preview/preview_button.gif" name-"preview" alt="Preview Your Item" border="0" onClick="popupform();">

everything works as it should, except the original form, the one that has the button/image on it, becomes a 404 Object not found.

The popupform() sets a bunch of cookies, and calls formB. FormB is a .php which reads the cookies and does some other stuff.

Not that it should matter, but I am running everything locally in Vista using the XAMPP Apache Friends Edition and going through localhost (because formB is a .php)

Thanks in advance.

06-17-2010, 05:43 PM
everything works as it should, except the original form, the one that has the button/image on it, becomes a 404 Object not found. Please post your complete code. And please be aware that the default onclick action of an element having type="image" is to submit its container form, where as an element with type="button" does nothing.

06-17-2010, 06:06 PM
I can only post certain snippets of the code, as I am modifying a vendor's proprietary page.

In the first form, in the <head>:

<script type="text/javascript">
function popupform()
var scrny = 0;
var scrnx = 200 ;
<!--[if gte IE 7]><!-->
scrny = 100 ;
<!--[if IE 6]><!-->
scrny = 100 ;
scrnx = 350 ;
var childName = document.MainForm.TEXTBOX___68___HOWLINGHOUSEPUZZLE_SM___28.value ;
var sIndex = document.MainForm.SELECT___HOWLINGHOUSEPUZZLE_SM___42.selectedIndex ;
var gender = document.MainForm.SELECT___HOWLINGHOUSEPUZZLE_SM___42.options[sIndex].text ;
var street = document.MainForm.TEXTBOX___77___HOWLINGHOUSEPUZZLE_SM___19.value ;
var city = document.MainForm.TEXTBOX___83___HOWLINGHOUSEPUZZLE_SM___35.value ;
var child1 = document.MainForm.TEXTBOX___73___HOWLINGHOUSEPUZZLE_SM___27.value ;
var child2 = document.MainForm.TEXTBOX___75___HOWLINGHOUSEPUZZLE_SM___29.value ;
var child3 = document.MainForm.TEXTBOX___78___HOWLINGHOUSEPUZZLE_SM___30.value ;
var pet = document.MainForm.TEXTBOX___89___HOWLINGHOUSEPUZZLE_SM___40.value ;

document.cookie = "child=" + encodeURIComponent(childName) ;
document.cookie = "gender=" + encodeURIComponent(gender) ;
document.cookie = "street=" + encodeURIComponent(street) ;
document.cookie = "city=" + encodeURIComponent(city) ;
document.cookie = "child1=" + encodeURIComponent(child1) ;
document.cookie = "child2=" + encodeURIComponent(child2) ;
document.cookie = "child3=" + encodeURIComponent(child3) ;
document.cookie = "pet=" + encodeURIComponent(pet) ;

var windowname='xxxHidden.html'
var myForm = 'join' ;
newWin = window.open(windowname, myForm,'height=600,width=550,scrollbars=yes,resizeable=no,toolbar=no,location=no');
newWin.moveTo(scrnx, scrny) ;
return true;

in "xxxHidden.html" (this is an intermediate form that does it's stuff,
calls xxxPreview.php, and goes away):

<script type="text/javascript">
function popupform()

var windowName = '' ;
var myForm = 'join' ;
var newWin = window.open('', windowname, 'height=600,width=550,scrollbars=yes,resizeable=no,toolbar=no,location=no');
adios.click() ;
return true;

function getCookies()
var cookieString=decodeURIComponent(document.cookie) ;
// did this cookie stuff as the vendor (whose form I am amending) also uses cookies.
var cookieArray = cookieString.split("; ") ;
var cookieAAry = new Array(cookieArray.length) ;
var arIndx ;
var arVal ;
var arEle ;
for (var ckyCt = 0; ckyCt < cookieArray.length; ckyCt++)
arEle = cookieArray[ckyCt] ;
arIndx = cookieArray[ckyCt].substring(0, arEle.indexOf("=")) ;
arVal = cookieArray[ckyCt].substring(arEle.indexOf("=") + 1, arEle.length) ;
cookieAAry[arIndx] = arVal ;

document.myForm.child.value = cookieAAry["child"] ;
document.myForm.cgender.value = cookieAAry["gender"] ;
document.myForm.street.value = cookieAAry["street"] ;
document.myForm.city.value = cookieAAry["city"] ;
document.myForm.child1.value = cookieAAry["child1"] ;
document.myForm.child2.value = cookieAAry["child2"] ;
document.myForm.child3.value = cookieAAry["child3"] ;
document.myForm.pet.value = cookieAAry["pet"] ;
document.myForm.adios.click() ;
<body onLoad="getCookies();">

<form method="post" name="myForm" action="xxxPreview.php">
<input type="text" name="child"><br />
<input type="text" name="cgender"><br />
<input type="text" name="street"><br />
<input type="text" name="city"><br />
<input type="text" name="child1"><br />
<input type="text" name="child2"><br />
<input type="text" name="child3"><br />
<input type="text" name="pet"><br />

<input name="adios" type="submit" value="Preview" onClick="popupform();">


"xxxPreview.php" simply gets the field values from $_POST and does some simple
processing mixing fixed text with the variable text coming from the original form. There are no problems here.

06-17-2010, 08:42 PM
Never mind....I solved it with another in-elegant work-around:

<a onClick=popupform('xx');" onMouseOver="this.style.cursor='pointer';"><img src="xxx.gif" name="preview" alt="Preview your item"></a>

Thanks for your time. I feel dumb answering my own questions! Sorry.

Old Pedant
06-17-2010, 08:58 PM
*PROBABLY* you could have fixed it more simply:

<input type="image" src="/preview/preview_button.gif" name-"preview"
alt="Preview Your Item" border="0" onClick="popupform(); return false;">

As abduraooft said, an <input type=image> acts as a SUBMIT button. If you don't do the return false from the onclick, then it *WILL* try to submit the <form> containing it. And that is probably what was causing the error.