Submit HTML Form using JavaScript

Question

I am presenting terms and conditions modal to the user before registration but I am having an issue submitting the form. I think it might be because the submit button is outside of the form?

HTML

<form method="POST" id="registerUser" autocomplete="signupForm-noFill" action={{url("/register")}}>
    ...
    <button type="submit" id="registerButton" role="button" class="btn btn-hp-modal btn-signup">Sign up</button>
</form>

Modal (outside the form above)

....
<button type="submit" id="acceptTerms" class="btn btn-hp-modal underline btn-signup-modal">I Accept</button>

JavaScript

$('#registerButton').click(function() {
    $("#legalModal").modal("show");
    return false;
});

$(document).ready(function () {
    $("#acceptTerms").click(function () {
        $("#registerUser").submit();
  });
});

What happens when I try to submit the form is refreshing the page and adding a ? to the end of the url: /signup?. If I try submitting it without the modal then it works fine.

Possible duplicate of Submit form using a button outside the <form> tag — Michel
– Michel, Commented Jan 8, 2018 at 15:51
Make the accept terms a checkbox inside the form and validate it is checked on submit instead. — mplungjan
– mplungjan, Commented Jan 8, 2018 at 15:51

Stéphane Ammar · Accepted Answer · 2018-01-08 15:51:51Z

1

Your button is type submit, so it will send data of the form, as the parent form tag tells him, and won't considere your click function since it change the page. You need to prevent the natural behaviour of a submit button.

The way to do this is preventDefault:

$("#acceptTerms").click(function (event) {
    event.preventDefault(); //prevent from natural behaviour
    $("#registerUser").submit();
});

answered Jan 8, 2018 at 15:51

Stéphane Ammar

1,45410 silver badges17 bronze badges

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

1 Comment

charlietfl Over a year ago

OP is returning false which should do basically the same thing

Collectives™ on Stack Overflow

Submit HTML Form using JavaScript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related