CODEWITHSUNDEEP
javascriptjqueryonclickevent-handlingform-submit
reformed
reformed

Reputation: 4780

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:

  1. Click one of the submit buttons. A confirmation div will appear.
  2. Click the Cancel button in the confirmation.
  3. Now click the other submit button.
  4. Click the Yes button in the confirmation.
  5. 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>

Upvotes: 0

Views: 1467

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370689

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>

Upvotes: 1

Related Questions