Function is not executed when leaving the website - javascript

What I am trying to achieve is that if user clicks on close button a function Exit is triggered which displays a form before user leaves the website.But my form is not getting displayed
Javascript
<script type="text/javascript">
window.onbeforeunload = Exit;
function Exit()
{
setTimeout(function() {
setTimeout(function() {
document.getElementById('form').style.display="block";
window.location.href="register.html";
}, 1000);
},1);
return "Message";
}
</script>
Html code
<div class="container">
<form role="form" id="form" method="post" action="register.php" style="display:none">
<div class="form-group">
<label for="username">Name:</label>
<input type="text" name="username" class="form-control" id="username" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" name="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="number" name="phone" class="form-control" id="phone" placeholder="Enter phonenumber">
</div>
<div class="form-group">
<label for="reason">Reason to leave:</label>
<textarea class="form-control" name="reason" rows="5" id="comment"></textarea>
</div>
<button type="submit" name="submit" class="btn btn-default">Submit</button>
</form>
</div>

Related

Prevent form from submitting until validation

I am making form and I have some problems validating it.
HTML:
<form id="regForm" class="form-group" method="POST" action="signup.php">
<div class="col-md-12">
<h2>Job Pocket</h2>
</div>
<div class="col-md-12">
<input placeholder="email" class="form-control"type="text" name="email" id="email">
</div>
<div class="col-md-12">
<input placeholder="password" class="form-control" type="password" name="password" id="pass">
</div>
<div class="col-md-12">
<input placeholder="confirm password" class="form-control" type="password" name="confirmpass" id="confirmpass">
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<input placeholder="first name" class="form-control" type="text" name="first_name" id="first_name">
</div>
<div class="col-md-6">
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name">
</div>
</div>
</div>
<div class="col-md-12">
<input type="submit" value="submit" name="submitsignup" id="submit" class="btn btn-primary">
</div>
<hr>
</form>
Javascript:
<script type="text/javascript">
$("#regForm").submit(function(event){
if(document.getElementById("email")=="" || document.getElementById("password") || document.getElementById("last_name") || document.getElementById("first_name"))
return false;
});
</script>
Even with this javascript code added the form still submits to signup.php.
And should I add extre checks in php aswell.
//add return function on it
<form id="regForm" class="form-group" method="POST" action="signup.php">
<div class="col-md-12">
<h2>Job Pocket</h2>
</div>
<div class="col-md-12">
<input placeholder="email" class="form-control"type="text" name="email" id="email">
</div>
<div class="col-md-12">
<input placeholder="password" class="form-control" type="password" name="password" id="pass">
</div>
<div class="col-md-12">
<input placeholder="confirm password" class="form-control" type="password" name="confirmpass" id="confirmpass">
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<input placeholder="first name" class="form-control" type="text" name="first_name" id="first_name">
</div>
<div class="col-md-6">
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name">
</div>
</div>
</div>
<div class="col-md-12">
<input type="button" onclick="return validation()" value="submit" name="submitsignup" id="submit" class="btn btn-primary">
</div>
<hr>
</form>
<script>
public function validation(){
if(document.getElementById("email").value=="" || document.getElementById("password").value="" || document.getElementById("last_name").value="" || document.getElementById("first_name")).value==""{
return false; }
else {
document.getElementById("regForm").submit();
}
}
</script>
or use this
//add required on input it will automatically return message
<form id="regForm" class="form-group" method="POST" action="signup.php">
<div class="col-md-12">
<h2>Job Pocket</h2>
</div>
<div class="col-md-12">
<input placeholder="email" class="form-control"type="text" name="email" id="email" required>
</div>
<div class="col-md-12">
<input placeholder="password" class="form-control" type="password" name="password" id="pass" required>
</div>
<div class="col-md-12">
<input placeholder="confirm password" class="form-control" type="password" name="confirmpass" id="confirmpass" required>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<input placeholder="first name" class="form-control" type="text" name="first_name" id="first_name" required>
</div>
<div class="col-md-6">
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name" required>
</div>
</div>
</div>
<div class="col-md-12">
<input type="submit" value="submit" name="submitsignup" id="submit" class="btn btn-primary">
</div>
<hr>
</form>
Replace your code with this
if(document.getElementById("email")=="" || document.getElementById("password")=="" || document.getElementById("last_name")=="" || document.getElementById("first_name")=="")
You should only add "required" in the html tag in tags. It'll automatically add display text that the field is required.
Like this:
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name" required>
You forgot to add .value to check the values of inputs. Also, you have to use preventDefault in submit function to prevent form submission:
<script type="text/javascript">
$("#regForm").submit(function(event){
if(document.getElementById("email").value == "" || document.getElementById("password").value == "" || document.getElementById("last_name").value == "" || document.getElementById("first_name").value == "")
event.preventDefault();
});
</script>
Since you're using jquery, you can also use its selector:
<script type="text/javascript">
$("#regForm").submit(function(event){
if($("#email").val() == "" || $("#password").val() == "" || $("#last_name").val() == "" || $("#first_name").val() == "")
event.preventDefault();
});
</script>
what about using event.preventDefault() like this:
<script type="text/javascript">
$("#regForm").submit(function(event){
event.preventDefault();
if(document.getElementById("email")=="" || document.getElementById("password")=="" || document.getElementById("last_name")=="" || document.getElementById("first_name")=="")
return false;
});
</script>

Modifiying JS to meet new HTML form

I am have a small script written in JS for a form. The script looks like so:
$(document).ready(function() {
// Test for placeholder support
$.support.placeholder = (function(){
var i = document.createElement('input');
return 'placeholder' in i;
})();
// Hide labels by default if placeholders are supported
if($.support.placeholder) {
$('.form-label').each(function(){
$(this).addClass('js-hide-label');
});
// Code for adding/removing classes here
$('.form-group').find('input, textarea').on('keyup blur focus', function(e){
console.log(e);
// Cache our selectors
var $this = $(this),
$parent = $this.parent().find("label");
if (e.type == 'keyup') {
if( $this.val() == '' ) {
$parent.addClass('js-hide-label');
} else {
$parent.removeClass('js-hide-label');
}
}
else if (e.type == 'blur') {
if( $this.val() == '' ) {
$parent.addClass('js-hide-label');
}
else {
$parent.removeClass('js-hide-label').addClass('js-unhighlight-label');
}
}
else if (e.type == 'focus') {
if( $this.val() !== '' ) {
$parent.removeClass('js-unhighlight-label');
}
}
});
}
});
and this is my form in HTML:
<form id="contact-form" class="form" action="#" method="POST" role="form">
<div class="form-group">
<label class="form-label" for="name">Your Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Your Name" required>
</div>
<div class="form-group">
<label class="form-label" for="email">Your Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Your Email" required>
</div>
<div class="form-group">
<label class="form-label" for="subject">Subject</label>
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject">
</div>
<div class="form-group">
<label class="form-label" for="message">Message</label>
<textarea rows="5" cols="50" name="message" class="form-control" id="message" placeholder="Message..." required></textarea>
</div>
<div class="text-center">
<button type="submit" class="btn btn-start-order">Send Message</button>
</div>
</form>
This works well, as can be seen here: https://codepen.io/stephanrusu/pen/QwKLJX
I have modified my form to have a <span></span> tags around the input/textarea. In the JS this requires looking for input and textfield inside the span which has class name wpcf7-form-control-wrap. So my HTML looks like this now:
<form id="contact-form" class="form" action="#" method="POST" role="form">
<div class="form-group">
<label class="form-label" for="name">Your Name</label>
<span class="wpcf7-form-control-wrap fullname">
<input type="text" class="form-control" id="name" name="name" placeholder="Your Name" required>
</span>
</div>
<div class="form-group">
<label class="form-label" for="email">Your Email</label>
<span class="wpcf7-form-control-wrap email">
<input type="email" class="form-control" id="email" name="email" placeholder="Your Email" required>
</span>
</div>
<div class="form-group">
<label class="form-label" for="subject">Subject</label>
<span class="wpcf7-form-control-wrap subject">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject">
</span>
</div>
<div class="form-group">
<label class="form-label" for="message">Message</label>
<span class="wpcf7-form-control-wrap message">
<textarea rows="5" cols="50" name="message" class="form-control" id="message" placeholder="Message..." required></textarea>
</span>
</div>
<div class="text-center">
<span class="wpcf7-form-control-wrap fullname">
<button type="submit" class="btn btn-start-order">Send Message</button>
</span>
</div>
</form>
So my questions is how can the JS be modified to work with the following form. All that is added is around the inputs and textareas.
Many thanks in anticipation.
In your code, just change the line:
$parent = $this.parent().find("label");
to
$parent = $this.closest(".form-group").find("label");
After update of form, $(this).parent() refers to <span> instead of <label>. $this.closest(".form-group").find("label") will refer correctly to label elements.

add a class to parent element based on child class - inside of a submit event

Trying to target only parent divs that have child with class="has-error"
I'm using the following, but scope inside of conditional is referring to #pdf-form. Please advise how to fix.
JS:
$( "#pdf-form" ).submit(function( event ) {
if ($(".form-control").hasClass("has-error")) {
$(this).parent().addClass('has-error');
}
event.preventDefault();
});
HTML:
<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
<div style="display:none">
<input type="hidden" name="params_id" value="363">
<input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
</div>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
<div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
</div>
<div class="form-group">
<label for="first_name" class="control-label">Name</label>
<div class="row">
<div class="col-sm-6">
<input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
</div>
<div class="clearfix visible-xs" style="height: 10px;"></div>
<div class="col-sm-6">
<input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
</div>
</div>
</div>
<div class="form-group hidden">
<label class="control-label">report</label>
<input type="file" name="report[0]" value="" id="freeform_report0">
</div>
<input type="hidden" name="pdf_press_entries" value="77|8">
<input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
<input type="hidden" name="pdf_press_upload_fieldname" value="report">
<input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
<p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>
It's still unclear exactly what you are looking for. I suspect your initial setup is not quite correct, but this should give you an idea of how to access the parent elements that contain error controls.
It won't work here in the Stack Overflow snippet environment, because they disable submit events, but you can see it working here. I added an additional class to illustrate what is getting selected when you click submit.
$( "#pdf-form" ).submit(function( event ) {
var $errorElements = $(".form-control.has-error");
$errorElements.parent().addClass('added-error');
// If there are error elements, don't submit the form
$errorElements.length > 0 ? event.preventDefault() : "";
});
.has-error { background:red; }
.added-error { border:2px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
<div style="display:none">
<input type="hidden" name="params_id" value="363">
<input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
</div>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
<div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
</div>
<div class="form-group">
<label for="first_name" class="control-label">Name</label>
<div class="row">
<div class="col-sm-6">
<input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
</div>
<div class="clearfix visible-xs" style="height: 10px;"></div>
<div class="col-sm-6">
<input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
</div>
</div>
</div>
<div class="form-group hidden">
<label class="control-label">report</label>
<input type="file" name="report[0]" value="" id="freeform_report0">
</div>
<input type="hidden" name="pdf_press_entries" value="77|8">
<input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
<input type="hidden" name="pdf_press_upload_fieldname" value="report">
<input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
<p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>
To cancel the submit it appears, based on your example, that you need to detect if any form-control elements have the has-error class. Then, to set the has-error on the class on the parents of those form-control elements you need to use the .each() approach instead of the if you have tried.
Something like this:
$( "#pdf-form" ).submit(function( event ) {
if ($(".form-control").hasClass("has-error").length > 0){
event.preventDefault();
}
$(".form-control").hasClass("has-error").each(function() {
$(this).parent().addClass('has-error');
}
});

Change the task of a button placed in the footer of modal

I have a modal. In the header of the modal I have title which is login. And in the body I have a login form and in the footer I have login button.
After the login button I have a hyper text for those who wants to create account which by clicking on it the login form disappear and the register form appears.
Is there any possibility that I can use the same button for logging in to register. (In the simplest word is it possible to use the same button in 2 different forms or if I can't, how can I add a button to the footer and make it act as the submit button of the reiteration form)
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header" style="background-color: #222">
<div class="mu-title">
<span class="mu-subtitle" id = "loginTitle">Login</span>
</div>
</div>
<!-- Body of the modal -->
<div class="modal-body" style="background-color: #222">
<form id="registerForm" method="POST" action="register.php" novalidate="novalidate" style="display: none">
<div class="form-group">
<label for="name" class="control-label" style="color: white">Full Name</label>
<input type="text" class="form-control" id="fullName" name="fullName" value="" required="" title="Please enter you full name" placeholder="Full Name">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="username" class="control-label" style="color: white">Username</label>
<input type="text" class="form-control" id="username" name="username" value="" required="" title="Please enter you username" placeholder="username#siswa.um.edu.my">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="password" class="control-label" style="color: white">Password</label>
<input type="password" class="form-control" id="password" name="password" value="" required="" title="Please enter your password">
</div>
<div class="form-group">
<label for="matrix" class="control-label" style="color: white">Matrix Number</label>
<input type="text" class="form-control" id="matrixNO" name="matrixNO" value="" required="" title="Please enter you Matrix Number" placeholder="Matrix Number ">
<span class="help-block"></span>
</div>
</form>
<form id="loginForm" method="POST" action="login.php" novalidate="novalidate">
<div class="form-group">
<label for="username" class="control-label" style="color: white">Username</label>
<input type="text" class="form-control" id="username" name="username" value="" required="" title="Please enter you username" placeholder="username#siswa.um.edu.my">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="password" class="control-label" style="color: white">Password</label>
<input type="password" class="form-control" id="password" name="password" value="" required="" title="Please enter your password">
</div>
</div>
<div class="modal-footer" style="background-color: #222">
<button type="submit" id ="loginButt" class="mu-readmore-btn">Login</button></br></br>
</form>
<span style="color: white" >Create an <a href= "#" style="color: white" onClick="$('#loginForm').hide();$('#registerForm').show(); " >Account</a> </span>
</div>
</div>
Here are some boilerplates that you can try with....(your part is just basically determining which form is active...)
$(document).ready(function(){
$('#submitbtn').click(function(e){
e.preventDefault();
var form=$('#currentForm').val();
if(form=="login")
{
alert('submit to login');
}
else
{
alert('submit to register');
}
});
$('#btnchange').click(function(){
var form=$('#currentForm').val();
if(form=="login")
{
$('#currentForm').val('register');
$('#registration-form').show();
$('#login-form').hide();
}
else
{
$('#currentForm').val('login');
$('#registration-form').hide();
$('#login-form').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form method="post" action="register.php" name="registration-form" id="registration-form" style="display:none;">
<label for="name">Name:</label>
<input type="text" name="usename"><br/>
<label for="emailid">Email ID:</label>
<input type="text" name="emailid"><br/>
<label for="password">Password :</label>
<input type="password" name="password">
</form><br/><br/>
<form method="post" action="login.php" name="login-form" id="login-form">
<label for="emailid">Email ID :</label>
<input type="text" name="emailid">
<label for="password">Password :</label>
<input type="password" name="password">
</form>
<input type="hidden" value="login" id="currentForm"/>
<input type="button" value="Submit" name="submitbtn" id="submitbtn">
<input type="button" value="Toggle Form" id="btnchange"/>
Just so I understand your question a little bit better, the basic idea of what you're trying to do is:
Single page modal, one form. Take user text input, check for existing user with that info, create new user if none exists?

console.log does not work [duplicate]

This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
Closed 6 years ago.
Probably an easy one. When I click on submit button in a form I have created I am supposed to see the message "clicked" on my console but it does not appear. Any ideas why this happens?
$("#button").on("click", function() {
console.log("clicked");
return false;
});
<div class="col-md-8">
<form>
<div class="form-group">
<label for="name" class="sr-only">Name</label>
<input type="text" class="form-control" id="name" placeholder="Your name here" maxlength="20">
</div>
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" class="form-control" id="email" placeholder="Your email here*" required="required">
</div>
<label for="textBox" class="sr-only">TextBox</label>
<textarea class="form-control message-box" id="textBox" style="resize:none" cols="40" rows="5" placeholder="Your message here" minlength="20"></textarea>
<button type="submit" class="btn btn-default" id="button">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
The $ function is defined only by jQuery. You need to include jQuery for this to work.
$("#button").on("click", function() {
console.log("clicked");
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-8">
<form>
<div class="form-group">
<label for="name" class="sr-only">Name</label>
<input type="text" class="form-control" id="name" placeholder="Your name here" maxlength="20">
</div>
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" class="form-control" id="email" placeholder="Your email here*" required="required">
</div>
<label for="textBox" class="sr-only">TextBox</label>
<textarea class="form-control message-box" id="textBox" style="resize:none" cols="40" rows="5" placeholder="Your message here" minlength="20"></textarea>
<button type="submit" class="btn btn-default" id="button">Submit</button>
</form>
Adding jQuery works here.

Categories

Resources