拖拽后表单传JavaScript变量到PHP时$_POST为空，求非Ajax/Cookie方案

• 表单标签拼写错误：你的表单闭合标签写成了</from>，正确应为</form>。标签错误会导致浏览器无法识别完整的表单结构，提交时不会携带表单内的输入字段数据。
• PHP接收参数名不匹配：PHP代码中你用$_POST['pos']获取值，但隐藏输入框的name属性是position，需改为$_POST['position']才能正确拿到传递的值。
• JavaScript执行时机问题：当前<script src="essai.js"></script>放在表单之前，此时DOM还未渲染出id="position"的元素，JS代码执行时找不到目标元素，无法设置其value值。解决方式二选一：
  • 将script标签移至表单之后，确保DOM加载完成后再执行JS：

    <form action="profil.php" method="post">
       <input type="image" src="<?php echo $image;?>" name="click">
       <input type="hidden" name="position" value="" id="position">
    </form>
    <script src="essai.js"></script>
    

  • 在JS中监听DOM加载完成事件，再执行赋值操作：

    document.addEventListener('DOMContentLoaded', function() {
        var pos = document.getElementById('position');
        pos.value = "Hello";
    });
    

修正后的完整代码示例 #

profil.php：

<?php
if(isset($_POST['click_x'])){
   $position = $_POST['position'];
   info($position, 900, 800, 'red');
}
?>
<form action="profil.php" method="post">
   <input type="image" src="<?php echo $image;?>" name="click">
   <input type="hidden" name="position" value="" id="position">
</form>
<script src="essai.js"></script>

essai.js：

document.addEventListener('DOMContentLoaded', function() {
    var pos = document.getElementById('position');
    pos.value = "Hello";
});

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