Getting Spring Web Flow to work with IE 7 forms

Question

This is a continuation of this question, refocused after some debugging on Spring Web Flow and the processing of events in Spring Web Flow.

I've got a problem with Spring Web Flow and Internet Explorer 7, and also IE 11 in "compatibility mode." I've verified this problem, I just don't know how to fix it.

I have a Web Flow form with multiple buttons on it which are all wired using a Javascript onclick() handler because they're all type='button' and not type='submit':

<button id="addCurrentAccount" name="_eventId_addCurrentAccount" type="button" value="addCurrentAccount" class="buttonActivity add">
    <span>Add Current Account</span>
</button>

This is what is supposed to happen: Depending on the button that is clicked, different Web Flow events are fired when the form is submitted. For example, a button marked "Delete Account" should fire an event named "_eventId_deleteAccount". A button marked "Create Account" should fire an event named "_eventId_createAccount".

This works on IE 8 through 11, Chrome and Firefox. However, on IE 7 and on IE 11 in "compatibility mode", every button on the page is submitted along with the form. This means that the form comes in with several "_eventId_xxx" request parameters, and since the first one is always "_eventId_createAccount", every button on the page creates another account on the form.

Is there a simple fix for this? (And, no, "don't use Web Flow" or "don't use IE 7" are not options, unfortunately.)

Answer 1

Try by specifying the eventId exclusively in javascript function as:

    function includeEvent(eventId){
        document.getElementById("yourForm")._eventId.value = eventId;
        document.getElementById("yourForm").submit();
    }

Include _eventId as hidden type:

    <input type="hidden" name="_eventId" value="Continue"/>
    <button id="addCurrentAccount" name="addCurrentAccount" type="button" value="addCurrentAccount" class="buttonActivity add" onclick="javascript:includeEvent('addCurrentAccount')">
        <span>Add Current Account</span>
    </button>

This way you can make sure that when user clicks on enter button a default "Continue" event is generated which you need to customize as to how to handle it. Based on each provided button click, respective event(see passing this as parameter to javascript function) is set by the javascript function mentioned.