I have a form on a website. Some of the html fields (they are <select> fields, if that is relevant) on this form are disabled to prevent the user sending changing the values in them, however, these need to be sent up to the server when the user submits the form. To do this, there is some JavaScript on the page that intercepts the submission event and stops it, enables the fields, submits the form, and then (for reasons I don't think are relevant) disables the fields again:
function toggleDisableOnFields(areDisabled) {
document.getElementsByName("x")[0].disabled = areDisabled;
// other fields get enabled here too
}
const form = document.getElementById("form");
form.addEventListener("submit", (e) => {
e.preventDefault();
toggleDisableOnFields(false);
form.submit();
toggleDisableOnFields(true);
});
On Chrome and Firefox, this works fine. The fields get enabled, the form gets submitted with their data included, and then the fields are successfully disabled again afterwards.
The issue is on Safari. The fields are enabled, the form submission happens, and the fields are disabled, but it seems as though the form only actually gets sent after they are disabled. Thus, their data is not sent up to the server as they are disabled by the time the request is sent.
If I remove the penultimate line of code:
toggleDisableOnFields(true);
Then Safari sends the form complete with the data in these fields, confirming to me that the form is getting sent only after this line has run.
The question:
Why does the .submit() function send the form immediately on some browsers, but not on Safari?
EDIT
From experimentation it does not seem like the submit() is in itself asynchronous, as adding an await in front of it and making the wrapping method async does not solve the problem. I would assume this means it is a difference in how the browser handles the request to submit the form, rather than the code itself.