Prevent Firefox ‘Save address?’ prompt on form submit in JavaScript address book app

by

Summary

The Firefox “Save address?” prompt is a common issue encountered when building web-based address book modules. Despite trying various tricks such as using autocomplete="off", obscure field names, and submission using fetch(), the prompt still appears. This article aims to provide a reliable solution to prevent this prompt without compromising accessibility or user experience.

Root Cause

The root cause of this issue is Firefox’s aggressive form history saving feature, which is designed to save user input for later use. This feature is triggered by the presence of certain field names and types, such as address-related fields. The following are some of the causes:

  • Field names and types: Using field names and types that are commonly associated with addresses, such as “address1”, “city”, “state”, etc.
  • Form submission: Submitting the form using the default form submission behavior, which triggers Firefox’s form history saving feature.
  • Lack of explicit autocomplete attribute: Not providing an explicit autocomplete attribute for each field, which can lead to Firefox’s default behavior of saving form history.

Why This Happens in Real Systems

This issue occurs in real systems because Firefox’s form history saving feature is enabled by default. When a user submits a form, Firefox checks the field names and types to determine if the form contains address-related information. If it does, Firefox prompts the user to save the address. This feature is intended to provide a convenient way for users to save and reuse their address information, but it can be annoying and intrusive in certain situations.

Real-World Impact

The real-world impact of this issue is:

  • Poor user experience: The constant prompting to save addresses can be frustrating and annoying for users.
  • Compromised accessibility: Using tricks such as hidden fields or obscure field names can compromise accessibility and make it difficult for users with disabilities to use the form.
  • Increased support requests: Users may contact support to ask how to disable the prompt, which can increase support requests and costs.

Example or Code

// Example of how to prevent Firefox's "Save address?" prompt
function saveAddress() {
  // Create a new form data object
  const formData = new FormData();

  // Add the form fields to the form data object
  formData.append('ax1', document.getElementById('d2ax1').value);
  formData.append('ax2', document.getElementById('d2ax2').value);
  formData.append('ax3', document.getElementById('d2ax3').value);
  formData.append('ax4', document.getElementById('d2ax4').value);
  formData.append('ax5', document.getElementById('d2ax5').value);
  formData.append('ax6', document.getElementById('d2ax6').value);

  // Submit the form data using fetch
  fetch('/save-address', {
    method: 'POST',
    body: formData
  });
}

How Senior Engineers Fix It

Senior engineers fix this issue by:

  • Using the autocomplete attribute explicitly: Providing an explicit autocomplete attribute for each field to prevent Firefox’s default behavior of saving form history.
  • Submitting the form using fetch(): Submitting the form using fetch() instead of the default form submission behavior to avoid triggering Firefox’s form history saving feature.
  • Using a form data object: Creating a new form data object and adding the form fields to it to submit the form data using fetch().

Why Juniors Miss It

Juniors may miss this issue because:

  • Lack of experience: Juniors may not have encountered this issue before and may not know how to fix it.
  • Insufficient knowledge of Firefox’s form history saving feature: Juniors may not be aware of Firefox’s form history saving feature and how it works.
  • Overreliance on tricks and workarounds: Juniors may rely on tricks and workarounds, such as using hidden fields or obscure field names, which can compromise accessibility and user experience.

Leave a Comment