javascript - 不回显未使用的文本输入

Question

我有一个带有一组问题字段的表单来填写用户，但有些问题通常没有得到回答。表格完成后，有一个下一步按钮可以继续并进入确认页面，用户将在此处仔细检查他/她填写的表格的信息。

问题:是否可以不回显未使用的文本输入字段？

这是表单的示例代码

<!-- Contact Form Wrap Starts -->
<div class="contact-form-wrap">
    <h5 class="sub-heading-1 text-center-xs">Application Form</h5>
<!-- Form Starts -->
<div class="status alert alert-success contact-status"></div>

<form action="confirmation.php" class="contactform"  method="get" 
 name="contactform" enctype="multipart/form-data" role="form">

<!-- Last Name Filed Starts -->
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="lname">Last Name</label>
                    <input type="text" class="form-control" name="lname" 
                     id="lname" required="required" placeholder="Last Name">
            </div>
        </div>

 <!-- First Name Filed start -->
        <div class="col-sm-6">
            <div class="form-group">
                <label for="fname">First Name</label>
                    <input type="text" class="form-control" name="fname" 
                    id="fname" required="required" placeholder="Firs Name">
            </div>
        </div>
    </div>

  <!-- Contact Filed Starts -->
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="mobile">Mobile No</label>
                    <input type="text" class="form-control" name="mobile" 
                 id="mobile" required="required" placeholder="">
            </div>
        </div>
    </div>

    <input type="submit" class="btn btn-success btn-medium animation" value="NEXT" style="margin-left: 0px">

这里是 confimation.php 的代码

<div class="status alert alert-success contact-status1"></div>  
    <form id="main-contact-form1"  style="background-color: #f0f8ff; padding: 20px;" class="contact-form1" name="contact-form1" method="post" action="sendappli.php" role="form">   

<!-- Name start -->                 
    <div class="label-field-pair">
        <label>Name</label>
            <input class="form-control" id='name' name='name' value='<?php 
             echo $_GET["lname"]; ?> <?php echo $_GET["fname"]; ?>' />
    </div>

<!-- Contact start -->        
    <div class="label-field-pair">
        <label>Contact Numer</label>
            <input class="form-control" id='name' name='name' value='<?php 
             echo $_GET["mobile"]; ?> />
    </div>

假设未使用“联系方式”输入字段。

Answer 1

您需要添加if 条件 来检查您的字段是否具有任何值。根据该条件，您将在您的确认页面中显示。

例如，如果未使用联系电话输入字段，或者用户未在联系字段中输入任何数据，那么您需要更新您的联系代码 在下面的方式。

<?php if(!empty($_GET["mobile"])){ ?>
    <!-- Contact start -->        
    <div class="label-field-pair">
        <label>Contact Numer</label>
        <input class="form-control" id='mobile' name='mobile' value='<?php 
         echo $_GET["mobile"]; ?> />
    </div>
<?php } ?>

或者

<?php if(isset($_GET["mobile"]) && $_GET["mobile"]!=""){ ?>
    <!-- Contact start -->        
    <div class="label-field-pair">
        <label>Contact Numer</label>
        <input class="form-control" id='mobile' name='mobile' value='<?php 
         echo $_GET["mobile"]; ?> />
    </div>
<?php } ?>

您需要按照上述方式更新确认页面中的所有其他字段代码，例如Name。

希望它有用!