HTML/PHP表单无输出问题：提交后无内容回显求助

嘿，我看你这个价格检查器表单提交后没动静的问题，大概率是表单缺少关键的处理逻辑，还有一些细节没补全。先把你贴的代码格式化一下，方便咱们看：

<!doctype html> 
<head> 
  <meta charset="UTF-8"> 
  <title>ValleyRangesPriceCheck</title> 
  <link REL='stylesheet' TYPE='text/css' HREF='Style.css'> 
</head> 
<body> 
  <form> 
    <input type="date" name="check-in"> 
    <input type="date" name="check-out"> 
    <input type="number" name="num-of...

几个核心问题： #

1. 表单没有提交目标和行为：默认的<form>标签如果没加action（指定处理提交的脚本/页面）和method（GET/POST），提交后只会刷新当前页面，不会有任何内容回显。
2. 代码不完整：最后一个输入项的标签没闭合，name属性也没写完，这会导致HTML解析错误，直接影响表单功能。
3. 没看到提交按钮：你提到点击提交按钮，但代码里没包含<button type="submit">或者<input type="submit">，这肯定没法触发提交呀。
4. 缺少前端回显逻辑：如果是想在当前页面直接展示提交的内容，需要用JavaScript阻止默认的刷新行为，然后手动获取数据并渲染。

给你个修复后的前端即时回显版本，直接能用： #

<!doctype html> 
<html>
<head> 
  <meta charset="UTF-8"> 
  <title>ValleyRangesPriceCheck</title> 
  <link rel='stylesheet' type='text/css' href='Style.css'> 
</head> 
<body> 
  <!-- 给表单加ID，方便JS绑定事件 -->
  <form id="priceCheckForm"> 
    <input type="date" name="check-in" required> 
    <input type="date" name="check-out" required> 
    <input type="number" name="num-of-guests" placeholder="客人数量" min="1" required>
    <!-- 添加上提交按钮 -->
    <button type="submit">查询价格</button>
  </form>

  <!-- 用来展示结果的区域，默认隐藏 -->
  <div id="result" style="margin-top: 20px; display: none;"></div>

  <script>
    const form = document.getElementById('priceCheckForm');
    const resultDiv = document.getElementById('result');

    form.addEventListener('submit', function(e) {
      // 阻止表单默认的刷新提交行为
      e.preventDefault();

      // 获取表单里的所有数据
      const formData = new FormData(form);
      const checkIn = formData.get('check-in');
      const checkOut = formData.get('check-out');
      const numGuests = formData.get('num-of-guests');

      // 渲染回显内容，这里加了个简单的价格计算逻辑，你可以自己改
      resultDiv.innerHTML = `
        <h3>你的查询结果</h3>
        <p>入住日期：${checkIn}</p>
        <p>退房日期：${checkOut}</p>
        <p>客人数量：${numGuests}</p>
        <p>预估总价：${calculatePrice(checkIn, checkOut, numGuests)} 元</p>
      `;
      resultDiv.style.display = 'block';
    });

    // 模拟价格计算函数，你可以根据实际规则调整
    function calculatePrice(checkIn, checkOut, numGuests) {
      const startDate = new Date(checkIn);
      const endDate = new Date(checkOut);
      // 计算入住天数
      const stayDays = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24));
      if (stayDays <= 0) return 0;
      // 假设每晚基础价150元，每人额外加30元
      return stayDays * (150 + numGuests * 30);
    }
  </script>
</body>
</html>

关键点说明： #

• 加了required属性，确保用户必须填完所有必填项才能提交
• 用JavaScript阻止了表单默认的刷新，改成在当前页面展示结果
• 补全了所有HTML标签，避免解析错误
• 内置了一个简单的价格计算函数，你可以替换成自己的业务逻辑

如果你的需求是提交到后端处理，那只需要给表单加上action和method就行，比如：

<form action="你的后端脚本路径" method="POST"> 
  <!-- 输入项和提交按钮不变 -->
</form>

然后让后端脚本处理POST过来的数据，计算价格后返回结果页面或者回显内容。

最后提醒下：测试的时候可以打开浏览器开发者工具（按F12），看看控制台有没有报错，比如JS语法问题或者HTML解析错误，这能帮你快速定位问题。

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