Javascript form with jQuery submit running submit twice

Question

I am adding some functionality to an existing Drupal 7 site and have had to throw away a working webforms form as it is not possible to add some required functionality. I have replaced the in built webform with a custom module that generates the page and presents a profile update form to the user. When I submit the form it seems the form is submitting twice and the first time around there appears to be an error in the Firefox JS console. I have done a lot of reading and testing and I do not understand what is going on here.

This form can be viewed at the following location

http://www.tztesting.com/userprofile

To attempt to use this form you must log in to the site as the form submit makes calls to a number of API's that require authentication. The test username is web@tz.net and the test password is abcd1234

The html and JS for the form is as follows

<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>

In the Javascript there is an alert("done"); and without this the submit does not work. Of course this alert is not wanted.

If you look at the console when the form is submitted it appears that the form is submitting twice and the first time around it hits the alert("done") while the second the submit appears to happen before the alert("done");

My desired functionality is that When the /userprofile URL is hit the Drupal php module pulls the current data from the API and pushes it into this form as default values. When the user submits this form the PHP module receives the values, as a serialized array, and processes them and sends the new values to the API. After the submit a JSON string is returned that looks like this

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

Once parsed all we check for is the Success value being true and if it is a message is made available in the "update message" div at the top of the form.

I would appreciate it if someone could look at this form and let me know what I am doing wrong as I have been tearing my hair out for some time trying to sort this out.

Regards

Richard

Answer 1

You should bind the submit event with form instead of binding the click event of button.

Additionaly, You need to use event.preventDefault(); to cancel the deafult submit since you are using $.ajax() to submit the form.

So change the code as

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

    event.preventDefault();

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

instead of

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