Multiple Submit Buttons on a Webform
I’ve spent a lot of time working with hook_form_alter() functions to modify forms, but the other day I was stumped by a simple problem. I needed to have two submit buttons on a form. By default, in the latest branch of Webform, you can change the text label on the default submit button for a webform. If you take a look at the screenshot on the right, you’ll see what my demo form looks like. The “Request More Information” button is the default submit button. The “Refer a Friend” button is the one I’m showing how to add via hook_form_alter().
Let’s talk about the reason for having a second submit button. The specification for the form showed two buttons. If the user clicks “Refer a Friend” the form will submit with an additional piece of information saying the user IS referring a friend. If the “Request More Information” button is clicked, the form will be submitted and the “referred by a friend” status will be “no.”
First, I created a hidden field called “Refer a Friend.” I setup a default value of “no” for this field. There aren’t any dependencies or logic built around this field, so I didn’t bother with 1 or 0, TRUE or FALSE. I want the confirmation email to either say “yes” or “no.”
Next, using hook_form_alter(), I injected an additional submit button. Here’s the code for that:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/** * Implementation of hook_form_alter(). */ function mymodule_form_alter(&$form, &$form_state, $form_id) { switch ($form_id) { case 'webform_client_form_36': $form['refer_friend_btn'] = array( '#type' => 'submit', // Text replaced with jQuery (see script.js); couldn't figure out // how to submit normally with a different #value other that of // the default submit button '#value' => t('Request More Information'), ); $form['#validate'][] = 'mymodule_get_started_form_validate'; break; } } |
So, if you read through that little bit of code you’ll see my comment about the submit button’s #value property. In order for the form to be processed “normally” as it would if the default submit button was clicked, I had to make the buttons have the same value. I spent a great deal of time trying to solve this, and for the project I was doing it simply wasn’t worth spending more time investigating. I’m kind of embarrassed to say that, but those are the facts!
Now, if I view the form at this point I will have two seemingly-identical buttons. We’re going to use jQuery to re-label the new one. The entire site requires jQuery to run, so I am not concerned with this implementation. Am I losing developer street cred yet? haha.
As of right now, nothing special will happen if you click the “Refer a Friend” button. The form will be submitted as normal. So, let’s add a validation handler to set the value of the hidden “Refer a Friend” element.
|
1 2 3 4 5 6 7 8 9 |
/** * Additional validation handler for the Get Started form. */ function mymodule_get_started_form_validate($form, &$form_state) { if ($form_state['clicked_button']['#post']['op'] == 'Refer A Friend') { // Set the value of the hidden Refer a Friend field $form_state['values']['submitted']['referafriend_value'] = 'yes'; } } |
Now all that is left is to change the text in the new button. Currently, it reads “Request More Info.” Using a little bit of jQuery, we can change this to “Refer a Friend.” This does not change the processing of the form. Webform ties a lot into which button is clicked, which is why the validation handler has some strange variable-checking in the conditional.
|
1 2 |
// See hook_form_alter in mymodule.module $("#webform-client-form-36 #edit-refer-friend-btn").attr('value', 'Refer A Friend'); |
Well, this example is kind of pathetic, but it works great. If you have a better solution, please provide me with a link or description of the solution. There is undoubtedly an exclusively-php solution for the “two submit buttons do the same thing” problem.