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

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

  • January 24, 2020
  • 6 replies
  • 715 views
MikeB
Level 1 ●
Forum|alt.badge.img+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

Best answer by TomG

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.

6 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • Answer
  • January 25, 2020
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
    Level 1 ●
    Forum|alt.badge.img+3
    • MikeB
    • Author
    • Level 1 ●
    • January 29, 2020
    @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
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+27
    • TomG
    • Level 8 ●●●●●●●●
    • January 29, 2020
    > @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
    Level 1 ●
    Forum|alt.badge.img+3
    • MikeB
    • Author
    • Level 1 ●
    • January 30, 2020
    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
    Level 1 ●
    Forum|alt.badge.img+3
    • MikeB
    • Author
    • Level 1 ●
    • January 30, 2020
    !
    TomG
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+27
    • TomG
    • Level 8 ●●●●●●●●
    • January 30, 2020
    You would add the button with JS using something like: ``` jQuery("#NextButton").before("...html for new cancel button goes here..."); ```
      Terms & ConditionsAccessibility statement