Question posted in
You can find the official documentation here.

Submit button is not submitting the form after changing the button type – Jquery ajax

After changing my button type to submit it’s not submitting the form. Somehow, the AJAX request is not working after that. If I change it to type="button" then it’s working, but I want this because required validation is not working while giving type="button". It only works when I’m giving button type submit but then the form is not submitting.

<form>
  <input type="email" class="form-control" id="passwordReset" placeholder="Email" required/>
  <button type="submit" id="passwordButton"> Submit</button>
</form>

$("#passwordButton").on('submit', function(e) { 
  e.preventDefault();
  const email = $("#passwordReset").val();

  $.ajax({
    type: "GET",
    url: "/forget_password=" + email,
    success: function(response) {
      if (!response.data) {
        $(".sendError").show();
      } else {
        $(".sendSuccess").show();
      }
    }
  });
})

I want my form to be submitted while checking the required condition also.

Tags:

4

Answers


  1. 0

    Quoting from MDN:

    Note that the submit event fires on the element itself, and not on any or inside it. (Forms are submitted, not buttons.)

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event

    Attach the listener to the click even of the button, or to the submit event of the form.

    Login or Signup to reply.
  2. 0

    HTMLFormElement: submit event

    Note that the submit event fires on the <form> element itself, and not on any <button> or <input type="submit"> inside it. (Forms are submitted, not buttons.)

    Try click event instead:

    $("#passwordButton").on('click', function(e) {

    Update: I think simply submit event on the form is enough here as the event will fire on clicking any input type=submit:

    $('#myForm').on('submit', function(){
  alert('Your form is submitting');
  /*
    Your code here
  */
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  <input type="email" class="form-control" id="passwordReset" placeholder="Email" required/>
  <button type="submit" id="passwordButton"> Submit</button>
</form>
    Login or Signup to reply.
  3. 0

    I think you should just create a normal like <button onclick="Submit()">save</button>
    and write Code like that:

    Submit(e){
  e.preventDefault();
  const email = $("#passwordReset").val();

  $.ajax({
    type: "GET",
    url: "/forget_password=" + email,
    success: function(response) {
      if (!response.data) {
        $(".sendError").show();
      } else {
        $(".sendSuccess").show();
      }
    }
  });
})
}
    Login or Signup to reply.
  4. 0

    Add Id or class attribute to your form.

    <form id="formYouWantToSubmit">
    <input type="email" class="form-control" id="passwordReset" placeholder="Email" required/>
    <button type="submit" id="passwordButton"> Submit</button>
</form>

    Then,

    $("#formYouWantToSubmit").on('submit', function(e) { 
    const email = $("#passwordReset").val();

    // This will validate if email having any value (from string point of view)
    if (!email) {
        e.preventDefault();// To restrict form submission
        //### Do anything here when validation fails
        return false;
    }

    $.ajax({
            type: "GET",
            url: "/forget_password=" + email,
            success: function(response) {

            if (!response.data) {
                $(".sendError").show();
            } else {
                $(".sendSuccess").show();
            }
        }
    });
})

    Things to remember:

    • button type submit will ultimately submits the form to current page (due to action attribute is missing)
    • When we user Ajax to do something we ultimately seek a ‘page-load-less’ activity. In your case you are doing both submitting the form using submit button and making Ajax request, which will hard to get executed and if any chance it gets executed you won’t be able witness any ‘success’ or ‘error’ activities because until then page already been reloaded.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search