How to confirm before sending a form using Javascript (for both sending and confirming)

Question

I want Javascript to confirm form submission and then submit if a user clicks OK using a checkbox. This is what i tried earlier

<td>
                                    <form action="/medications/{{ $medication->id }}" method="POST">
                                        @method('PATCH')
                                        @csrf
                                        <label class="checkbox" for="completed">
                                            <input type="checkbox" name="completed" id="cbox" onChange="onCbChange('cbox'), this.form.submit()" {{ $medication->completed ? 'checked' : ''}}>
                                            <script>
                                                function onCbChange(cb) { var b = document.getElementById(cb).checked;

                                                var confirmBox = confirm("Proceed to complete treatment?");

                                                if (confirmBox == true) {
                                                    if (b) {
                                                        document.getElementById(cb).checked = true;
                                                    } else {
                                                        document.getElementById(cb).checked = false;
                                                    }
                                                } else {

                                                    document.getElementById(cb).checked = !b;
                                                };
                                                }
                                            </script>
                                        </label></td>
                                    </form>
                                </td>

Possible duplicate of html Form validation in js

Ashutosh
– Ashutosh

2019-02-20 14:12:15 +00:00
Commented Feb 20, 2019 at 14:12 — Ashutosh
– Ashutosh, Commented Feb 20, 2019 at 14:12

Dillan Wilding · Accepted Answer · 2019-02-20 14:09:52Z

0

You could just add a required checkbox in the form that states the user has read the TOS, etc. to accomplish the same functionality. If that isn't acceptable try something like this form submission

<form onsubmit="return confirmMyForm();">

and the JS function like

function confirmMyForm() {
    return confirm("Are you sure you want to submit the form?");
}

answered Feb 20, 2019 at 14:09

Dillan Wilding

1,1312 gold badges13 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dillan Wilding Over a year ago

From what I can tell the JS confirm function returns true if confirmed and false if canceled. I've put together a small proof of concept here: jsfiddle.net/7swjt0r9 It would be easier to help if you provided more information on the question like what you are currently trying, what is going wrong, etc.

Pasha Over a year ago

The problem is that the form is subitted even when a user clicks cancel.

Pasha Over a year ago

Sorry for earlier comments but i have edited the question to add what i have so far.

Dillan Wilding Over a year ago

It looks like you are combining both the suggestions I made (i.e. both the required checkbox and the confirm) but it seems a bit redundant. I'd suggest adding a submit button instead of having the onchange event of the checkbox submit the form. Also you didn't set the onsubmit attribute on the form like my answer stated. With all that being said, you are unconditionally submitting the form with this.form.submit() on the onchange event of the checkbox. If you put the submit inside the conditional then it'd probably work as expected.

Pasha Over a year ago

Oh, then it works with this.form.submit() inside the conditional i truly appreciate.

Collectives™ on Stack Overflow

How to confirm before sending a form using Javascript (for both sending and confirming)

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related