时间戳

首页 > 解决方案 > 如果留空，如何在打印表单时跳过字段？

php - 如果留空，如何在打印表单时跳过字段？

问题描述

我有一个使用 PHP 构建的表单。虽然它打印得很好，但我想让它查看每个字段，并让它在我决定打印时跳过任何留空的 div/元素/字段。

下面是可打印表单 PHP 文件中的表单代码示例。如果没有填写/选择任何内容，我希望它不会出现在页面上。实现这一目标的最佳途径是什么？

是否像将每个表单元素包装在我用 PHP 代码或其他东西的 print.php 文件中一样简单？

代码

<div class="no-break card">
                    <div class="card-content black-text">
                        <div class="row">
                            <div class="col s12 radio-label">
                                <span class="card-title">PARENT 2</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col s12 radio-label">
                                BLANK TEXT 
                            </div>
                        </div>
                        <div class="row">
                            <div class="col s12">
                                <span class="radio-label">Relationship:</span>
                                <label class="active" class="radio-button">
                                    <input name="par2relation" type="radio" value="mother" />
                                    <span>Mother</span>
                                </label>
                                <label class="active" class="radio-button">
                                    <input name="par2relation" type="radio" value="father" />
                                    <span>Father</span>
                                </label>
                                <label class="active" class="radio-button">
                                    <input name="par2relation" type="radio" value="stepmother" />
                                    <span>stepmother</span>
                                </label>
                                <label class="active" class="radio-button">
                                    <input name="par2relation" type="radio" value="stepfather" />
                                    <span>stepfather</span>
                                </label>
                                <label class="active" class="radio-button">
                                    <input name="par2relation" type="radio" value="uncle" />
                                    <span>uncle</span>
                                </label>
                                <label class="active" class="radio-button">
                                    <input name="par2relation" type="radio" value="aunt" />
                                    <span>aunt</span>
                                </label>
                                <label class="active" class="radio-button">
                                    <input name="par2relation" type="radio" value="grandparent" />
                                    <span>grandparent</span>
                                </label>
                                <label class="active" class="radio-button">
                                    <input name="par2relation" type="radio" value="foster parent" />
                                    <span>foster parent</span>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s6">
                                <input id="par2fname" type="text"></input>
                                <label class="active" for="par2fname">First Name</label>
                            </div>
                            <div class="input-field col s6">
                                <input id="par2lname" type="text"></input>
                                <label class="active" for="par2lname">Last Name</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s6">
                                <input id="par2phone" type="text"></input>
                                <label class="active" for="par2phone">Phone</label>
                            </div>
                            <div class="input-field col s6">
                                <input id="par2email" type="text"></input>
                                <label class="active" for="par2email">Email</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s3">
                                <input id="par2address" type="text"></input>
                                <label class="active" for="par2address">Address</label>
                            </div>
                            <div class="input-field col s3">
                                <input id="par2city" type="text"></input>
                                <label class="active" for="par2city">City</label>
                            </div>
                            <div class="input-field col s3">
                                <input id="par2state" type="text"></input>
                                <label class="active" for="par2state">State</label>
                            </div>
                            <div class="input-field col s3">
                                <input id="par2zip" type="text"></input>
                                <label class="active" for="par2zip">Zip</label>
                            </div>
                        </div>
                    </div>
                </div>

标签： phphtml

解决方案

您可以创建一个 CSS 媒体查询，例如

@media print {
.noprint { display: none; }
}

并noprint通过 JavaScript 将类添加到所有空字段。

document.querySelectorAll('input').forEach(e => {
  if(e.value == '') {
    e.classList.add('noprint');
  }
})

推荐阅读