隐藏的 ACF 前端表单不保存答案

【问题标题】：Hidden ACF front end form not saving隐藏的 ACF 前端表单不保存
【发布时间】：2017-10-25 10:55:12
【问题描述】：

我正在使用front end form functionality of Advanced Custom Fields，它在标准页面上工作正常，但当它位于隐藏的 div 中时（使用 Jquery 隐藏它或将 css 设置为不显示），更新按钮停止工作并且没有数据保存。它也不会在控制台中显示任何错误。

我该如何解决这个问题？隐藏 ACF 表单是不可或缺的。

这是我用来显示一组特定字段的代码：

<?php $activity_information = array(
    'post_id' => $ID, // post id to get field groups from and save data to
    'field_groups' => array(1781), // this will find the field groups for this post (post ID's of the acf post objects)
    'form_attributes' => array( // attributes will be added to the form element
        'class' => ''
    ),
    'return' => add_query_arg( 'updated', 'true', get_permalink() ), // return url
    'html_field_open' => '<div>', // field wrapper open
    'html_field_close' => '</div>', // field wrapper close
    'html_before_fields' => '', // html inside form before fields
    'html_after_fields' => '', // html inside form after fields
    'submit_value' => 'Update', // value for submit field
    'updated_message' => '', // default updated message. Can be false to show no message
); ?>               
<?php acf_form( $activity_information ); ?>

CSS：

.reveal-area {
    display: none;
}

这是它正在生成的（三个点代表所有字段）：

<section class="row reveal-area">
    <div class="columns">
        <form id="acf-form" action="" method="post">
            <div id="acf-form-data" class="acf-hidden">
                <input type="hidden" id="_acf_post_id" name="_acf_post_id" value="1773"> <input type="hidden" id="_acf_nonce" name="_acf_nonce" value="6798af667b"> <input type="hidden" id="_acf_validation" name="_acf_validation" value="1"> <input type="hidden" id="_acf_ajax" name="_acf_ajax" value="0"> <input type="hidden" id="_acf_changed" name="_acf_changed" value="0"> <input type="hidden" id="_acf_form" name="_acf_form" value="cllBUjlDU09QMUtyVXBKalJ3VmVsS3lFQXpPcHEwUm5KNmdHRzVrYXRnY0RCT0xrUndDMWhQTXg4UVJzZm1xTHlVQllDWkFrV2R4ZzNmT3FQdjhnNWJSMFdaTUNHYlNjNzZ5OEcvbzBkOHROcW5BYXlRYmdQZ1R0bW93UmJyUXV0MEZQVmZkWlZSbEVGV2hqS1E2dHJxSjFxR2xuU1gxZUwydGRrR254VjZuTTRHdFV0WXBmRGJTeS9KQ2VIbkkxR0Rxcit0ZWlDck9IL2pOYk16ODVqQ28reFBNR05QSWRUc3R2Z1E2L0tnbWZrMXlhRDRCNU5ZWFk0M0MyTkpqNkZpa254NXBudk1qZk5uNytRZDN0NmFpN0FOdkFXTWRDYXNUd2gzRXJxeXNqaHJUaU1rRTJTMENiZVhsNHV6b1ZWbGUxTHJwTm1YQTEzUlozcmNrWU5mdFdYSjF3WDNINEtJWGdVREsvNTNFRzg5dHVKVGxqTmFILyt1ci9tOGNDYTYyVUk1eDB2ZUZCdEg3R3JHQmhtSWZyczkvS3diOHIwY2FwOWNISTdmWlhsK241Tmdib2UyZjlNM1o0RnhCOW5QdjRiL2t5cm1HVTlmR3BCek1mYnAyUkFRRWlmNlJqcjdTS3g2dmdUOCtvRjBWL28rcFhmOWVrV2ViV3ZkUHN4NVZuOXBIMzR4RStUQUxMTksyVnN0YjNBVnFBU1crb3pWUzA3TUpSVkJJN2RjYmxnWnUzMk95RE42b2tqc1ROdnFVRFpmRFZSU3BvaFIxOWkvS042WHh6NGlIQlRBSlBRNXJVV1pHL0ZRL2Nid3RxbmRkcjNHREd2bHlkTmFnMnUrYjhRc0FpWjhhNkx1d3JoUU5yYi9kYnNxSWllSnU1a3E5bmhCNU9mSS8xK08rZ3VLN0tsYWZYV0N0ZElqeFJ2TkNBNEhsVC9ocHAwaklIMHZGTkFjKzBuZEhrZzU4cW9TRzNNL0k3Z2puWDAyRWZoOHNaeXF1UHlOUHR6aTA1L1B1QVVWMXd3WC9ybGlQOCsyVGZRdFdDaXpsbElZbll1UVJzQ3lpQjBoaEx0cmNYbG5hdTV3bGpNSVZab1ZhSUltWXRBWnhGMVplVjVFZXNBNzMzM0dSZmx1YWErUmE2WlpnYU11WUR2VS9kU1ZPRFlVNWZMYkZkNVZtZXZLMnBSN2t2K28xVzBQbDh0ZU94MUN4VEE0VDRBU0MxSGdHc2htZjNWR1phbUlGcUtnQ0h2d1Q0cDEwUUFjM1cwQkZ4RzltWUN2YjdwSTBhcGxtYkp4a05rRG4yK3JwSERFY1A5TFRFNGpJUzBmZXZ2ZkdZWHRzcUdNaXk2QTJSbFMxdnZmOURobE5xdGdBRWtieFZjZnRFbThrWFdWa2xWaVpFSnFQOWg0NDZNWDlrOXdjQzFXS0lsUWt4T1pRWENpd246Ok07hUIWm2U5p0Q9mApuvuM=">
            </div>

            ...

            <div class="acf-field acf-field-text acf-field--validate-email" style="display:none !important;" data-name="_validate_email" data-type="text" data-key="_validate_email">
                <div class="acf-label">
                    <label for="acf-_validate_email">Validate Email</label>
                </div>

                <div class="acf-input">
                    <div class="acf-input-wrap">
                        <input type="text" id="acf-_validate_email" name="acf[_validate_email]">
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="acf-form-submit">
        <input type="submit" class="acf-button button button-primary button-large" value="Update">
    </div>
</section>

【问题讨论】：

运行时 HTML 的外观如何？
@Stender 刚刚更新了问题
@Rob 它必须隐藏（显示：无）还是用户看不见？您可以利用可见性 CSS 规则。
@ProEvilz 理想情况下，我需要将其完全隐藏。使用可见性 CSS 规则会在表单所在的位置留下一个很大的空白区域。就像表单的某些功能在隐藏时不会触发。
@Rob 将其绝对定位，这样它不会影响其他元素怎么样？

标签： wordpress advanced-custom-fields

【解决方案1】：

当您没有对表单的字段进行更改时，ACF 会忽略提交。通常，表单有一个隐藏字段，其 ID 为 _acf_changed，值 0。在编辑字段时，此值更改为 1。所以尝试在表单之后添加 JS 脚本：

<script type="text/javascript">
    var is_edit=document.getElementById('_acf_changed');
    is_edit.value='1';
</script>

【讨论】：