Different form actions based on select change events

2.9k views Asked by At

I'm using Apache BeeHive. My JSP contains a form (<netui:form>) with a dropdown box (<netui:select>) and a submit button (<netui:button>). When the submit button is pressed, the form's default action ("doAction1) will be submitted. I want a different action ("doAction2") to be submitted when an option is selected from the dropdown. (See Figure 1).

My first inclination was to create a JavaScript function that changes the form's action attribute to the new action name and then submits the form (see Figure 2), but this didn't work. I found out that the tag translates "doAction1" to a full URL like http://localhost:7001/app/doAction1.do.

The "doAction2" string that I pass to the JavaScript submitForm(form, newAction) method can't convert "doAction2" to an appropriate URL (well it could, but only in a kludgey way). I went looking for a netui tag that could convert a plain action name into a URL, but I couldn't find one.

So, what's the right way to accomplish this?

Figure 1 - JSP code snippet

<netui:form action="doAction1" method="post">
    <netui:select dataSource="actionForm.field1"
                  optionsDataSource="${actionForm.field1Selections}"
                  onChange="submitForm(this.form, 'doAction2')"/>

    <p/>
    <netui:button>Submit</netui:button>
</netui:form>

Figure 2 - JavaScript function to change the form action and submit the form

<netui:scriptBlock placement="before">

    function submitForm(form, newAction) {
        form.action = newAction;
        form.submit();              
    }

</netui:scriptBlock>
1

There are 1 answers

0
JB Nizet On
function submitForm(form, newAction) {
    form.action = newAction + ".do";
    form.submit();                  
}

or

<c:url var="newActionUrl" value="/the/path/to/the/action/doAction2.do"/>

<netui:select dataSource="actionForm.field1"
              optionsDataSource="${actionForm.field1Selections}"
              onChange="submitForm(this.form, '${newActionUrl}')"/>