时间戳

首页 > 解决方案 > html选项值的PHP模板if语句

php - html选项值的PHP模板if语句

问题描述

假设您有以下 html select 语句：

<div class="filter-align contact-select contact-select-distribution">
   <p class="distribution_p_ml">I want to contact</p>
   <select name="filter0" id="filter0" class="form-control contact_form-control">
       <option value="choose">Please Choose...</option>
       <option value="external">External</option>
       <option value="management">Management</option>
   </select>
</div>

通过 PHP 模板，我想创建一个 If 语句，如果选择了 select 语句“filter0”中的选项“external”，则将显示另外两个 select 语句。

到目前为止，我创建了以下代码段：

<?php if ($_POST['filter0'] === 'external') : ?>
   <div class="distribution-interest">
       <div class="filter-align contact-select contact-select-distribution">
           <p class="distribution_p_ml">I'm interested in</p>
           <select id="filter1" class="form-control contact_form-control">
               <option value="0">Please Choose...</option>
               <option value="1">Option 1</option>
               <option value="2">Option 2</option>
           </select>
       </div>

       <div class="filter-align contact-select contact-select-distribution">
           <select id="filter2" class="form-control contact_form-control">
                <option value="0">State (not chosen)</option>
                <option value="1">Option One</option>
                <option value="2">Option Two</option>
           </select>
       </div>
     </div>
<?php endif; ?>

现在，默认情况下不会显示另外两个 select 语句，这是正确的，但如果选择“external”选项，它们也不会显示。我在这里做错了什么？

我希望有人可以帮助我！

标签： phphtmltemplating

解决方案

要了解为什么您的代码不起作用，您必须了解 php 在这里的作用。

PHP 服务器接收页面的请求。然后它“创建”页面并将其发送回最初请求它的客户端。

客户端然后接收 html 页面。一旦它接收到 html 页面，它就可以用它做任何它想做的事情。如果客户端在您的选择框中选择了一个声音，您的 php 服务器将永远不会知道它。因此它不能在之后更改 html。

这就是为什么你不能以你想要的方式做这样的事情。

但是您可能知道很多网站都在做这类事情，实际上有多种方法可以处理它。

这是一种使用香草 javascript 的方法。

Javascript 是您正在寻找的。

Javascript 允许检查用户对 html 的操作，并且可以在使用 html 时更改它。

您的代码可能如下所示。

<style>
/* IF AN ELEMENT HAS A class="hidden" property then it will not be visible  */
.hidden { 
    display: none;
}
</style>
 
<form>
    <div class="filter-align contact-select contact-select-distribution">
        <p class="distribution_p_ml">I want to contact</p>
        <select name="filter0" id="filter0" class="form-control contact_form-control">
            <option value="choose">Please Choose...</option>
            <option value="external">External</option>
            <option value="management">Management</option>
        </select>
    </div>
 
    <div class="distribution-interest hidden" id="second-part"> <!-- AS YOU CAN SEE IT IS OF CLASS HIDDEN: SO THIS PART IS HIDDEN -->
        <div class="filter-align contact-select contact-select-distribution">
            <p class="distribution_p_ml">I'm interested in</p>
            <select id="filter1" class="form-control contact_form-control">
                <option value="0">Please Choose...</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </select>
        </div>

        <div class="filter-align contact-select contact-select-distribution">
            <select id="filter2" class="form-control contact_form-control">
                    <option value="0">State (not chosen)</option>
                    <option value="1">Option One</option>
                    <option value="2">Option Two</option>
            </select>
        </div>
    </div>  
</form>

<script>

    document.addEventListener('DOMContentLoaded', ()=>{ //waiting for the page to load

        let firstFilter = document.getElementById('filter0'); // selecting the first select box
        let secondPart  = document.getElementById('second-part'); //selecting the hidden part
        firstFilter.addEventListener('change', ()=>{ //when the first selection changes
            
            let selection = firstFilter.value; //get the selected value
            if(selection == 'external') { //if it is external
                secondPart.classList.remove('hidden'); //no more hidden
            }
            else { //else
                secondPart.classList.add('hidden'); //hide the second part (javascript automatically doesn't add the class if the class is already there)
            }

        })

    })

</script>

然后，您可以在表单中添加一个“提交”按钮，以将输入数据发送到新的 php，以便使用它（将其保存在数据库中或做任何您想做的事情）。但请注意：在您的 php 中，您必须验证您的数据（因为黑客可以选择与“外部”不同的选项，然后编写自己的 javascript 代码以使表单的第二部分可见）。

如果您只想在 php 中完成这一切，我建议您编写多个页面。在第一页中，您有一个只有第一个选择框的表单。如果选择是“外部”，它将带您到第二页，否则它将带您到最后一页。

表单的“action”属性告诉发送输入后将执行哪个 php 文件。

/page1.php：

<form method="POST" action="/page2.php" >
    <div class="filter-align contact-select contact-select-distribution">
        <p class="distribution_p_ml">I want to contact</p>
        <select name="filter0" id="filter0" class="form-control contact_form-control">
            <option value="choose">Please Choose...</option>
            <option value="external">External</option>
            <option value="management">Management</option>
        </select>
    </div>
    <input type="submit">
</form>

/page2.php：

<?php 

if($_POST['filter0'] != 'external') {
    header('Location: /final.php ');
    exit();
}

?>

<form method="POST" action="/final.php" >
    <div class="distribution-interest hidden" id="second-part"> <!-- AS YOU CAN SEE IT IS OF CLASS HIDDEN: SO THIS PART IS HIDDEN -->
        <div class="filter-align contact-select contact-select-distribution">
            <p class="distribution_p_ml">I'm interested in</p>
            <select id="filter1" class="form-control contact_form-control">
                <option value="0">Please Choose...</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </select>
        </div>

        <div class="filter-align contact-select contact-select-distribution">
            <select id="filter2" class="form-control contact_form-control">
                    <option value="0">State (not chosen)</option>
                    <option value="1">Option One</option>
                    <option value="2">Option Two</option>
            </select>
        </div>
    </div>  
    <input type="submit">
</form>

最后，还有更高级的方法可以通过 ajax 和框架来实现，但我认为现在不应该写这些。

希望我对你有所帮助。

推荐阅读