JQuery autosubmit does not work in Safari

I have a form that I want to autosubmit using JQuery. However, it doesn’t work in older versions of Safari (macOS Mojave, iOS 12). It works in Chrome, Firefox, and iOS 13.

So, this is most likely a Safari bug, but I have a lot of users with devices running the older software, so I need to work around it.

Here’s my autosubmit code:

onclick="document.getElementById("flagging-remember-edit-form").submit();"

And to the submit button, I added style display: none.

Unfortunately, this doesn’t work in older versions of Safari.

I found an issue with a patch for a Drupal module that suggests using absolute positioning to hide the element, but when I tried this on my form, 1) it didn’t work in older versions of Safari and 2) it broke the submit in Firefox, too.

So how can I use JQuery autosubmit in old versions of Safari? (iOS 12 and below)

For reference, here’s the form from Drupal 8:

<form id="flagging-remember-edit-form" class="flagging-remember-edit-form flagging-form" accept-charset="UTF-8" action="/ai/review" method="post" data-drupal-selector="flagging-remember-edit-form">
<div id="vote-wrapper" class="radio-toolbar">
<div id="edit-field-list-int-score-wrapper" class="field--type-list-integer field--name-field-list-int-score field--widget-options-buttons js-form-wrapper form-wrapper" onclick="document.getElementById("flagging-remember-edit-form").submit();" data-drupal-selector="edit-field-list-int-score-wrapper"><fieldset id="edit-field-list-int-score--wrapper" class="fieldgroup form-composite required js-form-item form-item js-form-wrapper form-wrapper" data-drupal-selector="edit-field-list-int-score"><legend> <span class="fieldset-legend js-form-required form-required">Score</span></legend>
<div class="fieldset-wrapper">
<div id="edit-field-list-int-score">
<div class="control js-form-item form-item js-form-type-radio form-item-field-list-int-score js-form-item-field-list-int-score"><label class="score-0 radio option"> <input id="edit-field-list-int-score-0" class="score-0 form-radio is-link radio" checked="checked" name="field_list_int_score" type="radio" value="0" data-drupal-selector="edit-field-list-int-score-0" /> 0<br />0 </label></div>
<div class="control js-form-item form-item js-form-type-radio form-item-field-list-int-score js-form-item-field-list-int-score"><label class="score-1 radio option"> <input id="edit-field-list-int-score-1" class="score-1 form-radio is-link radio" name="field_list_int_score" type="radio" value="1" data-drupal-selector="edit-field-list-int-score-1" /> 1<br />1 </label></div>
<div class="control js-form-item form-item js-form-type-radio form-item-field-list-int-score js-form-item-field-list-int-score"><label class="score-2 radio option"> <input id="edit-field-list-int-score-2" class="score-2 form-radio is-link radio" name="field_list_int_score" type="radio" value="2" data-drupal-selector="edit-field-list-int-score-2" /> 2<br />2 </label></div>
<div class="control js-form-item form-item js-form-type-radio form-item-field-list-int-score js-form-item-field-list-int-score"><label class="score-3 radio option"> <input id="edit-field-list-int-score-3" class="score-3 form-radio is-link radio" name="field_list_int_score" type="radio" value="3" data-drupal-selector="edit-field-list-int-score-3" /> 3<br />3 </label></div>
<div class="control js-form-item form-item js-form-type-radio form-item-field-list-int-score js-form-item-field-list-int-score"><label class="score-4 radio option"> <input id="edit-field-list-int-score-4" class="score-4 form-radio is-link radio" name="field_list_int_score" type="radio" value="4" data-drupal-selector="edit-field-list-int-score-4" /> 4<br />4 </label></div>
<div class="control js-form-item form-item js-form-type-radio form-item-field-list-int-score js-form-item-field-list-int-score"><label class="score-5 radio option"> <input id="edit-field-list-int-score-5" class="score-5 form-radio is-link radio" name="field_list_int_score" type="radio" value="5" data-drupal-selector="edit-field-list-int-score-5" /> 5<br />5 </label></div>
</div>
</div>
</fieldset></div>
</div>
<input autocomplete="off" name="form_build_id" type="hidden" value="form-lubraH2Ya_UiThmQ3qdD2Xuvri-239sRONoQpXbW3tw" data-drupal-selector="form-lubrah2ya-uithmq3qdd2xuvri-239sronoqpxbw3tw" /><input name="form_token" type="hidden" value="eDSbk9K-hHl0iQEljT0370QogyRGB_kLIi6333ylgmg" data-drupal-selector="edit-flagging-remember-edit-form-form-token" /><input name="form_id" type="hidden" value="flagging_remember_edit_form" data-drupal-selector="edit-flagging-remember-edit-form" /><input name="field_int_duration" type="hidden" value="1603522718" data-drupal-selector="edit-field-int-duration" />
<div id="edit-actions" class="form-actions control buttons js-form-wrapper form-wrapper" data-drupal-selector="edit-actions"><input id="edit-submit" class="is-primary button button--primary js-form-submit form-submit has-text-weight-bold is-primary" style="display: none;" name="op" type="submit" value="Submit" data-drupal-selector="edit-submit" /></div>
</form>

Answer

If you have jQuery, you don’t want to use HTML inline event handlers like onload.

Try using a <script> section, and use jQuery to submit the form.

<script>
$(function () {
    $("#flagging-remember-edit-form").submit();
});
</script>

Advertisement

Answer