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

1 day ago 1
ARTICLE AD BOX

I'm building a web-based address book module for a larger app where users will frequently create/edit contacts. Mozilla Firefox aggressively prompts "Save Address?" or "Update contact?" after every submit, even with autocomplete="off" or autocomplete="nope" etc, obscure field names, aria-label only, hidden "bait" fields, and submission using fetch().

I've tried all of the common tricks just listed and I even tried switching from <label>Address1</label> to <input placeholder="address1" ...>. None of that works.

Is there a reliable way to prevent this prompt without terrible UX hacks that compromise accessibility or without asking users to disable their form history?

Here is my address form and a simplified SAVE button:

<form name="addContact" id="form3" method="post" action=""> <p><label for="d2ax1"><b>Address 1</b></label></p> <input id="d2ax1" name="ax1" type="text" value=""> <p><label for="d2ax2"><b>Address 2</b></label></p> <input id="d2ax2" name="ax2" type="text" value=""> <p><label for="d2ax3"><b>City</b></label></p> <input id="d2ax3" name="ax3" type="text" value=""> <p><label for="d2ax4"><b>State / Province</b></label></p> <input id="d2ax4" name="ax4" type="text" value=""> <p><label for="d2ax5"><b>Zip / Post Code</b></label></p> <input id="d2ax5" name="ax5" type="text" value=""> <p><label for="d2ax6"><b>Country</b></label></p> <input id="d2ax6" name="ax6" type="text" value=""> </form> <a class="formBtn" role="button" tabindex="0" onclick="saveAddress()">SAVE</a>

EDIT: Originally I had autocomplete="off" inside the <form> tag but since it didn't do anything to prevent the dialog, I removed it. My solution below still works.

Robert Giordano's user avatar

Read Entire Article