Help getting multiple submit buttons working in Internet Exploder 6

rubyonrails-talk
1

Hi,

I using multiple submit buttons with a form and need to determine which button was used for the form submission back in the controller. This works fine in Firefox, but I can;t seem to get it to work with Internet Exploder .. ooops... Explorer.

Note: I'm using no Javascript and can't use and javascript (accessability reasons) so bog standard xhtml solution needed.

HTML (entire file):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; <html xmlns="http://www.w3.org/1999/xhtml&quot; xml:lang="en" lang="en"> <body>   <form action="http://192.168.0.2:3000/people/1/work&quot; method="post"><div style="margin:0;padding:0"><input name="_method" type="hidden" value="put" /></div>     <button type="submit" name="submitbutton" value="add_phone">Add Phone Number</button>     <button type="submit" name="submitbutton" value="save_all">Save</button> <p><label for="phone_number_external_number">Office</label> <input id="phone_numbers_1_external_number" name="phone_numbers[1][external_number]" size="30" type="text" value="1234" /></p> <p><label for="phone_number_external_number">Mobile</label> <input id="phone_numbers_2_external_number" name="phone_numbers[2][external_number]" size="30" type="text" value="5678" /></p> </form> </body> </html>

With Firefox I get the following parameters return to my controller: Press "Add Phone Number" button: - Parameters: {"phone_numbers"=>{"1"=>{"external_number"=>"1234"}, "2"=>{"external_number"=>"5678"}}, "_method"=>"put", "action"=>"update", "controller"=>"work", "person_id"=>"1", "submitbutton"=>"add_phone"} Press "Save" button: - Parameters: {"phone_numbers"=>{"1"=>{"external_number"=>"1234"}, "2"=>{"external_number"=>"5678"}}, "_method"=>"put", "action"=>"update", "controller"=>"work", "person_id"=>"1", "submitbutton"=>"save_all"}

So because the parameter "submitbutton" shows the value for pressed button it's easy to work out what to do.

However in Internet Explorer 6 I get the following result: Press "Add Phone Number" button: - Parameters: {"phone_numbers"=>{"1"=>{"external_number"=>"1234"}, "2"=>{"external_number"=>"5678"}}, "_method"=>"put", "action"=>"update", "controller"=>"work", "person_id"=>"1", "submitbutton"=>"Add Phone Number"} Press "Save" button: - Parameters: {"phone_numbers"=>{"1"=>{"external_number"=>"1234"}, "2"=>{"external_number"=>"5678"}}, "_method"=>"put", "action"=>"update", "controller"=>"work", "person_id"=>"1", "submitbutton"=>"Add Phone Number"}

Oh no ... it's the same value returned each time regardless of the button. It always returns the text of the first submit button, regardless of the button actually pressed. If you change the order of the buttons the new first buttons text will be returned. It doesn't even return the value, it returns the text, go figure.

I tried some other combinations:   <button type="submit" name="add_phone_button" value="add_phone">Add Phone Number</button>   <button type="submit" name="save_all_button" value="save_all">Save</button>

In firefox: - Parameters: {"phone_numbers"=>{"1"=>{"external_number"=>"1234"}, "2"=>{"external_number"=>"5678"}}, "_method"=>"put", "action"=>"update", "add_phone_button"=>"add_phone", "controller"=>"work", "person_id"=>"1"} The button that was pressed is included in the parameters, the button that was not pressed is not included in the parameters.

In Internet Explorer: - Parameters: {"save_all_button"=>"Save", "phone_numbers"=>{"1"=>{"external_number"=>"1234"}, "2"=>{"external_number"=>"5678"}}, "_method"=>"put", "action"=>"update", "add_phone_button"=>"Add Phone Number", "controller"=>"work", "person_id"=>"1"} Both buttons and there text are included in the parameters, so you can't tell which was pressed.

In Internet Explorer 7 it will return the title of button that was clicked (when both buttons are named the same). When the buttons are named different it only returns the button that was clicked. (So very much like FireFox)

So the question is, in Internet Explorer 6, how do I tell which submit button was pressed when a form has more than one submit button. I real;ise I could work around this with javascript, but I need this to work when javascript is disabled.

Cheers,

Anthony Richardson

2

Jeremy Woertink wrote:

wow..... hmm, well, go to ever computer that is going to use this app and hit it with a baseball bat, then leave a note that says buy a mac and hope no one catches you. Good luck!   

he he he ... I almost deleted by Windows Virtual Machine out of frustration. :slight_smile:

Maybe I can use a Internet Explorer exploit to download and install Firefox on the machine. :slight_smile:

3

Hi,

It seems if I change from using <button> tags to <input> tags IE6 updates the value correctly to match the button pressed.

e.g.     <input type="submit" name="submitbutton" value="Add Phone"> <input type="submit" name="submitbutton" value="Save All">

Return Parameter: - Parameters: {"phone_numbers"=>{"1"=>{"external_number"=>"1234"}, "2"=>{"external_number"=>"5678"}}, "_method"=>"put", "action"=>"update", "controller"=>"work", "person_id"=>"1", "submitbutton"=>"Save All"}

and with different names:     <input type="submit" name="submitbutton1" value="Add Phone"> <input type="submit" name="submitbutton2" value="Save All">

Return - Parameters: {"phone_numbers"=>{"1"=>{"external_number"=>"1234"}, "2"=>{"external_number"=>"5678"}}, "_method"=>"put", "action"=>"update", "controller"=>"work", "submitbutton2"=>"save_all", "person_id"=>"1"}

IE6 only returns the selected button.

Few, at least I can move forward. Just have to work within the less flexible constraints of the <input> tag over the more flexible <button>, damn. At least I can make it work for accessibility and use unobtrusive javascript to patch up the html client side if required for look/feel

Cheers,

Anthony Richardson