PHP燃油计算器表单如何根据用户回答动态显示对应输入项

首先明确回答你的疑问：可以在PHP代码块中创建表单输入项，PHP原生支持嵌入HTML动态渲染内容，完全可以通过逻辑判断决定是否输出某个表单元素。

你当前的代码存在两个明显问题：

• 缺少「是否购买食品杂货」的前置选择项，用户无法反馈是否有杂货消费
• 你把判断逻辑写在了groceries输入框的属性区域，且判断用了单等号=（属于赋值操作，不是相等判断），语法和逻辑位置都不正确

方案1：纯PHP服务端实现（无需前端JS，提交后显示输入框） #

你可以先增加是否购买杂货的单选按钮，用户提交表单后PHP判断选择结果，决定是否渲染杂货消费金额输入框，完整修改后的表单代码如下：

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
    How many miles did you drive? <input type="text" name="milesDriven" value="<?php echo $milesDriven ?? ''; ?>">
    <span class="error">* <?php echo $milesDrivenErr ?? ''; ?></span>
    <br><br>
    What is your cars miles per gallon?: 
    <input type="text" name="milesPerGallon" value="<?php echo $milesPerGallon ?? ''; ?>">
    <span class="error">* <?php echo $milesPerGallonErr ?? ''; ?></span>
    <br><br>
    Type of gas used: 
    <br><br>
    <input type="radio" name="gasType" <?php if (isset($gasType) && $gasType=="87 octane - 1.89$/gal") echo "checked";?> value="1.89">87 octane - 1.89$/gal
    <br><br>
    <input type="radio" name="gasType" <?php if (isset($gasType) && $gasType=="89 octane - 1.99$/gal") echo "checked";?> value="1.99">89 octane - 1.99$/gal
    <br><br>
    <input type="radio" name="gasType" <?php if (isset($gasType) && $gasType=="92 octane - 2.09$/gal") echo "checked";?> value="2.09">92 octane - 2.09$/gal
    <br><br>
    <!-- 新增是否购买杂货的选择项 -->
    Did you buy groceries?
    <br><br>
    <input type="radio" name="buy_groceries" value="yes" <?php if (isset($_POST['buy_groceries']) && $_POST['buy_groceries'] == 'yes') echo 'checked'; ?>> Yes
    <input type="radio" name="buy_groceries" value="no" <?php if (isset($_POST['buy_groceries']) && $_POST['buy_groceries'] == 'no') echo 'checked'; ?>> No
    <br><br>
    <!-- PHP判断是否输出杂货金额输入框 -->
    <?php
    if (isset($_POST['buy_groceries']) && $_POST['buy_groceries'] == 'yes') {
    ?>
    Grocery spending amount: <input type="text" name="groceries_amount" value="<?php echo isset($_POST['groceries_amount']) ? htmlspecialchars($_POST['groceries_amount']) : ''; ?>">
    <span class="error">* <?php echo $groceriesAmountErr ?? ''; ?></span>
    <br><br>
    <?php
    }
    ?>
    <input type="submit" name="submit" value="Submit">
</form>

方案2：JS动态实现（无需提交表单，实时显示输入框） #

如果要实现用户选「是」立刻显示输入框、不需要等待表单提交，可以加少量前端JS代码，示例如下：
首先给杂货输入框加个隐藏的外层容器，再加入JS监听逻辑：

<!-- 新增是否购买杂货的选择项 -->
Did you buy groceries?
<br><br>
<input type="radio" name="buy_groceries" value="yes"> Yes
<input type="radio" name="buy_groceries" value="no"> No
<br><br>
<!-- 默认隐藏的杂货输入框容器 -->
<div id="grocery_input" style="display:none;">
    Grocery spending amount: <input type="text" name="groceries_amount" value="<?php echo isset($_POST['groceries_amount']) ? htmlspecialchars($_POST['groceries_amount']) : ''; ?>">
    <span class="error">* <?php echo $groceriesAmountErr ?? ''; ?></span>
    <br><br>
</div>

<!-- 新增JS逻辑 -->
<script>
const buyGroceriesRadios = document.querySelectorAll('input[name="buy_groceries"]');
const groceryInput = document.getElementById('grocery_input');
buyGroceriesRadios.forEach(radio => {
    radio.addEventListener('change', () => {
        groceryInput.style.display = radio.value === 'yes' ? 'block' : 'none';
    })
})
</script>

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