点击按钮时如何修改form表单元素的action属性

原有代码问题 #

• 执行顺序错误：PHP在服务端执行时，先输出了<form>标签的action属性，之后才对$page变量赋值，首次加载页面时$page未定义会触发PHP报错。
• 逻辑链路错误：$_POST的判断是服务端接收POST请求后的逻辑，无法在用户前端点击按钮、还未提交请求的阶段，提前修改表单的action属性。

最优实现方案（无需额外JS，HTML5原生支持） #

直接给提交按钮添加formaction属性，该属性会覆盖form表单本身的action配置，点击不同按钮会自动提交到对应地址，无需手动控制action赋值：

<?php
// 先给$page设置默认值，避免首次加载报错，可替换为你实际的默认提交页面对应名称
$page = 'default';
if(isset($_POST['update'])) {
    $page='book_update';
}
if(isset($_POST['delete'])) {
    $page='book_delete';
}
if(isset($_POST['back']))
{
    $page='patientpage';
}
?>
<!-- form的action可以写默认地址，按钮的formaction会覆盖它 -->
<form action="<?php echo $page; ?>.php" method="post">
    <!-- 其他表单元素 -->
    
    <button type="submit" name="update" formaction="book_update.php">更新</button>
    <button type="submit" name="delete" formaction="book_delete.php">删除</button>
    <button type="submit" name="back" formaction="patientpage.php">返回</button>
</form>

兼容低版本浏览器的JS方案 #

如果需要兼容不支持HTML5formaction属性的老旧浏览器，可以通过JS动态修改form的action属性：

<?php
// 先设置默认$page
$page = 'default';
if(isset($_POST['update'])) {
    $page='book_update';
}
if(isset($_POST['delete'])) {
    $page='book_delete';
}
if(isset($_POST['back']))
{
    $page='patientpage';
}
?>
<form id="myForm" action="<?php echo $page; ?>.php" method="post">
    <!-- 其他表单元素 -->
    
    <button type="submit" name="update" data-action="book_update.php">更新</button>
    <button type="submit" name="delete" data-action="book_delete.php">删除</button>
    <button type="submit" name="back" data-action="patientpage.php">返回</button>
</form>

<script>
// 给所有提交按钮绑定点击事件，点击时修改form的action
const form = document.getElementById('myForm');
const submitBtns = form.querySelectorAll('button[type="submit"]');
submitBtns.forEach(btn => {
    btn.addEventListener('click', function() {
        form.action = this.dataset.action;
    });
});
</script>

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