Change submit button text based on radio button choice [RESOLVED]

Get Help
, , , , ,
1

In my multi-page form (4 pages), I would like to change the text of my submit button from ‘submit’ to ‘submit and pay’ if the user selects (radio button) immediate payment on page 3.

Can someone put me on the right track?

Already found the following code and documentation:

But that is meant for using Stripe (which we don’t) and seems to be overcomplicated for what we try to achieve: just a change of button text based on a user’s choice.

2

You can do this by adding a custom JavaScript function that listens for changes to the radio button on page 3 and changes the text of the submit button accordingly. Here’s an example of how you can do this:

  1. Add a unique ID to the radio button that corresponds to the “immediate payment” option, for example: <input type="radio" id="immediate-payment">

  2. Add a unique ID to the submit button, for example: <input type="submit" id="submit-button">

  3. Add the following JavaScript code to your form page: This code will listen for changes to the radio button and update the text of the submit button if the “immediate payment” option is selected.

<script>
document.getElementById("immediate-payment").addEventListener("change", function() {
    if(this.checked) {
        document.getElementById("submit-button").value = "Submit and pay";
    } else {
        document.getElementById("submit-button").value = "Submit";
    }
});
</script>

Make sure to include this script on the form page. You can also consider adding it to a separate JavaScript file and including it via a script tag.

This is a simple example. You might also consider handling the case where the form is submitted before the user reaches page 3 or goes back to page 3 and changes their selection.

3

Thanks Faisal!

Where should I put this code?

Tried to put it in my functions.php and in a html-field on page 3, but none of the two worked out.

4

Hi Rut
You could use Simple Custom CSS and JS plugin to add this code.

Give it a try and let me know how that goes! :smile:

5

I tried another approach which does the job for me.

add_filter( 'gform_submit_button_1', 'conditional_submit_button_text', 10, 2 );
function conditional_submit_button_text( $button, $form ) {
  if ($_POST['input_45'] === 'Pay now') {
    return "<button class='button gform_button' id='gform_submit_button_1'><span>Submit and pay</span></button>";
  } 
  else {
    return $button;
  }
}

I think this will only work if the radio button field (45) is on another page than the submit button.

1 Like