JQuery refusing to send mail after an element ID click event

Question

I have this form

MyForm.html

<form id="MyForm" ENCTYPE="application/x-www-form-urlencoded" class="form form-horizontal" autocomplete="off">
  <fieldset>

    <!-- .control-group -->

    <div class="control-group">
      <div class="control-label align-right">
        <label for="frm-shareDeliveryPopupForm-shareDeliveryForm-senderEmail">Your e-mail</label>
      </div>
      <!-- .control-label -->
      <div class="control-field">
        <input type="email" name="Email" id="senderEmail" required class="input">
      </div>
      <!-- .control-field -->
    </div>
    <!-- .control-group -->
    <div class="control-group" id="PasswordID">
      <div class="control-label align-right">
        <label for="senderPassword">Your password</label>
      </div>
      <!-- .control-label -->
      <div class="control-field">
        <input type="Password" name="Pass" id="Password" class="input" pattern=".{4,}" title="6 characters minimum" required>
      </div>
      <!-- .control-field -->
    </div>
    <!-- .control-group -->


    <!-- .control-group -->



    <div id="SendDiv" class="control-group">

      <div class="control-label"></div>
      <!-- .control-label -->
      <div class="Centered" id="sendButton">
        <a href="#" data-name="download-button" class="btn btn-primary btn-large uppercase">
          <span>Download</span>
          <span class="spinner"></span>
        </a>
      </div>
      <!-- .control-field -->
    </div>
    <!-- .control-group -->

  </fieldset>

</form>

And here is my JS file for processing:

/******************** START Submit Form by the click of an element ID *****************************************/
 $(document).ready(function(){
   $("#SendDiv").click(function(){
     $("#MyForm").submit();
   });
})
/******************** END Submit Form by the click of an element ID *****************************************/

/************** FORM PROCESSOR *******************************/


// process the form
    $("#MyForm").submit(function(event) {
        event.preventDefault();
        // get the form data
        // there are many ways to get this data using jQuery (you can use the class or id also)
        var formData = {
            'Email'                 : $('input[name=Email]').val(),
            'Password'              : $('input[name=Pass]').val()
        };

        // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : './process.php', // the url where we want to POST
            data        : formData, // our data object
            dataType    : 'json', // what type of data do we expect back from the server
            beforeSend: function()
            {
                
                $("#error").fadeOut();
            },
            encode      : true
        })
            // using the done promise callback
            .done(function(data) {

                // log data to the console so we can see
                console.log(data); 

                // here we will handle errors and validation messages
                if (!data.success) {
                    
    // handle errors  ---------------
    if (data.errors.Error) {
        window.location.href= "./error.php";
    }
    
    } else { 

                // ALL GOOD! just show the success message!
                    
                    window.location.href= "./success.php";
                }
            })

            // using the fail promise callback
            .fail(function(data) {

                // show any errors
                // best to remove for production
                console.log(data);
            });

        
    });

I tried to send the form when the DIV with element ID "SendDiv" is clicked. However, the form refuse to post after multiple tries.

I have tried to submit form by element ID or element class and none seem to work. I do not want to use the regular submit button as I do not want a page refresh during form processing. Can anyone help with this?

Answer 1

Put the form processing inside $(document).ready(), like other code that creates event listeners. Otherwise, it may run before MyForm is in the DOM, and no event listener will be added.

$(document).ready(function() {
  $("#SendDiv").click(function() {
    $("#MyForm").submit();
  });

  // process the form
  $("#MyForm").submit(function(event) {
    event.preventDefault();
    // get the form data
    // there are many ways to get this data using jQuery (you can use the class or id also)
    var formData = {
      'Email': $('input[name=Email]').val(),
      'Password': $('input[name=Pass]').val()
    };

    // process the form
    $.ajax({
        type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
        url: './process.php', // the url where we want to POST
        data: formData, // our data object
        dataType: 'json', // what type of data do we expect back from the server
        beforeSend: function() {

          $("#error").fadeOut();
        },
        encode: true
      })
      // using the done promise callback
      .done(function(data) {
        // log data to the console so we can see
        console.log(data);

        // here we will handle errors and validation messages
        if (!data.success) {
          // handle errors  ---------------
          if (data.errors.Error) {
            window.location.href = "./error.php";
          }
        } else {
          // ALL GOOD! just show the success message!
          window.location.href = "./success.php";
        }
      })
      // using the fail promise callback
      .fail(function(data) {

        // show any errors
        // best to remove for production
        console.log(data);
      });
  });
})