带有 jQ​​uery 提交的 Javascript 表单运行提交两次

Question

我正在向现有的 Drupal 7 站点添加一些功能，并且不得不丢弃一个可用的 webforms 表单，因为无法添加一些必需的功能。我已经用生成页面并向用户显示个人资料更新表单的自定义模块替换了内置的网络表单。当我提交表单时，表单似乎提交了两次，而第一次在 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");没有这个，提交就不起作用。当然不需要此警报。

如果您在提交表单时查看控制台，您会发现表单提交了两次，第一次点击警报(“完成”)，而第二次提交似乎发生在警报(“完成”之前");

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

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

一旦解析，我们检查的所有内容是成功值是否为真，如果它是一条消息，则在表单顶部的“更新消息”div 中可用。

如果有人可以查看此表格并让我知道我做错了什么，我将不胜感激，因为我一直在努力解决这个问题。

问候

理查德

Answer 1

您应该将 submit 事件与 form 绑定(bind)，而不是绑定(bind)按钮的 click 事件。

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

所以把代码改成

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

    event.preventDefault();

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

代替

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