带有jQuery提交的Javascript表单运行两次提交

Question

我向现有的Drupal 7网站添加了一些功能，由于无法添加某些必需的功能，不得不丢弃了一个有效的Web表单表单。 我已经用一个自定义模块替换了内置的Web表单，该模块生成页面并向用户显示配置文件更新表单。 当我提交表单时，似乎表单提交了两次，并且第一次出现在Firefox JS控制台中是一个错误。 我已经做了很多阅读和测试，但我不明白这里发生了什么。

可以在以下位置查看此表格

http://www.tztesting.com/userprofile

要尝试使用此表单，您必须登录网站，因为表单提交会调用许多需要身份验证的API。 测试用户名为web@tz.net，测试密码为abcd1234

表单的html和JS如下

<div class="panel-pane pane-block profile-top profile-edit">

  <div class="pane-content">
    <div class="update_message"></div>
    <form accept-charset="UTF-8" id="profile_edit" method="post" action="" enctype="multipart/form-data" class="webform-client-form "><div><div class="form-item webform-component webform-component-markup webform-component--form-title">
          <p>Change Account Details</p>
        </div>
        <div class="form-item webform-component webform-component-textfield webform-component--first-name webform-container-inline">
          <label for="edit-submitted-first-name">First name <span title="This field is required." class="form-required">*</span></label>
          <input type="text" maxlength="128" size="60" value="Test" name="submitted[first_name]" id="edit-submitted-first-name" class="form-control form-text firstname">
        </div>
        <div class="form-item webform-component webform-component-textfield webform-component--last-name webform-container-inline">
          <label for="edit-submitted-last-name">Last name <span title="This field is required." class="form-required">*</span></label>
          <input type="text" maxlength="128" size="60" value="User" name="submitted[last_name]" id="edit-submitted-last-name" class="form-control form-text lastname">
        </div>
        <div class="form-item webform-component webform-component-textfield webform-component--mobile-no webform-container-inline">
          <label for="edit-submitted-mobile-no">Mobile no. <span title="This field is required." class="form-required">*</span></label>
          <input type="text" maxlength="128" size="64" value="85112366" name="submitted[mobile_no]" id="edit-submitted-mobile-no" class="form-control form-text number">
        </div>
        <div class="form-item webform-component webform-component-textfield webform-component--postal-code webform-container-inline">
          <label for="edit-submitted-postal-code">Postal Code <span title="This field is required." class="form-required">*</span></label>
          <input type="text" maxlength="128" size="64" value="408600" name="submitted[postal_code]" id="edit-submitted-postal-code" class="form-control form-text postcode" onkeyup="getaddress();">
        </div>
        <div class="form-item webform-component webform-component-textfield webform-component--building-name webform-container-inline">
          <label for="edit-submitted-building-name">Building name </label>
          <input type="text" maxlength="128" size="60" value="SINGAPORE POST CENTRE" name="submitted[building_name]" id="edit-submitted-building-name" class="form-control form-text building_name">
        </div>
        <div class="form-item webform-component webform-component-textfield webform-component--street-name webform-container-inline">
          <label for="edit-submitted-street-name">Street name </label>
          <input type="text" maxlength="128" size="60" value="10 EUNOS ROAD 8" name="submitted[street_name]" id="edit-submitted-street-name" class="form-control form-text street_name">
        </div>
        <div class="form-item webform-component webform-component-textfield webform-component--unit-number webform-container-inline">
          <label for="edit-submitted-unit-number">Unit number </label>
          <input type="text" maxlength="128" size="64" value="122" name="submitted[unit_number]" id="edit-submitted-unit-number" class="form-control form-text unit_number">
        </div>
        <div class="form-item webform-component webform-component-checkboxes webform-component--tc-acknowlegement">
          <label for="edit-submitted-tc-acknowlegement" class="element-invisible">T&amp;C acknowlegement <span title="This field is required." class="form-required">*</span></label>
          <div class="form-checkboxes" id="edit-submitted-tc-acknowlegement"><div class="form-type-checkbox form-item-submitted-tc-acknowlegement-y form-item checkbox">
              <label for="edit-submitted-tc-acknowlegement-1"><input type="checkbox" class="form-checkbox" value="acknowlegement" name="submitted[tc_acknowlegement]" id="edit-submitted-tc-acknowlegement-1"> I acknowledge and accept the <a href="/privacy_policy" target="_blank">Privacy Policy</a>, <a href="/terms_of_use" target="_blank">Website Terms of Use</a> and <a href="/popstation-terms-conditions" target="_blank">POPStation T&amp;C</a> </label>
            </div>
          </div>
        </div>
        <div class="form-item webform-component webform-component-checkboxes webform-component--information-acknowledgement">
          <label for="edit-submitted-information-acknowledgement" class="element-invisible">Information acknowledgement </label>
          <div class="form-checkboxes" id="edit-submitted-information-acknowledgement"><div class="form-type-checkbox form-item-submitted-information-acknowledgement-y form-item checkbox">
              <label for="edit-submitted-information-acknowledgement-1"><input type="checkbox" class="form-checkbox" value="y" name="submitted[information_acknowledgement][y]" id="edit-submitted-information-acknowledgement-1"> I consent to the collection, use and disclosure of my personal data by the SingPost Group for the purposes of marketing products or services offered by the SingPost Group. </label>
            </div>
          </div>
        </div>
        <button type="submit" value="Confirm" name="op" class="webform-submit button-primary btn btn-primary form-submit">Confirm</button>
      </div>
    </form>
  </div>
</div>

<script type="text/javascript">

  (jQuery)(".form-submit").click(function(){

      var arr = {
        "FirstName": jQuery(".firstname").val(),
        "LastName": jQuery(".lastname").val(),
        "ContactNumber": jQuery(".number").val(),
        "PostCode": jQuery(".postcode").val(),
        "BuildingName": jQuery(".building_name").val(),
        "StreetName": jQuery(".street_name").val(),
        "UnitNumber": jQuery(".unit_number").val()
      };

      var out_arr = JSON.stringify(arr);

      var update = (jQuery).ajax({
        url: "/userprofile?update=" + out_arr,
        method: "POST",
        async: "true"
      });

      update.done(function (json) {
        objects_update = JSON.parse(json);
        if (objects_update.Success) {
          var html = "<h3>Your profile has been updated</h3>";
          (jQuery)(".update_message").html(html);
        }
      });
      /**************/
      alert("done");
      /*************/
    });


  function getaddress() {
    var postcode = jQuery(".postcode").val();

    if (postcode.length == 6) {

      var address = (jQuery).ajax({
        url: "/userprofile?edit=" + postcode,
        method: "POST",
        async: "true"
      });

      address.done(function( json ) {
        objects_address = JSON.parse(json);
        if (objects_address.Success) {
          var code = objects_address.Address.PostalCode;
          var street_name = objects_address.Address.StreetName;
          var building_name = objects_address.Address.BuildingName;
          var building_no = objects_address.Address.BuildingNo;

          jQuery( ".building_name" ).val( building_name );
          jQuery( ".street_name" ).val( building_no + " " + street_name );
        }
      });
    }
  }

</script>

在Javascript中有一个alert（“ done”）; 没有这个，提交就行不通了。 当然，不需要此警报。

如果您在提交表单时查看控制台，则该表单似乎正在提交两次，并且第一次碰到了alert（“ done”），而第二次提交似乎发生在alert（“ done”）之前；

我想要的功能是，当/ userprofile URL命中时，Drupal php模块从API提取当前数据，并将其作为默认值推送到此表单中。 当用户提交此表单时，PHP模块将以序列化数组的形式接收值，并处理它们并将新值发送到API。 提交后，返回的JSON字符串如下所示

{"Success":true,"Data":{}}

解析后，我们检查的是Success值是否为true，是否在窗体顶部的“ update message” div中提供了一条消息。

如果有人可以看一下这张表格，让我知道我做错了什么，因为我一直在梳理头发，试图解决这个问题，我将不胜感激。

问候

理查德

Answer 1

您应该将submit事件与表单绑定，而不是绑定button的click事件。

另外，您需要使用event.preventDefault(); 取消默认的提交，因为您使用$.ajax()提交表单。

因此将代码更改为

jQuery("#profile_edit").submit(function(event){

    event.preventDefault();

    //Rest of existing code to submit form      
});

代替

(jQuery)(".form-submit").click(function(){
});