PHP/JavaScript How to show modal after submitting a form-CodePudding

I have a form with information about some people. Information is coming from a database, and next to each row is a button. When I press the button, modal should open and show only the information about that person. So if I have 5 people, there are also 5 buttons and each buttons should open a modal with information about that person.

My code is almost working. I don't know how to show a modal after pressing the button, because when I press the button the page reloads and the modal will start to show but it won't fully show becuase th page reload will prevent it. My code is working and the modal is showing the correct information, but the problem is that my page reloads after pressing the button,so it doesn't show my modal.

As far as I know I need to implement Ajax to my code but I am not sure how.

Here is my code:

https://github.com/luka3ska/Form

CodePudding user response：

You should try:

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

default value of type is submit. And this triggers a refresh. So the type must be "button"

CodePudding user response：

I think you have a problem about the event, you must stop the default behavior of the button.

You can do that with event.preventDefault().

In Javascript :

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

In JQuery :

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

});

CodePudding user response：

To extend on @Dumhuzy 's anwser and help you understand what's going on. Whenever you have a <button> within <form> that button will submit the form regardless of if it has the attribute type="submit" or not. Submitting a form will cause the page to reload.

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

To prevent the form from submitting you must prevent the default action with javascript.

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