CODEWITHSUNDEEP
javascripthtmlcss
runeveryday
runeveryday

Reputation: 2799

why this code can't work under IE?

   $html .= '<div id="submit">  
 <input type="image" name="subscribe" onmouseover="this.src=\'images/1_hv.jpg\'" onmouseout="this.src=\'images/1.jpg\'"
src="images/1.jpg"
 value="'.$data["button"].'" onClick="return checkform();"></div>
<a id="cancel" href="'.getConfig("unsubscribeurl").'&id='.$id.'">'.$GLOBALS["strUnsubscribe"].'</a>
</form>
'.$GLOBALS["PoweredBy"];

why this input code can't work under IE? when i click the image under IE, it can't work. it can't submit the form. namely,it can't subscribe the newsletter.but ok under chrome and Firefox.

when i change it into 

     <input type="submit" name="subscribe" value="'.$data["button"].'" onClick="return     checkform();">

when under IE,firefox,chrome. all can work .

Upvotes: 0

Views: 190

Answers (1)

BalusC
BalusC

Reputation: 1109112

This is because you're abusing <input type="image"> to have a button with a background image. The <input type="image"> is intented as an image map where you'd be interested in the X and Y coordinates of the mouse pointer on the button. Those values are namely sent as request parameters.

In HTML/PHP terms, the

<input type="image" name="subscribe">

will be available as

$x = $_POST['subscribe.x']; // Contains X coordinate of mouse pointer on button.
$y = $_POST['subscribe.y']; // Contains Y coordinate of mouse pointer on button.

However, on modern browsers other than MSIE, also the "plain" name and value of the button is been sent along, probably with the intention to be more forgiving on poorly designed websites.

$subscribe = $_POST['subscribe']; // Contains "value" of button.

Relying on $_POST['subscribe'] in the server side explains why your form doesn't work on MSIE.

See also this extract of the w3 HTML spec:

17.4.1 Control types created with INPUT

...

image

Creates a graphical submit button. The value of the src attribute specifies the URI of the image that will decorate the button. For accessibility reasons, authors should provide alternate text for the image via the alt attribute.

When a pointing device is used to click on the image, the form is submitted and the click coordinates passed to the server. The x value is measured in pixels from the left of the image, and the y value in pixels from the top of the image. The submitted data includes name.x=x-value and name.y=y-value where "name" is the value of the name attribute, and x-value and y-value are the x and y coordinate values, respectively.

So, to fix your problem, you have 2 options:

  1. Check for presence of subscribe.x and/or subscribe.y request parameter instead to take action accordingly (not recommended).

  2. Don't abuse image input type with the sole purpose to have a background on the button, just use CSS (more recommended):

    <input type="submit" id="subscribe" name="subscribe">

    with

    #subscribe {
    border: 0;
    width: 100px; /* Let it match the actual image's dimensions. */
    height: 20px; /* Let it match the actual image's dimensions. */
    background-image: url('images/1.jpg');
}
#subscribe:hover {
    background-image: url('images/1_hv.jpg');
}

    Note that :hover pseudoselector doesn't work in IE6 on elements other than <a>, but I don't expect that you would care about this browser. If you do, then have a look in the JS corner for the solution.

Upvotes: 4

Related Questions