Why IE8 no likey, but chrm saf f-fox can handle my form submit w image?

[ThisisForReal]

I hope this is a super easy question for some of you and perhaps one might be so bold as to enlighten me.  Ridicule me if you must, but I'll take that if it comes with an answer. :-)

 

I have created some basic registration and log in pages.  To spruce up the forms, I modified the form submit button to an image file, rather than the old gray box.  Chrome is fine with it.  Firefox has no problems.  Safari gets positive reviews.  Of course IE is giving me trouble.  Can someone spot why that is?

 

Here's the code where IE can pass the variables to my php script correctly:

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <fieldset>
      <legend>It's that easy!</legend>
      <table border="0">
      <tr><td><label for="email">Email:</label></td>
      <td><input type="text" id="email" name="email" value="<?php if (!empty($email)) echo $email; ?>" /></td></tr>
      <tr><td><label for="firstName">First Name:</label></td>
      <td><input type="text" id="firstName" name="firstName" value="<?php if (!empty($firstName)) echo $firstName; ?>" /></td></tr>
      <tr><td><label for="lastName">Last Name:</label></td>
      <td><input type="text" id="lastName" name="lastName" value="<?php if (!empty($lastName)) echo $lastName; ?>" /></td></tr>
      <tr><td><label for="password1">Password:</label></td>
      <td><input type="password" id="password1" name="password1" /></td></tr>
      <tr><td><label for="password2">Password (retype):</label></td>
      <td><input type="password" id="password2" name="password2" /></td></tr></table>
    </fieldset>
    <input type="submit" value="Sign Up" name="submit"/>
  </form>

 

All 4 browsers pass that test.  However, only 3 can pass the following (to save time, just look at the last line, it the only thing that's different):

 

 <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <fieldset>
      <legend>It's that easy!</legend>
      <table border="0">
      <tr><td><label for="email">Email:</label></td>
      <td><input type="text" id="email" name="email" value="<?php if (!empty($email)) echo $email; ?>" /></td></tr>
      <tr><td><label for="firstName">First Name:</label></td>
      <td><input type="text" id="firstName" name="firstName" value="<?php if (!empty($firstName)) echo $firstName; ?>" /></td></tr>
      <tr><td><label for="lastName">Last Name:</label></td>
      <td><input type="text" id="lastName" name="lastName" value="<?php if (!empty($lastName)) echo $lastName; ?>" /></td></tr>
      <tr><td><label for="password1">Password:</label></td>
      <td><input type="password" id="password1" name="password1" /></td></tr>
      <tr><td><label for="password2">Password (retype):</label></td>
      <td><input type="password" id="password2" name="password2" /></td></tr></table>
    </fieldset>
    <input type="image" value="Sign Up" name="submit" src="images/signup_submit.gif"/>
  </form>

 

I've googled around for an answer but I kept getting solutions to vastly trickier issues.  Thanks in advance!

[Psycho]

This doesn't look to be a PHP problem. Moving to the HTML forum.

 

What errors/problems are you experiencing?

 

What does the rendered HTML look like? The browser doesn't care about what PHP code is processed on the server - only the final output. Could be something in the values you are echoing to the page.

 

Also, the code you have to echo the values is overcomplicated:

if (!empty($lastName)) echo $lastName;

 

That is basically saying - if the value is not empty echo it to the page. So, if the value is empty then it echos nothing, right? So, there is no need for the if statement. Just use:

echo $lastName;

and you will get the same results with less complexity.

[ThisisForReal]

On the first set of code - with a standard submit button, the variables are sent off, php adds the person to the mySQL database, and everyone is happy.

 

On the second set of code - and only when using IE8, the page refreshes (note the action="<?php echo $_SERVER['PHP_SELF']; ?>") but the data is not being added to the database.  The only difference between the two pages is that final bit of form code:

 

<input type="image" value="Sign Up" name="submit" src="images/signup_submit.gif"/>

 

Why does IE not like that code when using an image file to replace the standard submit button?

[PFMaBiSmAd]

The HTML specification states that only the x,y coordinates where an image has been clicked are to be submitted. Therefore, you must use either $_POST["submit_x"] or $_POST["submit_y"] in your form processing code to determine that your form was submitted.

 

You can also use a hidden form field (with any name/value) or put a GET parameter on the end of the URL that you then use in your form processing code to detect that your form was submitted.

 

Ref: http://us3.php.net/manual/en/faq.html.php#faq.html.form-image

[gwolgamott]

You could also create a class for the button using CSS. Here's a working class, I didn't investigate this for everything but could do a detect ie8 and use this if it is.

.btnExample {
color: #000033;
background-image:url('images/900_bar.GIF');
background-color: #99CCFF;
border: 1px solid #336699;
font-weight: bold;
margin: 4px 0px;
}

<!-- <input type="submit" name="searchN" value="Search Name" /> -->
			<button class="btnExample" type="submit" value="Search Name">Search Name</button>

[ThisisForReal]

Mmmm, after many attempts at isolating variables and further diagnosis, it appears to be a PHP error somewhere else on the page.  I reconstructed a blank page with just the form, had it action itself and used the image in lieu of the gray submit box and got it to catch all the data I needed.  So, I bow to Gibby but therein was not the answer I was looking for...

 

Marking as problem solved.

[gwolgamott]

Well at least I got a bow, even if I didn't deserve it.