We Keep Coding

PHP/JavaScript How to show modal after submitting a form

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

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"

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 ...
});

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()
});

How to stop SAPUI5 Button from submitting the form

I have a simple mytable.view.xml with a table and a button. This table is just one among others in a form and all the tables are handled through different view.xml.
<mvc:view>
<l:VerticalLayout>
//Code for table headers and table
</l:VerticalLayout>
<Button id="myButton" text="test" visible="true" press="onMyButtonClicked"/>
</mvc:view>
Controller:
onMyButtonClicked: function(){
window.location.href = "http://example.com/;
}
onMyButtonClicked is getting invoked when I click on button, but that is being overridden by form submit. Since there is no logic to handle this submit, the page is just reloading instead of navigating to http://example.com/. In developer tools of browser I noticed that the navigate to example.com is being triggered and is cancelled.
One thing I tried and worked was inspecting this button on browser and adding a onclick="return false;" in the button tag. But from sap.m.button I cannot do this.
Tried event.PreventDefault(). This didn't work either.
Is there any other way to stop this button from behaving like a submit button?

A button won't trigger anything if the press event is not bound. For your case why not just remove the press event binding to a callback? Am I missing something? UI5 buttons don't behave like HTML button of type "submit" inside a form.

input `type=image` onclick solution works, but why?

I had a problem using input type=image tag with onclick to run some javascript. Works perfectly with input type=button but, when used on an image input, it would run the script which changed the DOM (added images to a div) but would clear back to the default page within fractions of a second, the added images showing as a brief flash then disappearing.
So, using google, I eventually found a solution. I changed:
<input type="image" id="greenGoButton" src="Images2/goButton.png" alt="Submit" onclick="loopForm(document.thisForm); getPlates(document.thisForm);">
to:
<input type="image" id="greenGoButton" src="Images2/goButton.png" alt="Submit" onclick="loopForm(document.thisForm); getPlates(document.thisForm); return false;">
So, adding a return false; statement fixed it.
But why? This is bugging me. Why does it work without return false on a button but not when an image is used instead? Surely the internet is full of buttons made of images.

By default, type='image' creates a button that submits the enclosing form and reloads the page, by adding return false at the end of the click handler, you are telling Javascript to prevent the default behavior which is submitting the form and reloading the page.
You can also access the event object inside the click handler and call preventDefault() on it without doing return false at the end; event.preventDefault() which also does the same thing.
In short, return false at the end of an event handler prevents the default behavior from happening

Physical mouse click vs simulated button click?

Hello Stackoverflow!
I am experimenting with getting a chrome extensions cript to click a page button to trigger an AJAX request, however it would seem that physically clicking said button is not the same as using the following:
document.getElementsByTagName('input')[10].click();
the results of the getElements line is this:
<input type="submit" value="Continue ...">
Using document.forms sort of works, but unfortunately reloads the page, which is not what happens when the Ajaxrequest is fired by the click event.
document.forms[1].submit();
Calling the form returns the following:
<form
action="/battle.php" method="post" name="2913" id="2913" onsubmit="get('/battle.php', '', this);
disableSubmitButton(this);
return false;">…</form>
Doesn't seem obvious to a beginner programmer like me, why using the .click(); in F12 console (chrome) would be any different from the physical click. Also i have verified (sorf of) that the button on the screen is in fact the one i'm calling with the getElementsByTagName('input').

The page reloads because the type of the button is "submit". You could attach an event handler to the "click" button that can submit the form without reloading the page. Your code will look something like this:
Using JQuery:
$('#submitButton').on('click', function(e){
e.preventDefault(); // stops default submit
$('#2913').submit(); // or the ID of your form
});
And your HTML will be :
<input type="button" value="Continue ..." id="submitButton">

jQuery only ignoring a click trigger during a trigger chain

I have the following code:
$( "#check-button" ).on( "click", function() {
$("#button_cart").click();
$('.checkout-button').click();
});
I have this jQuery click event. What I want to do is, on clicking the check-button, the first line inside the function is updating the cart (which reloads the page) and then the second line inside the function is the checkout button, which takes me to the next (checkout) page.
But here only the first event is firing. Is this because the page is reloaded on "button-cart" clicking? How do I solve it?

That's correct. The second click actually could be working but in some kind of limbo between the click and the load and you wont see it.
The solution is to "handle" the reload event, I put it between "" because this event can't be handled ( as far as I know) but you can make some hacks.
First, why is reloading the page? Are you adding new content?
In this case just call the click in the content added with a load handler like $(document).ready();

Here is how i did it: Using localstorage.
Just saved the value of someVariable on check-button click ( along with button-cart click) and on page reload i checked if the value is set. If it is set, i unset it and clicked the next button.
Here is the link
This was really great help from SO. Thank u SO