Cancel button option on form?

Help Center Get Answers
1

I want to add a Cancel button to my forms (so users can change their minds and exit the form without saving anything they’ve changed). I searched for this topic and found a feature request from six years ago but as far as I can tell, it has not ever been implemented. This seems pretty basic so I think I must be missing something. Please tell me I’m missing something.

2

Hi @WilliamPorter,

I normally have my add or edit forms set as modal popups so the user can click X at the top to close. If you haven’t set the modal to not automatically close when clicked outside (requires JavaScript), the user can simply do that and it will close without saving.

I may be missing or misunderstanding something though :thinking:

3

Carl,

Thanks for the reply. No, I don’t think you’re missing anything.

But I have two responses.

First, I’ve had some little problems with modal dialogs in Knack as form pages: It seems to me that the original table page sometimes does not get updated immediately after the form is submitted and that modal window closed. I need to test this more carefully, though. Not sure what I’m seeing.

Second, yes, the close box will work, but not all users understand that. And more important, it’s valuable to have an explicit cancel option. An awful lot of stuff on the internet and in desktop apps too now saves records automatically. I start a message in my email app or Google documents, then simply close my browser — and the document I was working on is saved. So an explicit “Cancel” button (meaning “exit and save nothing”) is a clarifying option to have. I would note that Knack provides Cancel buttons itself in the builder. :slightly_smiling_face:

So I guess I should submit this as a feature request.

image
image582×600 12.2 KB

4

Re your first point, if you set the “Form Rules” to “Redirect to the parent page” instead of “Show a confirmation message”. This will close the form and then refresh the underlying table. If you just close a form that adds a record you will need to refresh the page to show the new entry.

I almost always change the rule from showing “Form successfully submitted” to redirect to parent.
You can see this on the below video which starts at 4min 40secs

5

Re your second point, I’m sure there is a coder that can provide you with a snippet of JavaScript so you can create a cancel button. I’m not a coder :blush:

6

I’m not a coder.

Heh, me, neither, not any more. :slightly_smiling_face:

Thanks for the excellent tips.

1 Like
7

I’m sure there is a coder that can provide you with a snippet of JavaScript so you can create a cancel button.

Here it is. You can customize on which forms the button appears by tweaking the first few lines.

// Add this to your Custom JavaScript

// Cancel Button
$(document).on('knack-view-render.form', function(event, view, data) {
  // Show the button on the following form types:
  const actions = ['create', 'update', 'insert']

  // Optional: Exclude specific forms
  const exclude = ['view_1', 'view_2']

  if (!actions.includes(view.action) || exclude.includes(view.key)) {
    return
  }

  const $submitBtn = $('#' + view.key + ' button[type="submit"]')
  const cancelBtn = '<button class="kn-button my-cancel">Cancel</button>'
  const added = $('#' + view.key + ' button.my-cancel').length !== 0

  if (!added) {
    // Avoid adding the button to the page twice
    $submitBtn.after(cancelBtn).css('margin-right', '0.75em')
  }

  const $cancelBtn = $('#' + view.key + ' button.my-cancel')

  $cancelBtn.on('click', function(e) {
    $cancelBtn.addClass('is-disabled is-loading')
    e.preventDefault()
    Knack.Navigation.redirectToParentPage()
  })
})
1 Like
8

THANK YOU, KnackPros!

I tried to send you a private message but apparently you’ve got that turned off. I wanted to know if there was any chance I could hire you for, oh, 20-30 minutes.

William

9

No worries :+1:

Sure. Feel free to schedule a call:

That’s strange about the Private Messages, hm.

10

Nice one Ian (@KnackPros) - I was hoping you’d know the answer :blush:

1 Like
11

It wasn’t the answer I wanted (I wish this were easier) but it’s AN answer and looks to be best available now, so I’ve marked this as the solution. Thanks again to Ian at KnackPros!

1 Like