PHP条件渲染时如何复用同一form表单HTML元素避免重复编码

你可以通过以下几种常用方案实现表单代码的复用，无需重复编写：

方案1：抽取公共片段单独引入（最推荐） #

将完全相同的表单代码抽成独立的PHP文件，在需要的位置直接引入即可，后续修改表单只需要改这一个文件。

1. 新建pardot-form.php，内容为表单代码：

<form>
    <div class="form-group">
        <label for="formGroupExampleInput">First Name:</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
    </div>
    <div class="form-group">
        <label for="formGroupExampleInput2">Last Name:</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
    </div>
    <div class="my-3">
        <button type="submit" class="btn btn-primary" disabled>Submit</button>
    </div>
</form>

2. 改造原业务代码：

<?php
$mode = get_field('mode');
?>

<?php if ($mode == 'page'): ?>
    <div class="container my-4">
        <div class="row justify-content-md-center pardot-form">
            <div class="col-md-6 col-lg-6">
                <h3>Pardot Form</h3>
                <?php include 'pardot-form.php'; ?>
            </div>
        </div>
    </div>
<?php else: ?>
    <div class="modalElement" data-toggle="modal" data-target="#modal-<?= $id ?>"></div>
    <div class="modal fade" id="modal-<?= $id ?>" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Pardot Form</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&#10005;</span>
                    </button>
                </div>
                <div class="modal-body">
                  <?php include 'pardot-form.php'; ?>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
<?php endif; ?>

方案2：单文件内用变量存储表单内容 #

如果不想拆分多文件，可以先把表单HTML赋值给变量，在需要的位置直接输出：

<?php
$mode = get_field('mode');
// 提前定义表单内容
$pardot_form = '
<form>
    <div class="form-group">
        <label for="formGroupExampleInput">First Name:</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
    </div>
    <div class="form-group">
        <label for="formGroupExampleInput2">Last Name:</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
    </div>
    <div class="my-3">
        <button type="submit" class="btn btn-primary" disabled>Submit</button>
    </div>
</form>
';
?>

<?php if ($mode == 'page'): ?>
    <div class="container my-4">
        <div class="row justify-content-md-center pardot-form">
            <div class="col-md-6 col-lg-6">
                <h3>Pardot Form</h3>
                <?= $pardot_form ?>
            </div>
        </div>
    </div>
<?php else: ?>
    <div class="modalElement" data-toggle="modal" data-target="#modal-<?= $id ?>"></div>
    <div class="modal fade" id="modal-<?= $id ?>" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Pardot Form</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&#10005;</span>
                    </button>
                </div>
                <div class="modal-body">
                  <?= $pardot_form ?>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
<?php endif; ?>

注意事项 #

如果你的业务场景存在两种布局同时渲染的可能，需要修改表单内元素的id属性避免重复，你可以在引入时传入自定义前缀区分id，防止label关联、JS选择器出现异常。

内容的提问来源于stack exchange，提问作者user16645285