Menu
I have the following html in my webpage (simplified).
<button type="submit" name="action" value="ButtonA">Click Here</button>
In Firefox, it submits "ButtonA" as the value for the "action" form value. However, in IE7, it submits "Click Here". Is there any way to resolve this? I don't want to use input tags, because I need to be able to customize the text without affecting the values sent back to the form (localization). Basically, I want to be able to have multiple buttons with the same name, and depending on their value, do a different action when submitted. Is there any easy with to get IE to act correctly in this case?
[MORE]
Maybe I should be more clear, but I can't use
<input type="submit" name="Action" value="ButtonA">
because I need to be able to change the text displayed for localization rules, without affecting the actual value of the button that's submitted with the form.
[MORE]
To elaborate even more, Basically, I want the button to be able to say "Save" or "Sauver" depending on the language, but not have the value submitted to the server change. I also want to have multiple buttons with the same name, and depending on the value, do something, rather than depending on the button name, and testing if there is a value for that button. The code is already written from that perspective, and I just want to be able to change the displayed text in the values, without existing server side processing code.
Here is a link with a very good explanation of the problem, with some possible work arounds.
473
One solution is to use Javascript and a hidden field
<input type="hidden" name="actionparam" value="DoNothing">
<input type="button" onclick="OnSubmitForm('ActionA')" Value="Click Here for A" />
<input type="button" onclick="OnSubmitForm('ActionB')" Value="Click Here for B" />
function OnSubmitForm(actionname) {
var f = document.frm;
f.actionparam.value = actionname;
f.submit();
}
This works as a hidden CATPCHA also, and you can add some client validation in the javascript function
Since you say you want to degrade to non-javascript browsers, you can use this version, that allow only one default action to the people with no javascript
The extra buttons are disabled in HTML but then re-enabled with javascript.
Tested code:
<html>
<head>
<script type="text/javascript">
<!--
function OnSubmitForm(actionname) {
var f = document.frm;
f.actionparam.value = actionname;
f.submit();
}
//-->
</SCRIPT>
</head>
<body>
<noscript>
<div style="background-color: yellow; margin: 20px;" >
You are using a limited version of the site because you don't have Javascript enabled
</div>
</noscript>
<h1>form</h1>
<form name="frm" method="post">
<input type="hidden" name="actionparam" value="DefaultAction" />
<button name="defaultbutton" type="submit">default action</button>
<button name="extrabutton1" disabled onclick="OnSubmitForm('ExtraAction1')">Extra action 1</button>
<button name="extrabutton2" disabled onclick="OnSubmitForm('ExtraAction2')">Extra action 2</button>
</form>
<h1>Results</h1>
<h2>forms collection</h2>
<ol>
<%
For x = 1 To Request.Form.count()
Response.Write("<li>" + Request.Form.key(x) + "=" + Request.Form.item(x) + "</li>")
Next
%>
</ol>
<script type="text/javascript">
<!--
document.frm.extrabutton1.disabled = false;
document.frm.extrabutton2.disabled = false;
//-->
</SCRIPT>
</body>
</html>
The usual workaround to get it working with an input-submit is to munge the value into multiple 'name' attributes, eg.:
<input type="submit" name="submit.buttonA" value="Sausage" />
<input type="submit" name="submit.buttonB" value="Mash" />
The form layer I personally use will automatically convert that as if a 'submit' control with value 'buttonA' or 'buttonB' were clicked, but it should be easy to do manually in most environments.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
