Enhancements and Bug Fixes for AJAX Contact Form Submission

[Swapnilden]

1. Unspecified Action Attribute

• Description: The form element must have a valid action attribute. If the action attribute is not specified or is empty, the AJAX request will fail.
• Solution: Ensure the action attribute in the form tag points to the correct server endpoint that handles the form submission.

2. Handling Different Response Formats

• Description: The script assumes that the server responds with plain text. If the response is in JSON or another format, the success handler (done) might not work as expected.
• Solution: Update the AJAX request to specify the expected response format and handle it accordingly.

3. jQuery Dependency

• Description: The script requires jQuery to be loaded and available before execution. If jQuery is not loaded, the script will not run.
• Solution: Ensure jQuery is properly included in the project and loaded before this script. For example, include jQuery in the HTML file before including this script.

4. Lack of Client-Side Validation

• Description: The script does not perform client-side validation before submitting the form, potentially leading to incomplete or invalid data being sent to the server.
• Solution: Implement client-side validation to ensure all required fields are correctly filled out before submitting the form.

5. No Loading Indicator

• Description: There is no indication to the user that the form is being submitted, which can lead to multiple submissions if the user clicks the submit button multiple times.
• Solution: Add a loading indicator and disable the submit button while the form is being submitted.

6. Inadequate Error Handling

• Description: The error handling mechanism is basic and does not provide detailed feedback to the user. It simply displays a generic error message.
• Solution: Improve error handling to provide more detailed error messages based on the server's response. Include handling for different types of errors and display specific messages to the user.

Proposed Code Improvements

Below is the improved version of the script addressing the above issues:

$(function() {
  var form = $("#contact-form");
  var formMessages = $(".form-message");
  var submitButton = form.find("button[type='submit']");

  form.submit(function(e) {
    e.preventDefault();

    // Client-side validation
    if (!form[0].checkValidity()) {
      formMessages.removeClass("success").addClass("error").text("Please fill out all required fields correctly.");
      return;
    }

    // Show loading indicator and disable submit button
    submitButton.prop("disabled", true).text("Sending...");

    var formData = form.serialize();

    $.ajax({
      type: "POST",
      url: form.attr("action"),
      data: formData,
      dataType: "json", // Expect JSON response
    })
    .done(function(response) {
      formMessages.removeClass("error").addClass("success").text(response.message);
      form[0].reset();
    })
    .fail(function(data) {
      formMessages.removeClass("success").addClass("error");

      // Check for specific error messages
      if (data.responseJSON && data.responseJSON.errors) {
        var errors = data.responseJSON.errors;
        var errorMessage = "Please fix the following errors:\n";
        $.each(errors, function(key, message) {
          errorMessage += key + ": " + message + "\n";
        });
        formMessages.text(errorMessage);
      } else {
        formMessages.text(data.responseText || "Oops! An error occurred and your message could not be sent.");
      }
    })
    .always(function() {
      // Hide loading indicator and re-enable submit button
      submitButton.prop("disabled", false).text("Send Message");
    });
  });
});

[github-actions]

Hi there! Thanks for opening this issue. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible.

[Swapnilden]

Please assign me this issue under GSSOC'24