Javascript表单与jQuery提交运行提交两次

Question

我正在为现有的Drupal 7网站添加一些功能，并且不得不丢弃一个正在运行的webforms表单，因为无法添加一些必需的功能。我已经使用自定义模块替换了内置的webform，该模块生成页面并向用户显示配置文件更新表单。当我提交表单时，似乎表单提交了两次，并且第一次在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中有一个警报（“完成”）;没有这个提交不起作用。当然不需要这个警报。

如果您在提交表单时查看控制台，则表示表单提交两次，第一次响应警报（“完成”），而第二次提交似乎发生在警报之前（“完成” “）;

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

的JSON字符串

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

解析后，我们检查的是Success值为true，如果是，则表单顶部的“update message”div中提供了一条消息。

如果有人可以看一下这个表格并让我知道我做错了什么，我会很感激，因为我已经把头发弄了一段时间试图解决这个问题。

此致

理查德

Answer 1

您应该使用表单绑定{ "manifest_version": 2, "name": "Focus", "version": "1.9.3", "description": "Block distracting websites and get inspired to focus on what's important", "background_page": "background.html", "icons": { "16": "inspirelogo16.png", "48": "inspirelogo48.png", "128": "inspirelogo128.png" }, "browser_action": { "default_icon": "inspirelogo19.png", "default_title": "Inspire Router", "default_popup": "/pages/popup.html" }, "permissions": [ "background", "notifications", "tabs", "<all_urls>", "webRequest", "*://*.google.com/" ], "background": { "scripts": [ "background.js" ], "content_scripts": [ { "matches": ["<all_urls>"], "js": ["background.js"] } ], "persistent": true }, "options_page": "/pages/fieldpage.html", "content_security_policy": "script-src 'self' 'unsafe-eval' chrome-extension://bjmcjeffnloaojffcbaekmcokegnejlf/pages/inspire.html http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js https://ssl.google-analytics.com/ga.js http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js https://connect.facebook.net https://www.facebook.com https://chrome.google.com https://chrome.google.com; object-src 'self'" } 事件，而不是绑定按钮的submit事件。

另外，由于您使用click提交表单，因此您需要使用event.preventDefault();取消聋人提交。

所以将代码更改为

$.ajax()

而不是

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

    event.preventDefault();

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