IE8 and below <input type="image"> value work around

Question

Hi guys, I have a slight problem, I am trying to capture the input of two buttons, one yes, one no, into a database but for some reason the database doesn't always show the value of the button clicked, it just shows up blank.

<form  action="refer.php" method="post" id="formID" >
  <div class="prompt_container" style="float: left;">
    <span class="prompt_item"><input type="image" src="images/yes.jpg"
      alt="submit" value="yes" onclick="this.disabled=true,this.form.submit();"
      /></span>
    <input type="hidden" name="refer" value="yes">
  </div>
</form>

<form action="thank_you.php" method="post" id="formID" >
  <div class="prompt_container" style="float: right;">
    <span class="prompt_item"><input type="image" src="images/no.jpg"
      alt="submit" value="no" onclick="this.disabled=true,this.form.submit();"
      /></span>
    <input type="hidden" name="refer" value="no" >
  </div>
</form>

Here is the code that writes it all to the database

session_start();

$name = $_SESSION['name'];

$tel = $_SESSION['tel'];
$email = $_SESSION['email'];
$refer = $_POST['refer'];
$curDate = date("Y-m-d");

mysql_connect ("host", "user", "pass") or die ('Error: ' . mysql_error());
mysql_select_db ("database");

$query = "INSERT INTO Table (id, name, tel, email, refered, date)
  VALUES('NULL', '".$name."', '".$tel."', '".$email."', '".$refer."', '".$curDate."')";

mysql_query($query) or die (mysql_error()); 

Apparently anything lower than IE8 will ignore the value attribute of all <input type="image"> form inputs.

How could I get this to work properly in all browsers? jQuery or Javascript maybe?

Answer 1

Give the inputs different names check for the presence of name.x in the submitted data.

Answer 2

The problem is presumably that given a click at co-ordinates (1,2) on:

<input type="image" name="foo" value="bar"/>

IE will pass:

foo.x=1&foo.y=2

where other browsers will pass:

foo=bar&foo.x=1&foo.y=2

So to make image inputs work cross-browser you need to be sniffing for the existence of the name.x parameter and not merely name.

If you need to have two different image buttons, that means they will need to have two separate names instead of relying on different value​s that might not get parsed:

<input type="image" name="foo.bar"/>
<input type="image" name="foo.bof"/>

And then at the server side check for the existence of parameters foo.bar.x and foo.bof.x.

[edit re: edit]

<input type="image" value="yes"/>

This won't work. Without a name attribute, the image input isn't a successful control, so the value won't be passed, and co-ordinate data may not be passed either.

<input type="hidden" name="refer" value="yes">

Both hidden inputs will be submitted, regardless of which image is clicked. The successfulness of the image input doesn't affect the successfulness of any other hidden element.

$query = "INSERT INTO Table (id, name, tel, email, refered, date) VALUES('NULL', '".$name."', '".$tel."', '".$email."', '".$refer."', '".$curDate."')";

That's some pretty dangerous SQL injection there. You should make friends with mysql_real_escape_string or parameterised queries.

Answer 3

i noticed that you are disabling your inputs before you submit the form.

you cant do that, if you want to submit the values of those inputs. disabled inputs are not submitted.

what you need to do is copy the value to some hidden inputs first.