We Keep Coding

How do I create a pop up modal on successful form submission?

I have an HTML form connected to formsubmit.co form endpoint.
<form action="https://formsubmit.co/my#email.com" method="POST" class="form">
<input type="text" name="name" required>
<input type="email" name="email" required>
<button type="submit">Submit</button>
</form>
I've added <input type="hidden" name="_next" value="https://mydomain.co/thanks.html"> to redirect back to the original page after submission is required.
I've also disabled the reCAPTCHA using <input type="hidden" name="_captcha" value="false">, so when the form is submitted, the page just reloads.
The problem is the user doesn't know anything has happened after form submission, the page just loads for some time and then reloads.
I don't want to create another page for this, I actually want to use a modal for it.
I tried adding a submit event listener, and when that event is triggered, an alert is shown; but the alert shows even before the form submission process begins.
function alertSubmit() {
alert('Your details were successfully received.');
}
const form = document.querySelector('form');
form.addEventListener('submit', alertSubmit);
How can I display an alert immediately after the form is successfully submitted and not when the submit button is clicked?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<form action="https://formsubmit.co/your#email.com" method="POST" class="form">
<input type="text" name="name" required>
<input type="email" name="email" required>
<button type="submit">Submit</button>
</form>
<script>
$(document).ready(function(){
$('.form').on('submit', function(){
swal("Title", "Message Content", "success", {
button: "Ok",
});
});
});
</script>

You can do following changes:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form action="https://formsubmit.co/your#email.com" method="POST" class="form">
<input type="text" name="name" required>
<input type="email" name="email" required>
<button type="submit">Submit</button>
</form>
<script>
$(document).ready(function(){
$('.form').on('submit', function(){
alert('Your details were successfully received.');
});
});
</script>

Default 'input is required/Please fill out this field' message doesn't show after using an icon inside input field

So I have this form where there is an input field that needs to be filled to submit the query. I haven't used a button to submit the form but instead used a font awesome icon inside the input field. And with Javascript I made the form submit if a user clicks on the icon.
It works perfectly as I wanted but the only issue is the form submits even if the field is empty. The required attribute isn't working, probably because I'm not using a button. So to stop the form to be submitted without a value I used an if statement to check if there's any value and using an alert instead of a message to the user if there's not. But I want to display the default message to the user which the browser shows that the field is empty. How can I display the default message to user if the field is empty in this situation?
Please note that I'm using node and express for the app and ejs as my template engine. The javascript code is in main.js file the public folder and not in the script tags inside the template.
$(document).ready(function() {
$("#searchIcon").click(function(e) {
e.preventDefault();
if (!$("#input").val()) {
alert("input empty");
} else {
$("#form").submit();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
<form id="form" action="/submit" method="GET">
<input type="text" id="input" name="search" required>
<i id="searchIcon" class="fas fa-search" aria-hidden="true"></i>
</form>

You can use the checkValidity() and reportValidity() methods of the form to trigger the default HTML5 validation:
jQuery(function($) {
var $form = $('#form');
$("#searchIcon").click(function(e) {
e.preventDefault();
if (!$form[0].checkValidity()) {
$form[0].reportValidity();
} else {
$("#form").submit();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
<form id="form" action="/submit" method="GET">
<input type="text" id="input" name="search" required>
<i id="searchIcon" class="fas fa-search" aria-hidden="true"></i>
</form>
However it should be noted that your code does not meet accessibility validation requirements due to the lack of a submit button.
You can easily include one, and thereby remove the need for any JS code, by styling it to look like the FontAwesome icon:
button.submit {
background: none;
border: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
<form id="form" action="/submit" method="GET">
<input type="text" id="input" name="search" required>
<button type="submit" class="submit"><i class="fas fa-search"></i></button>
</form>

Get value from input jQuery

I am trying to get the value from the first name input and pass it to the bootstrap alert when the user clicks the submit button, but can't manage to do that.
Here is my snippet:
$(document).ready(function() {
$("#submit-button").click(function() {
$("#myAlert").show("fade"), $("#fname").attr("value");
event.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<div id="myAlert" class="alert alert-success collapse">
×Thank you for contacting us,
</div>

I assume you wish to use the input value to complete the Bootstrap's alert text...
You will need an element to place that value in I suggest a span. Use the .val() method to get the input value... Then .text() to insert it in the span.
$(document).ready(function() {
$("#submit-button").click(function() {
$("#firstName").text($("#fname").val()); // Use the input's value for the span's text
$("#myAlert").show("fade"); // Show the Bootstrap's alert
event.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
Enter your first name: <input id="fname"><br>
<button id="submit-button">Submit</button>
<div id="myAlert" class="alert alert-success collapse">
×Thank you for contacting us, <span id="firstName"></span>
</div>

Flask form submit can't stop when code in js has return

I want to stop form submit when the field careerHistory is null.
I have this judgment in my js code.
But when the field careerHistory is null,the html form still submitted,in fact,when this field careerHistory is null, I don't want to submit the form.
How to fix my code?
HTML & Javascript:
<html>
<head>
<title>cal</title>
<link href="static/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="static/css/FlaskModelCalculation.css" rel="stylesheet" type="text/css"/>
<script src="static/js/jquery-1.11.3.min.js"></script>
<script src="static/js/toastr.min.js"></script>
<script type="text/javascript">
$(function () {
$('#calculate').click(function(){
var careerHistory = $("#careerHistory").val();
alert(careerHistory);
if(careerHistory=="" || careerHistory==="undefined"){
alert("careerHistory cann't null");
return;//Here I don't want to to submit the form,because the careerHistory is null.But the request was sent.
}
});
});
</script>
</head>
<body>
<div align="center" style="margin-top:60px">
<form name="form1" method='POST'>
<span>careerHistory</span><input type="text" placeholder="careerHistory" name="careerHistory" id="careerHistory" class="form-control" value="{{careerHistory}}"><br/>
<span>wholeBookNumber</span><input type="text" placeholder="wholeBookNumber" name="wholeBookNumber" class="form-control" value="{{wholeBookNumber}}"><br/>
<span>reflectionBookNumber</span><input type="text" placeholder="reflectionBookNumber" name="reflectionBookNumber" class="form-control" value="{{reflectionBookNumber}}"><br/>
<span>schoolClassificationCD</span><input type="text" placeholder="schoolClassificationCD" name="schoolClassificationCD" class="form-control" value="{{schoolClassificationCD}}"><br/>
<span>jobsNumber</span><input type="text" placeholder="jobsNumber" name="jobsNumber" class="form-control" value="{{jobsNumber}}"><br/>
<span>constructionSpecificity</span><input type="text" placeholder="constructionSpecificity" name="constructionSpecificity" class="form-control" value="{{constructionSpecificity}}"><br/>
<span>playingStyle</span><input type="text" placeholder="playingStyle" name="playingStyle" class="form-control" value="{{playingStyle}}"><br/>
<span>workingMethod</span><input type="text" placeholder="workingMethod" name="workingMethod" class="form-control" value="{{workingMethod}}"><br/>
<span>workOvertimeAverage</span><input type="text" placeholder="workOvertimeAverage" name="workOvertimeAverage" class="form-control" value="{{workOvertimeAverage}}"><br/>
<input type="submit" id="calculate" class="btn btnNormal btn-primary" value="cal">
<input type="text" name="calculationResult" readonly="readonly" class="form-control" value="{{calculationResult}}">
</form>
</div>
</body>
<footer>
</footer>
</html>

This is more of a javascript question, not a Python question actually.
You can prevent form submission using preventDefault
$(function () {
// pass the event object as 'evt' to the callback
$('#calculate').click(function(evt){
var careerHistory = $("#careerHistory").val();
if(!careerHistory) {
// prevent form submission
evt.preventDefault();
}
});
});
Things you must fix first
1) The careerHistory input element needs an id or class name to select the element with jQuery like you did when you set the click handler.
<input id="careerHistory" ...>
$("#careerHistory")
2) You are doing careerHistory === "undefined" in your if statement.
undefined is a keyword in javascript, not a string, so no quotes around it.
3) Empty string "" and undefined are both falsy values.
if (!careerHistory)
is the same as
if (careerHistory===false || careerHistory===null || careerHistory==="" || careerHistory===undefined || careerHistory===0)

html5 / jquery - click event not registering for html button tag

I am trying to validate a form, but I can't get any code to execute when my button is clicked. Here's my code:
<div id="vehicle_form">
<form method="post" name="emailForm" action="">
<input class="dField" id="dfEmail" type="email" name="email" value="Email" onfocus="clearInput(this);" onblur="restoreInput(this)"><br/>
<input class="dField" id="dfName" type="text" name="firstname" value="First Name" onfocus="clearInput(this);" onblur="restoreInput(this)"><br/>
<input class="dField" id="dfLast" type="text" name="lastname" value="Last Name" onfocus="clearInput(this);" onblur="restoreInput(this)"><br/>
<button type="button" id="dSubmit">Submit</button>
</form>
</div>
$('#dSubmit').click(function(){
console.log('click');
});

You need to ensure that your jQuery is wrapped in a <script> tag, and ensure that the function is being loaded, perhaps by a $(document).ready() function, as shown below:
<script type='text/javascript'>
$(document).ready(function(){
//Your Click event
$('#dSubmit').click(function(){
console.log('click');
});
});
</script>
Working Demo

Actually the code stays wrong. A form can be often submitted by hitting enter inside of a textfield. If you want to make it right you should use the submit event.
<script>
$(function(){
$('#vehicle_form > form').submit(function(){
console.log('submit');
});
});
</script>