nesting <button> inside <form> causes unexpected behavior - php

Question

I'm using ZURB Foundation 6.4 (ZURB template) for my Website.
I wanted to test out my newly implemented backend and tried to gather some input and send it to my php backend via jquery AJAX.
Meanwhile, I've managed to do so, but I encountered a very strange problem.
I've used the following building block:
https://foundation.zurb.com/building-blocks/blocks/floated-label-wrapper.html
I modified it a little, but just concerning the id's and placeholders and such stuff, nothing functional.
In the end, I had this markup used as a partial for one of the views I've generated:
<form class="callout text-center">
<h2>Become A Member</h2>
<div class="floated-label-wrapper">
<label for="full-name">Forename</label>
<input type="text" id="forenameInput" name="forename input" placeholder="forename">
</div>
<div class="floated-label-wrapper">
<label for="email">Surname</label>
<input type="text" id="surnameInput" name="surname input" placeholder="surname">
</div>
<div class="floated-label-wrapper">
<label for="pass">Email</label>
<input type="email" id="emailInput" name="email input" placeholder="email">
</div>
<button class="button expanded" id="submitUserDataButton">Sign up</button>
</form>
The button at the very end was once an input with type submit, I've changed that to a button since it suited my needs better.
However, the behavior, both with the input and the button, was always the same as long as the button/input was nested inside the form element:
After clicking it, the site would reload and the called function would execute until it hit my ajax.
Now for completeness, I'll post the AJAX here (it was wrapped intp/called by another function but this doesnt matter here):
function sendUserDataToBackend(userDataInputCollection){
console.log("sendUserDataToBackend was entered")
return $.post("http://localhost:8099/test2.php"
}).then((response) => {
console.log(response)
})
}
It entered the function and the console.log happened and then...nothing. The AJAX itself never executed.
I couldn't really find out why that is, I just figured out how to circumvent it.
I just put my button outside the form element and everything worked fine.
Now, why is that?
Why does having the button nested inside the form element cause such trouble, like causing a page reload and then even preventing an AJAX call from happening?
I mean, forms are made for taking input and sending it to the backend, aren't they? Or have they "gotten old" in some way and one should avoid using them?
How do these elements work, what are their "side effects"?
EDIT:
Here is the handler Code as requested
The logic for the handler is exported from file A
export async function executeRegistration(){
let userDataInputCollection = getUserDataInput()
userDataInputCollection = JSON.stringify(userDataInputCollection)
console.log(userDataInputCollection)
await sendUserDataToBackend(userDataInputCollection)
}
function getUserDataInput(){
let userDataForename = $('#forenameInput').val()
let userDataSurname = $('#surnameInput').val()
let userDataMail = $('#emailInput').val()
let userDataInputCollection = {
forename : userDataForename,
surname : userDataSurname,
email : userDataMail
}
return userDataInputCollection
}
function sendUserDataToBackend(userDataInputCollection){
console.log("sendUserDataToBackend was entered")
return $.post("http://localhost:8099/test2.php", {
userDataInputCollection : userDataInputCollection
}).then((response) => {
console.log(response)
})
}
And imported to file B, where it is attached via jquery:
import * as registrationJS from "./lib/registrationLogic.js"
$('#submitUserDataButton').on('click', function(){
registrationJS.executeRegistration()
})

Answer 1

Clicking a submit button will submit the form. That's the point of submit buttons!.
The browser will leave the page (and load the new page). JavaScript running in the old page will be cancelled (because JS runs in the page, leaving the page quits the program).
If you want to use Ajax instead of regular form submission, then you need to prevent the regular form submission.
Note that best practice is also to bind to the form's submit event and not the button's click event. This better captures form submissions triggered without using the button.
Replace:
$('#submitUserDataButton').on('click', function(){
registrationJS.executeRegistration()
})
With:
$('form').on("submit", function (event) {
event.preventDefault();
registrationJS.executeRegistration();
});