Is there a way to add a 'Cancel' button next to the 'Submit' button? | XM Community
Solved

Is there a way to add a 'Cancel' button next to the 'Submit' button?

  • 24 January 2020
  • 6 replies
  • 241 views
MikeB
Rank
Userlevel 2
Badge +3
This is what my UX team wants:
!

The submit button is easy, but getting a cancel button seems impossible to me. I tried displaying the back button, but that didnt seem to work. This is being used in an intercept and to keep with our branding, they want to offer this cancel, which essentially does the same thing as the 'X' button at the top of the page, but they want it to be next to the submit button...why, i dont know.

But, has anyone done this in a survey before? Or have any ideas on how this could be done?

Thanks for your help.
-Mike
icon

Best answer by TomG 25 January 2020, 17:37

View original

6 replies

TomG
Rank
Userlevel 7
Badge +27
Use JS to insert a button before the submit button and add a click event handler to the new button that clicks the 'X' button.
MikeB
Rank
Userlevel 2
Badge +3
@TomG I will try this, thank you. Where would the JS be inserted? Can't the only places JS be used is in each question? Thank you. -Mike
TomG
Rank
Userlevel 7
Badge +27
> @MikeB said:
> @TomG I will try this, thank you. Where would the JS be inserted? Can't the only places JS be used is in each question? Thank you. -Mike

JavaScript can also be placed in the survey header or footer...place it inside a `<script>` tag.
MikeB
Rank
Userlevel 2
Badge +3
Ok, I am struggling to get this to work. The best I got was a button at the very bottom of the left corner. Nothing I did to specify where I wanted it seemed to work, so I just used body and that was the only one that actually displayed.
!

I am trying to put it in <div id="Buttons"..., but it isn't working.
<div id="Buttons" role="navigation"><input id="NextButton" class="NextButton Button" title="SUBMIT" type="button" name="NextButton" value="SUBMIT" data-runtime-disabled="runtime.Disabled" data-runtime-aria-label="runtime.ariaLabel" data-runtime-hide="runtime.Hide" page-id="P_1580394298296" aria-label="SUBMIT"></div>

This is exactly what I am looking for...i just added HTML to developer in the browser. added another input, changed the values.
!

I'm looking for any JS wizards that have done this in the past that I can leverage? This goes beyond my knowledge.

Thanks,
Mike
MikeB
Rank
Userlevel 2
Badge +3
!
TomG
Rank
Userlevel 7
Badge +27
You would add the button with JS using something like:
```
jQuery("#NextButton").before("...html for new cancel button goes here...");
```

Leave a Reply


Terms & Conditions