Whenever a user visits a page that prompts them to register, I aim to present a Bootstrap modal dialogue asking for their ID and password. Upon clicking the submit button, my objectives are:
- To verify the password and complete sign-up
- To close the dialog
- To direct the user to another page displaying additional information
The current issue arises once the Submit button is pressed. Despite going through validation and attempting to hide the Bootstrap modal dialog, the page refreshes, causing the dialog to reappear repeatedly.
Here's the JSFiddle link
Below is the HTML content:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- All relevant script sources -->
<title>Immedia Signup</title>
<!-- Relevant CSS links -->
<style>
/* Custom styling rules */
</style>
</head>
<body onload="onloadHandler()">
<header class="masthead mb-auto">
<div class="inner">
<h1 class="masthead-brand">Modal Test Page</h1>
</div>
</header>
<!-- Modal containing sign-up form -->
</div>
<script>
// JavaScript function definitions
// Event listener to remove modal when hidden
$("#signupModal").on("hidden.bs.modal", function() {
$("body").removeClass("signupModal");
});
// Submission event for sign up form
$("#submit-button").click(function() {
// Form data extraction and processing logic
try {
// Sign-up process execution
// Redirect user upon successful sign-up
} catch (err) {
console.error("Error encountered during sign-up: ", err);
}
});
// Initial function trigger on page load
function onloadHandler() {
console.info("Page loaded");
$("body").addClass("#signupModal");
$("#signupModal").modal("toggle");
}
</script>
</body>
</html>