#how to add confirmation

12 messages · Page 1 of 1 (latest)

soft tree
#

I have this form:

                <Form action={deleteCandidateAction} spaReset>
                  <input type="hidden" name="candidateIdFromList" value={candidate.id} />
                  <button type="submit" class="button-dark">Delete</button>
                </Form>

And I'd like to add a simple window.confirm here before executing the action, I've tried doing it in the action, but it doesn't work because it's server side and throws an error for the window object

export const useDeleteCandidateAction = routeAction$(
  ({candidateIdFromList}, requestEvent) => {
    const candidateId = candidateIdFromList as string || getDeepestCandidateId(requestEvent.params.all);
    deleteCandidate(candidateId!);
    return {
      success: true,
    };
  },
);

I've also tried something like this but it has a typescript error when calling the action:

const confirmDeleteCandidate = (action: ReturnType<typeof useDeleteCandidateAction>) => {
  if (window.confirm('Are you sure you want to delete this candidate?')) {
    return action();
  }
};

What's the general way to achieve this in qwik?

frail night
#

?

# 
import { component$,  $ } from '@builder.io/qwik';
import { Form, routeAction$ } from '@builder.io/qwik-city';

export const useDeleteCandidateAction = routeAction$(
  ({ candidateIdFromList }, requestEvent) => {
    const candidateId = 'test';
    console.log('deleteCandidat: ' + candidateId);
    return {
      success: true,
    };
  }
);

export default component$(() => {
  const deleteCandidateAction = useDeleteCandidateAction();

  const confirmDelete = $(function confirmDelete(event: {
    preventDefault: () => void;
  }) {
    if (!window.confirm('Are you sure you want to delete this candidate?')) {
      event.preventDefault();
      return false;
    }
    return true;
  });

  return (
    <>
      <Form
        action={deleteCandidateAction}
        spaReset>
        <input
          type='hidden'
          name='candidateIdFromList'
          value={'test'}
        />
        <button
          type='submit'
          class='button-dark'
          onClick$={(event) => confirmDelete(event)}>
          Delete
        </button>
      </Form>
    </>
  );
});
soft tree
#

@frail night yes, that's what I need, thanks!

frail night
lucid vapor
#

@frail night - May I inquire about your code so I can better understand a beginner concept? I am wondering why the confirmDelete function is wrapped in $() when it's already in a serialized component. Do we simply always wrap functions in $()?

frail night
dry iris
#

When I needed to do this I didn't want to bother too much about it so instead I named a button delete but instead of being the form action button it just opens a modal with a cancel button that just closes the modal and a confirm button which is actually the true submit button of the whole form lol

#

That way I don't need to bother too much about it, just hide the submit button

frail night
dry iris