PHP/JavaScript如何在提交表单后显示模态

Question

我有一个表格，里面有一些人的信息。信息来自数据库，每一行旁边都有一个按钮。当我按下按钮时，modal应该打开并只显示该人的信息。因此，如果我有5个人，也有5个按钮，每个按钮都应该打开一个包含该人信息的模态。

我的代码几乎可以工作了。我不知道按下按钮后如何显示模态，因为当我按下按钮时，页面会重新加载，模态会开始显示，但它不会完全显示，因为页面重新加载会阻止它。我的代码正在工作，模态显示了正确的信息，但问题是我的页面在按下按钮后重新加载，所以它不会显示我的模态。

据我所知，我需要在代码中实现Ajax，但我不确定如何实现。

这是我的代码：

https://github.com/luka3ska/Form

Answer 1

您应该尝试：

<button name="test" type="button" onclick="onClick()">Click</button>

类型的默认值为提交。这会触发刷新。所以类型必须是">按钮"；

Answer 2

我认为您对事件有问题，您必须停止按钮的默认行为。

您可以使用event.prventDefault((.来完成此操作

在Javascript中：

document.getElementById("buttonId").addEventListener("click", function(event){
event.preventDefault()
// Ajax request here ...
});

在JQuery中：

$("buttonId").click(function(event){
event.preventDefault();
// Ajax request here ...
});

Answer 3

扩展@Dumhuzy的anwser并帮助您了解发生了什么。每当您在<form>中有<button>时，无论它是否具有属性type="submit"，该按钮都会提交表单。提交表单将导致页面重新加载。

<form action="">
<button>Will reload the page</button>
<button id="prevent">Will prevent reload</button>
</form>

要阻止表单提交，必须使用javascript阻止默认操作。

document.getElementById("prevent").addEventListener("click", function(event){
event.preventDefault()
});