如何使用PHP DOMDocument获取input输入框值 无需通过_POST表单提交

你的代码存在3个核心问题，无法实现预期效果：

• 运行逻辑偏差：PHP属于服务端语言，仅在页面从服务器返回给浏览器之前执行，用户在浏览器输入框中填写的内容属于前端实时状态，没有主动提交到服务端的话，PHP完全无法读取到这部分内容。如果不需要提交数据到服务端处理，直接用前端JavaScript就能实现计算器的计算逻辑，不需要用到PHP。
• DOM对象未加载目标HTML：你创建了全新的DOMDocument对象后，只插入了一段自定义的<div id="calc">...</div>内容，根本没有加载你写的包含num1、num2输入框的HTML代码，自然找不到id为num1的元素。
• input值读取方法错误：input元素的输入值存储在value属性中，不是textContent，就算正确加载了HTML，用textContent也拿不到输入值。

场景1：仅解析本地静态HTML的input默认值 #

如果你只是需要PHP解析本地写死的HTML代码，读取input的默认value属性，可参考以下代码：

<?php
// 你的目标HTML代码
$html = '
<div class="calc">
      <h1 id="title">Calculator</h1>
      <input type="number" id="num1" class="field" value="10">
      <br>
      +
      <br>
      <input type="number" id="num2" class="field" value="20">
      <br>
      =
      <br>
      <input type="number" id="result" class="field" readonly>
 </div>
';

$dom = new DOMDocument('1.0', 'utf-8');
// 加载HTML内容，屏蔽不必要的标签警告
libxml_use_internal_errors(true);
$dom->loadHTML($html);
libxml_clear_errors();

// 读取num1的value属性
$num1_val = $dom->getElementById('num1')->getAttribute('value');
echo $num1_val; // 输出10
?>

场景2：实现可交互的计算器功能 #

如果需要读取用户输入的实时值做加法计算，直接用前端JavaScript实现即可，无需服务端参与：

<div class="calc">
      <h1 id="title">Calculator</h1>
      <input type="number" id="num1" class="field">
      <br>
      +
      <br>
      <input type="number" id="num2" class="field">
      <br>
      =
      <br>
      <input type="number" id="result" class="field" readonly>
 </div>

<script>
// 监听两个输入框的输入事件
const num1 = document.getElementById('num1');
const num2 = document.getElementById('num2');
const result = document.getElementById('result');

function calc() {
  const val1 = Number(num1.value) || 0;
  const val2 = Number(num2.value) || 0;
  result.value = val1 + val2;
}

num1.addEventListener('input', calc);
num2.addEventListener('input', calc);
</script>

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