Button tag in bloody Internet Explorer

Chris Doors March 10, 2006 Reply

Yes this is blooming annoying;
Here's what I did;

I pairred each button tag with a hidden input field in the following way:

<button onClick='buttonTagClicked(this.name)' type='Submit' name='something1~button'>Submit</button>
<input type=hidden id=something1 name=something1 value=0>';

<button onClick='buttonTagClicked(this.name)' type='Submit' name='something2~button'>Submit2</button>
<input type=hidden id=something2 name=something1 value=0>';

And wrote this javascript function:

<script language="JavaScript" type="text/javascript">

function buttonTagClicked(field)
{
var fieldsarray=field.split("~");

document.getElementById(fieldsarray[0]).value=1;
}
</script>

Then when the button is submited it updates the related hidden field to 1. You can then use the hidden field variables to find which button tag was pressed as it will have value of 1.

We should not have to do this but IE is obviously cr*p. Hope this helps

Peter Bengtsson March 10, 2006 Reply

That's a very complex solution. Is there a reason for this example that you haven't used any of the functionality of <button> tag over a <input type="submit" one?

Robert Polomsky March 25, 2006 Reply

Hmm, quite nice, Chris. I will try it.
I had another solution. Better code, but it redraw button for a moment between clicking and disappearing of old page. Maybe somebody could improve it.

function submitForm() {
var e = document.getElementById('btnAction0');
e.value = e.attributes['value'].value;
}

<form method="get" action="login.cgi" onsubmit="submitForm()">
<button type="submit" id="btnAction0" name="action" value="login">Login me</button>
</form>

( be sure you don't use function name: "submit()" )

Chris Doors May 17, 2006 Reply

I have cleaned up my code in previous example.

This is used if you have multiple button tags submitting the same form, so you can tell which button has submited form.

<form method="POST">
<input type=hidden id="submitbuttonpressedvalue" name="submitbuttonpressedvalue">

<button type="submit" onClick='buttonTagClicked(this.realvalue)' name='continuebutton' realvalue='continue'><img src="whatever.gif"></button>
<button type="submit" onClick='buttonTagClicked(this.realvalue)' name='backbutton' realvalue='back'><img src="whatever.gif"></button>
</form>
<script language="JavaScript" type="text/javascript">

function buttonTagClicked(buttonvalue)
{

document.getElementById('submitbuttonpressedvalue').value=buttonvalue;
}

</script>

Now in the post vars the realvalue of the button pressed should be in the
'submitbuttonpressedvalue' post var.

I think that's correct