点击元素ID后jQuery无法提交表单问题求助

我有如下表单代码（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>

配套的表单处理JS代码如下：

/******************** 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);
            });

        
    });

尝试点击ID为SendDiv的DIV提交表单，但多次尝试均未生效。试过通过元素ID或类提交表单也没用，不想使用常规提交按钮，避免表单处理时刷新页面，求解决方法。

1. 修复事件绑定顺序 #

你的表单提交处理代码没有包裹在$(document).ready()中，DOM还未完全加载时就绑定事件会导致绑定失效。把所有事件逻辑都放进document.ready里：

$(document).ready(function(){
  // 点击SendDiv提交表单
  $("#SendDiv").click(function(){
    $("#MyForm").submit();
  });

  // 表单提交处理
  $("#MyForm").submit(function(event) {
    event.preventDefault();
    var formData = {
        'Email' : $('input[name=Email]').val(),
        'Password' : $('input[name=Pass]').val()
    };

    $.ajax({
        type : 'POST',
        url : './process.php',
        data : formData,
        dataType : 'json',
        beforeSend: function() {
            $("#error").fadeOut();
        },
        encode : true
    })
    .done(function(data) {
        console.log(data); 
        if (!data.success) {
            if (data.errors.Error) {
                window.location.href= "./error.php";
            }
        } else { 
            window.location.href= "./success.php";
        }
    })
    .fail(function(data) {
        console.log(data);
    });
  });
});

2. 处理原生表单验证 #

表单中的输入框带有required属性，点击非提交按钮触发表单提交时，浏览器原生验证会生效但可能没有明显提示，导致表单未真正提交。可以手动触发验证并显示提示：

修改SendDiv的点击事件：

$("#SendDiv").click(function(){
  const form = $("#MyForm")[0];
  // 检查表单是否通过验证
  if (form.checkValidity()) {
    form.submit();
  } else {
    // 显示原生验证提示
    form.reportValidity();
  }
});

3. 阻止a标签的默认行为 #

SendDiv内的<a>标签带有href="#"，点击时会触发默认跳转行为，干扰表单提交。可以阻止其默认行为：

$("#sendButton a").click(function(e){
  e.preventDefault();
});

或者更推荐的方式：把<a>标签改成<button>元素，语义化更好且无默认跳转问题：

<div class="Centered" id="sendButton">
  <button data-name="download-button" class="btn btn-primary btn-large uppercase">
    <span>Download</span>
    <span class="spinner"></span>
  </button>
</div>

内容的提问来源于stack exchange，提问作者Jared