We Keep Coding

How to make a Confirm Dialog Appear before Form Post Request in EJS template

I'm trying to create a confirmation dialog using something like this: confirm('Are you sure?') inside of my EJS form but I don't know where and how to get it to work correctly.
Here is the code I have so far for my EJS template:
<div id="popupAddUser" class="addUser">
<div class="card h-100">
<div class="row">
<div class="col-7"><h2>Create New User</h2></div>
</div>
<div class="card-body">
<form method="POST" id="formAddUser" action="/add-user" enctype="multipart/form-data">
<div class="container">
<div class="row">
<div class="col-xl-5 float-right">
<div class="form-group">
<input class="form-control" type="text" placeholder="Type a User name"
name="create_user">
</div>
<div>
<button type="submit" class="btn btn-primary float-right" form="formAddUser" onclick="checker()">Create
User
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
function checker(){
if( confirm("Are you sure you want to create a new User in the database?")){
continue;
}else{
break;
}
}
</script>
I'm aware that the checker() function isn't correctly placed or even necessary but I'm not sure if there's another way to do this. When I click the create user button, the Confirm dialog box should render and ask me if I'm sure I want to create a user. If I select yes, it should submit the form but if I click cancel, it shouldn't do the form post request

You can use the JavaScript submit() function to remotely submit your form depending on the response. This would mean that instead of using a submit button, you'd have to use a normal button.
function checker(){
if(window.confirm("Are you sure")){
document.getElementById("formAddUser").submit();
} else {
return;
}
}
<div id="popupAddUser" class="addUser">
<div class="card h-100">
<div class="row">
<div class="col-7"><h2>Create New User</h2></div>
</div>
<div class="card-body">
<form method="POST" id="formAddUser" action="/add-user" enctype="multipart/form-data">
<div class="container">
<div class="row">
<div class="col-xl-5 float-right">
<div class="form-group">
<input class="form-control" type="text" placeholder="Type a User name"
name="create_user">
</div>
<div>
<button type="button" class="btn btn-primary float-right" form="formAddUser" onclick="checker()">Create
User
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Note that the button type is set to button rather than submit to prevent the page from refreshing after the function runs.

I am surprised your text editor did not complain about the continue and break statement in your if-else statement!!
I would:
Remove the inline onclick event handler
Use instead the addEventListener() method or the onsubmit call on the form element.
Use event.preventDefault() method to stop the form from submitting when the cancel button is clicked.
document.getElementById('form').addEventListener(
'submit',
(e) => checker(e)
)
function checker(e) {
if(!confirm('Are you sure?')) {
e.preventDefault()
alert('Form was not submitted')
}else {
alert('New user created')
}
}

addClass function working properly but removeClass function not working on input text field for form?

Creating an Online form and I'd like only the field that the user is focused on to be notfaded so i decided to add some jQuery to my form but the remove class function is not working. addClass works when I click into a field it shows brightly and not faded as it adds the Focused class but as soon as I click away or am no longer focused on that field the Focused class remains.
I've seen some similar posts but the solutions on the other posts don't seem to pertain to my issue.
Below is my form
<form name="contactform" method="post">
<div class="row">
<div class="col-md-12 inputFaded">
<span class="larger"><strong>Name</strong> <span class="textGreen">*</span></span><br><br>
<span>Please provide your full name</span>
<input type="text" maxlength="100" class="form-control discuss" name="projectname">
<br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" name="nameaction" value="SEND" class="btn btn-lg btn-success btn-block">
</div>
</div>
</form>
Below is my jQuery
$(document).ready(function(){
$('input[type="text"]').on('focus', function() {
$('.inputFaded').addClass('Focused');
});
$('input[type="text"]').off('focus', function() {
$('.inputFaded').removeClass('Focused');
});
});
Any help greatly appreciated!
Thanks,

You are misunderstanding .off()
Description: Remove an event handler.
So it seems that you need to listen focusin and focusout event.
$(document).ready(function(){
$('input[type="text"]').focusin(function() {
$('.inputFaded').addClass('Focused');
});
$('input[type="text"]').focusout(function() {
$('.inputFaded').removeClass('Focused');
});
});
.Focused{
background-color: #FFFFCC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="contactform" method="post">
<div class="row">
<div class="col-md-12 inputFaded">
<span class="larger"><strong>Name</strong> <span class="textGreen">*</span></span><br><br>
<span>Please provide your full name</span>
<input type="text" maxlength="100" class="form-control discuss" name="projectname">
<br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" name="nameaction" value="SEND" class="btn btn-lg btn-success btn-block">
</div>
</div>
</form>
Updated
$(document).ready(function(){
$('input[type="text"]').focusin(function() {
$(this).addClass('Focused');
});
$('input[type="text"]').focusout(function() {
$(this).removeClass('Focused');
});
});
.Focused{
border-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="contactform" method="post">
<div class="row">
<div class="col-md-12 inputFaded">
<span class="larger"><strong>Name</strong> <span class="textGreen">*</span></span><br><br>
<span>Please provide your full name</span>
<input type="text" maxlength="100" class="form-control discuss" name="projectname">
<br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" name="nameaction" value="SEND" class="btn btn-lg btn-success btn-block">
</div>
</div>
</form>

The .off function is not used for running a function but for removing a function from an Event tied to an element, as already pointed out by #Phong. Instead use the .focusout() function or .on("focusout", ..)
Please note that if this is also quite simple in Vanilla JS:
// Vanilla JS solution
(function(){
let input = document.querySelector("input[type='text']"),
inputFaded = document.querySelector(".inputFaded");
input.addEventListener('focus', function() {
console.log("focused now!");
inputFaded.classList.add('Focused');
});
input.addEventListener('focusout', function(){
console.log("I will also be run! :)");
inputFaded.classList.remove('Focused');
})
})()
$(document).ready(function(){
$('input[type="text"]').on('focus', function() {
console.log("focused now!");
$('.inputFaded').addClass('Focused');
});
// Removing function from focus event that does not exist as a function to an eventlistener
$('input[type="text"]').off('focus', function() {
console.log("I will never be run? :(");
$('.inputFaded').removeClass('Focused');
});
// adding focusout eventlistener
$('input[type="text"]').on('focusout', function() {
console.log("I will be run! :)");
$('.inputFaded').removeClass('Focused');
});
// alternative way of adding focusout eventlistener
$('input[type="text"]').focusout( function() {
console.log("I will also be run! :)");
$('.inputFaded').removeClass('Focused');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form name="contactform" method="post">
<div class="row">
<div class="col-md-12 inputFaded">
<span class="larger"><strong>Name</strong> <span class="textGreen">*</span></span><br><br>
<span>Please provide your full name</span>
<input type="text" maxlength="100" class="form-control discuss" name="projectname">
<br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" name="nameaction" value="SEND" class="btn btn-lg btn-success btn-block">
</div>
</div>
</form>

You can also try like this :
$(document).ready(function(){
$("input").focus(function(){
$('.inputFaded').addClass('Focused');
});
$("input").on('blur', function() {
$('div').removeClass('Focused');
});
});

click function is not working in javascript

I have a modal for signup and signin. In signup modal when I click to signin button then signup modal will hide and signin modal will appear.
From same procedure happen to signin modal.
But here these signin or signup button inside the modal didn't work.
I didn't find out the script problem since I am not good in JS.
Here is the modal
<form class="form-horizontal" id="signin_form">
<input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
<fieldset>
<!-- Sign In Form -->
<!-- Email input-->
<div class="control-group">
<div class="controls">
<input required="" id="signin_email" name="email" class="col-ld-12 col-md-12 col-sm-12" type="email" placeholder="Email" class="input-medium">
</div>
</div>
<div class="control-group">
<div class="controls">
<input required="" id="signin_password" name="password" class="col-ld-12 col-md-12 col-sm-12" type="password" placeholder="Password" class="input-medium">
</div>
</div>
<!-- Button -->
<div class="control-group">
<div class="controls modal_submit_button">
<button type="button" class="btn btn-success" id="signin_form_submit_button">Sign In</button>
</div>
</div>
<div class="control-group">
<div class="controls modal_submit_button">
Don't have an account ! Click here to
Sign Up
</div>
</div>
</fieldset>
</form>
script
$(document).ready(function(){
$('.signup_from_signin_modal').on("click", function() {
$('#signin_Modal').modal('hide');
$('#myModal').modal('show');
});
$('.signin_from_signup_modal').on("click", function() {
$('#myModal').modal('hide');
$('#signin_Modal').modal('show');
});
});
Further more no error is shown into console.
Anybody help please? Thanks in advance

First of all in the handler function of the click you should prevent the default action of the <a> tag. Like so:
$(document).ready(function(){
$('.signup_from_signin_modal').on("click", function(e) {
e.preventDefault();
$('#signin_Modal').modal('hide');
$('#myModal').modal('show');
});
Please let me know if this helps and apply this principle to other HTML tags that already have a default event associated. Like forms with button of type submit for instance. Don't forget to prevent this default event so that you can use your specified event. Hope this helps.

There are missing places in the code. That's why I didn't understand the problem.
Can you try that?
$(document).ready(function(){
$('.signup_from_signin_modal').click(function(e) {
e.preventDefault()
$('#signin_Modal').hide();
$('#myModal').show()
})
});
Where is #myModal?

Submit button is not working with HTML and JavaScript

Whenever I attempt to click the submit button, nothing happens.
I have attempted to change the button, however I doubt this is the issue.
JavaScript Code:
$('#contactForm').submit(function () {
$.ajax({
type: "POST",
url: "php/contact.php",
data: $('#contactForm').serialize(),
success: function (msg) {
if (msg == 'SEND') {
$('.success').fadeIn();
$('.error').fadeOut();
$('#contactForm')[0].reset();
} else {
$('.success').fadeOut();
$('.error').fadeIn().find('h3').text(msg);
}
}
});
return false;
});
HTML Code:
<div>
<h2 class="small-heading">CONTACT US</h2>
<div class="contact-form col-sm-11 clearfix">
<form action="contact-complete.php" id="contactForm" method="post" name="contactForm">
<fieldset>
<div class="col-sm-12">
<input id="name" name="name" placeholder="Your Name*" type="text" value="">
</div>
<div class="col-sm-12">
<input id="email" name="email" placeholder="Your Email*" type="text" value="">
</div>
<div class="col-xs-12">
<textarea cols="5" id="message" name="message" placeholder="Your Message....*"></textarea>
</div>
<div class="col-xs-12">
<button type="submit" form="contactForm" class="submit active">SEND</button>
</div>
<div class="error col-xs-12">
<h3></h3>
</div>
<!-- Error Message [ END ] -->
<div class="success col-xs-12" id="update">
<h3>Success! Your message was sent.</h3>
</div>
<!-- Submit Button [ END ] -->
</fieldset>
</form>
<!-- Contact Form [ END ] -->
</div>
</div>
If you could please help me out this would be much appreciated.
Thank you for all of your help.

This seems to be an issue within the AJAX call. I removed "return false;" from the code and it seemed to work. However, it was sending the information twice. So I just removed the AJAX code all together and it worked just fine redirecting to the PHP mail() script.
Thanks for all of your help.

Your button doesnt have an action and you don´t listen for it either
<button type="submit" form="contactForm" class="submit active" OnClick="submit()">SEND</button>
Or add an ID and listen for that in the JS

Validate input text in bootstrap modal

I want to validate a form in a bootstrap modal without using any framework. It's actually a simple modal with only an input text and two buttons "Close" and "Send".
The user should type his/her name in the input box and click send. The form is the sent with the method post.
What I want to do is that, if the user doesn't enter anything in the input box of and clicks on the button "Send", the input box should have a red border circling it instead of the default blue border. Here's the code for my modal:
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!--form-->
<form class = "form-horizontal" id="myForm" method="post" action="test.php" role="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">My modal</h4>
</div>
<div class="modal-body">
<p>
Please enter your name:
</p>
<br/>
<div class="form-group">
<div class="col-lg-12">
<label class="control-label" for="firstname">Name</label>
<input type="text" class="form-control required" id="firstname" name="firstname">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="myFormSubmit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
I tried using javascript to change the class of the input text to has-errorbut it doesn't produce the red outline. When I click on send it sends the empty value through the post method instead of
Here's my javascript code:
<script type="text/javascript">
$('#myForm').validate({
rules: {
name: {
minlength: 1,
required: true
},
},
highlight: function (element) {
$('#firstname').removeClass('has-success').addClass('has-error');
},
success: function (element) {
$('#firstname').removeClass('has-error').addClass('has-success');
}
});
</script>
I feel like I'm mixing a whole lot of things here. I'm still new to bootstrap and javascript. How can I go about getting the desired red outline?
Thanks.
Edit:
Validate function:
function validate() {
var x = document.forms["myForm"]["firstname"].value;
if (x == null || x == "") {
return false;
}
}

You need to change the CSS classes of the input parent element div.form-group, not the input itself:
The HTML after the submit button click should look like this:
<div class="form-group has-error">
<div class="col-lg-12">
<label class="control-label" for="firstname">Name</label>
<input type="text" class="form-control required" id="firstname" name="firstname">
</div>
</div>
To achieve this, alter your JavaScript code to this:
<script type="text/javascript">
$('#myForm').on('submit', function(e) {
var firstName = $('#firstname');
// Check if there is an entered value
if(!firstName.val()) {
// Add errors highlight
firstName.closest('.form-group').removeClass('has-success').addClass('has-error');
// Stop submission of the form
e.preventDefault();
} else {
// Remove the errors highlight
firstName.closest('.form-group').removeClass('has-error').addClass('has-success');
}
});
</script>

div in boot strap...
<div class="form-group">
<div class="row">
<label class="col-xs-2 col-sm-2 control-label">city:</label>
<div class="col-xs-3 col-sm-3 formGroups"
id="city_form1">
<form:input name="city" class="form-control"
placeholder="City" data-toggle="tooltip"
data-placement="bottom" title="City" maxlength="15" />
<small class="help-block col-sm-offset-0 col-sm-9"
style="display: none;">city must require</small>
</div>
</div>
</div>
as you see there is .help-block is display: none now you write javascript function and check validation and if validation now pass make it display: block ... that's way you can do
enjoy with boot strap :)

its very easy
just apply class .has-error to div by javascript function
<div class="form-group has-error">
<div class="row">
<label class="col-xs-2 col-sm-2 control-label">city:</label>
<div class="col-xs-3 col-sm-3 formGroups"
id="city_form1">
<form:input name="city" class="form-control"
placeholder="City" data-toggle="tooltip"
data-placement="bottom" title="City" maxlength="15" />
</div>
</div>
</div>

Just use required inside the input field like this
<input type="text" class="form-control required" id="firstname" name="firstname" required/>