Question

0

195

Views

Why is it that this form is being submitted twice?

I am trying to understand why the form in the following snippet is submitted multiple times, after following the steps:

Click one of the submit buttons. A confirmation div will appear.
Click the Cancel button in the confirmation.
Now click the other submit button.
Click the Yes button in the confirmation.
The console log shows that the form submission handler is fired twice.

Can anyone help me see how/why this is happening, so that I can prevent multiple submissions?

const $form = $("#form-test");
const $confirm = $("#confirm");

$form.on("submit", function (e, $btn) {
    e.preventDefault();
    console.log("Submitting!", $btn);
});

$confirm.find("button").on("click", function () {
    $confirm.hide();
});

$form.find("button").on("click", function (e) {
    const $btn = $(this);

    $("#btn-yes").one("click", function () {
        $form.trigger("submit", $btn);
    });

    $("#btn-cancel").one("click", function () {
        console.log("Cancelled!", this);
    });

    $confirm.show();
});

#form-container, #confirm {
  border: 1px solid #000;
  padding: 10px;
}

#confirm {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="confirm">
    Are you sure?
    <button id="btn-cancel" type="button">Cancel</button>
    <button id="btn-yes" type="button">Yes</button>
</div>

<div id="form-container">
    <form id="form-test">
        <input type="text" name="test" value="Foo">
        <button type="button">Submit 1</button>
        <button type="button">Submit 2</button>
    </form>
</div>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-04T07:41:00.723Z

You are running the following:

$("#btn-yes").one("click", function () {
    $form.trigger("submit", $btn);
});

inside the $form.find("button").on("click" handler. If you click into the buttons twice, you'll be adding the handler twice.

Either remove the previous handler before adding the new one, or add the yes/cancel handlers outside (there's no need for them to be added inside the click handler).

const $form = $("#form-test");
const $confirm = $("#confirm");

$form.on("submit", function(e) {
  e.preventDefault();
  console.log("Submitting!");
});

$confirm.find("button").on("click", function() {
  $confirm.hide();
});

$("#btn-yes").one("click", function() {
  $form.trigger("submit");
});
$("#btn-cancel").one("click", function() {
  console.log("Cancelled!", this);
});
$form.find("button").on("click", function() {
  $confirm.show();
});

#form-container,
#confirm {
  border: 1px solid #000;
  padding: 10px;
}

#confirm {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="confirm">
  Are you sure?
  <button id="btn-cancel" type="button">Cancel</button>
  <button id="btn-yes" type="button">Yes</button>
</div>

<div id="form-container">
  <form id="form-test">
    <input type="text" name="test" value="Foo">
    <button type="button">Submit 1</button>
    <button type="button">Submit 2</button>
  </form>
</div>

0

195

Why is it that this form is being submitted twice?

1 answers

0

Find remote jobs

Andres GPT