Validate form without page reload - javascript

I am implementing a simple registration form. I want to validate if the user has selected at least one checkbox. All the fields in my form are being validated without page reload except for this one input field. When I try to validate this field, the page reloads and all the values that the user previously entered are lost. I want to prevent this from happening.
function validate() {
var checkbox1 = document.getElementById('three').checked;
var checkbox2 = document.getElementById('four').checked;
var checkbox3 = document.getElementById('five').checked;
var checkbox4 = document.getElementById('six').checked;
if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == true) {
if (referenceToForm.elements["usrgrp[]"].selectedIndex == -1) {
alert("Please enter all the required values");
}
}
if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == false) {
if (referenceToForm.elements["usrgrp[]"].selectedIndex == -1) {
alert("Please enter all the required values");
}
}
if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == false) {
if (referenceToForm.elements["usrgrp[]"].selectedIndex != -1) {
alert("Please enter all the required values");
}
}
if (document.getElementById('values').value == -1) {
alert("Please enter all the required values checkbox");
}
}
#import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
#labels{
position: relative;
width: 250px;
float: left;
}
h3{
margin: 0px 0px 20px 0px;
}
#fields{
position: relative;
width: 250px;
float: left;
}
.element{
margin-bottom: 23px;
border: 1px solid #dadada;
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
}
.different{
margin-top: 4px;
margin-bottom: 22px;
}
.values{
margin-bottom: 23px;
}
.heading, .feedback{
margin-top: 43px;
}
.preference{
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
}
.multiple{
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
margin-top: 20px;
}
textarea{
margin-top: 20px;
border: 1px solid #06a3e9;
box-shadow: 0 0 1px lightblue;
}
a{
color: #06a3e9;
}
.final{
margin-top: 15px;
}
.feedback{
margin-top: 73px;
}
#submit, #reset{
border: 1px solid #dadada;
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
border-radius:5px;
}
input[type="checkbox"]{
display: none;
}
label:before{
width: 1em;
display: inline-block;
}
label{
margin-right: 5px;
}
input[type="checkbox"] + label:before{
font-family: FontAwesome;
display: inline-block;
content: "\f096";
letter-spacing: 5px;
color: #06a3e9;
display: inline-block;
}
input[type="checkbox"]:checked + label:before{
content:"\f14a";
display: inline-block;
color: #06a3e9;
}
input[type="radio"]{
display: none;
}
input[type="radio"] + label:before{
font-family: FontAwesome;
display: inline-block;
content:"\f10c";
font-size: 14px;
color: #06a3e9;
letter-spacing: 5px;
display: inline-block;
}
input[type="radio"]:checked + label:before{
content:"\f192";
font-size: 14px;
display: inline-block;
}
<!doctype html>
<html>
<head>
<title> Register here </title>
<link rel="stylesheet" href="../css/registration.css"/>
<script src = "../javascript/registration.js"></script>
</head>
<body>
<h1>Event Registration Form</h1>
<div id="labels">
<h3>Username</h3>
<h3>Password</h3>
<h3>Age</h3>
<h3>Email</h3>
<h3>Existing customer?</h3>
<h3>Select your preferences</h3>
<h3>Newsletter Preferences</h3>
<h3 class="heading">Menu Options</h3>
<h3 class="feedback">Send us your feedback !</h3>
</div>
<div id="fields">
<form action="#" method="get" name="referenceToForm">
<input type="text" name="Username" id="Username" class="element"required/>
<input type="password" name="Password" class="element" required/>
<input type="number" name="Age" class="element" required/>
<input type="email" name="Email" class="element" required/>
<div class="different">
<input type="radio" name="customer" id="one" checked="checked" />
<label for="one">Yes</label>
<input type="radio" name="customer" id="two" />
<label for="two">No</label>
</div>
<div class="values">
<input type="checkbox" name="interest" id="three" />
<label for="three">Dog</label>
<input type="checkbox" name="interest" id="four" />
<label for="four">Cat</label>
<input type="checkbox" name="interest" id="five" />
<label for="five">Parrot</label>
<input type="checkbox" name="interest" id="six" />
<label for="six">Possum</label>
<span id="spanning"> </span>
</div>
<select class="preference" id="preference" value="-1">
<option value="Entertainment">Entertainment</option>
<option value="Technology">Technology</option>
<option value="TV">TV</option>
</select>
<div class="menu">
<select multiple required id="multiple" class="multiple" value="-1" name="usrgrp[]">
<option value="Sports">Sports</option>
<option value="Politics">Politics</option>
<option value="News">News</option>
<option value="Swimming">Swimming</option>
<option value="Health">Health</option>
</select>
</div>
<textarea rows="5" cols="20" required></textarea>
<div class="final">
<input type="submit" name="submit" id="submit" onclick="validate()" />
<input type="reset" name="reset" id="reset" />
</div>
</form>
</div>
</body>
</html>
UPDATE
Thanks to everyone who tried to help me with this. Below is the code which solves my problem perfectly.
function validate() {
var checkbox1 = document.getElementById('three').checked;
var checkbox2 = document.getElementById('four').checked;
var checkbox3 = document.getElementById('five').checked;
var checkbox4 = document.getElementById('six').checked;
if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == false) {
alert("Please enter all the required values");
return false;
}
}
#import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
#labels{
position: relative;
width: 250px;
float: left;
}
h3{
margin: 0px 0px 20px 0px;
}
#fields{
position: relative;
width: 250px;
float: left;
}
.element{
margin-bottom: 23px;
border: 1px solid #dadada;
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
}
.different{
margin-top: 4px;
margin-bottom: 22px;
}
.values{
margin-bottom: 23px;
}
.heading, .feedback{
margin-top: 43px;
}
.preference{
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
}
.multiple{
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
margin-top: 20px;
}
textarea{
margin-top: 20px;
border: 1px solid #06a3e9;
box-shadow: 0 0 1px lightblue;
}
a{
color: #06a3e9;
}
.final{
margin-top: 15px;
}
.feedback{
margin-top: 73px;
}
#submit, #reset{
border: 1px solid #dadada;
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
border-radius:5px;
}
input[type="checkbox"]{
display: none;
}
label:before{
width: 1em;
display: inline-block;
}
label{
margin-right: 5px;
}
input[type="checkbox"] + label:before{
font-family: FontAwesome;
display: inline-block;
content: "\f096";
letter-spacing: 5px;
color: #06a3e9;
display: inline-block;
}
input[type="checkbox"]:checked + label:before{
content:"\f14a";
display: inline-block;
color: #06a3e9;
}
input[type="radio"]{
display: none;
}
input[type="radio"] + label:before{
font-family: FontAwesome;
display: inline-block;
content:"\f10c";
font-size: 14px;
color: #06a3e9;
letter-spacing: 5px;
display: inline-block;
}
input[type="radio"]:checked + label:before{
content:"\f192";
font-size: 14px;
display: inline-block;
}
<!doctype html>
<html>
<head>
<title> Register here </title>
<link rel="stylesheet" href="../css/registration.css"/>
<script src = "../javascript/registration.js"></script>
</head>
<body>
<h1>Event Registration Form</h1>
<div id="labels">
<h3>Username</h3>
<h3>Password</h3>
<h3>Age</h3>
<h3>Email</h3>
<h3>Existing customer?</h3>
<h3>Select your preferences</h3>
<h3>Newsletter Preferences</h3>
<h3 class="heading">Menu Options</h3>
<h3 class="feedback">Send us your feedback !</h3>
</div>
<div id="fields">
<form action="#" method="get" name="referenceToForm">
<input type="text" name="Username" id="Username" class="element"required/>
<input type="password" name="Password" class="element" required/>
<input type="number" name="Age" class="element" required/>
<input type="email" name="Email" class="element" required/>
<div class="different">
<input type="radio" name="customer" id="one" checked="checked" />
<label for="one">Yes</label>
<input type="radio" name="customer" id="two" />
<label for="two">No</label>
</div>
<div class="values">
<input type="checkbox" name="interest" id="three" />
<label for="three">Dog</label>
<input type="checkbox" name="interest" id="four" />
<label for="four">Cat</label>
<input type="checkbox" name="interest" id="five" />
<label for="five">Parrot</label>
<input type="checkbox" name="interest" id="six" />
<label for="six">Possum</label>
<span id="spanning"> </span>
</div>
<select class="preference" id="preference" value="-1">
<option value="Entertainment">Entertainment</option>
<option value="Technology">Technology</option>
<option value="TV">TV</option>
</select>
<div class="menu">
<select multiple required id="multiple" class="multiple" value="-1" name="usrgrp[]">
<option value="Sports">Sports</option>
<option value="Politics">Politics</option>
<option value="News">News</option>
<option value="Swimming">Swimming</option>
<option value="Health">Health</option>
</select>
</div>
<textarea rows="5" cols="20" required></textarea>
<div class="final">
<input type="submit" name="submit" id="submit" onclick="return validate()" />
<input type="reset" name="reset" id="reset" />
</div>
</form>
</div>
</body>
</html>

I've spotted 2 problems with your form and both are easy to fix.
Your validation function must return either true to submit the form or false to cancel. If you don't supply a return value, as in your code, the form will always be submitted:
<input type="submit" name="submit" id="submit" onclick="validate()" >
To fix this you need to have your validation function return a value which is returned to the onclick handler:
<input type="submit" name="submit" id="submit" onclick="return validate()" >
This line in the validation function throws an error because there are no elements with id="values". You will need to remove or fix this code so that your function completes normally and returns either a true or false value.
if (document.getElementById('values').value == -1) {
alert("Please enter all the required values checkbox");
}
Perhaps someone can comment on this, but I've always seen validation handled in the form onsubmit event rather than the submit button onclick event. Yet, perhaps this is just convention as it appears to work either way:
<form onsubmit="return validate()" ...
<input type="submit" onclick="return validate()" ...

The main thing, if you are using jsFiddle, is to use this method of initializing functions:
window.validate = function() {
and not like this:
function validate() {
Here is my stab at it. No Angular, nor JQuery used, although I recommend learning each of them. I messed up your submit button, but its easily fixed with css. I also added a fake submit button which triggers the verification only. If it passes verification, then it can continue to send. My jsfiddle:
http://jsfiddle.net/omikey/tfk7d3ks/
<div class="container">
<div id="labels">
<h3>Username </h3>
<h3>Password</h3>
<h3>Age</h3>
<h3>Email</h3>
<h3>Existing customer?</h3>
<h3>Select your preferences</h3>
<h3>Newsletter Preferences</h3>
<h3 class="heading">Menu Options</h3>
<h3 class="feedback">Send us your feedback !</h3>
</div>
<div id="fields">
<form action="#" method="get" name="referenceToForm">
<div>
<input type="text" name="Username" id="Username" class="element" required/>
</div>
<div>
<input type="password" name="Password" class="element" required/>
</div>
<div>
<input type="number" name="Age" class="element" required/>
</div>
<div>
<input type="email" name="Email" class="element" required/>
</div>
<div class="different">
<input type="radio" name="customer" id="one" checked="checked" />
<label for="one">Yes</label>
<input type="radio" name="customer" id="two" />
<label for="two">No</label>
</div>
<div class="value">
<input type="checkbox" name="interest" id="three" />
<label for="three">Dog</label>
<input type="checkbox" name="interest" id="four" />
<label for="four">Cat</label>
<input type="checkbox" name="interest" id="five" />
<label for="five">Parrot</label>
<input type="checkbox" name="interest" id="six" />
<label for="six">Possum</label>
<span id="spanning"> </span>
</div>
<div>
<select class="preference" id="preference" value="-1">
<option value="Entertainment">Entertainment</option>
<option value="Technology">Technology</option>
<option value="TV">TV</option>
</select>
</div>
<div class="menu">
<select multiple id="multiple" class="multiple" value="-1" name="usrgrp[]">
<option value="Sports">Sports</option>
<option value="Politics">Politics</option>
<option value="News">News</option>
<option value="Swimming">Swimming</option>
<option value="Health">Health</option>
</select>
<span id="spanElement"> </span>
</div>
<div class="comment">
<textarea rows="5" cols="20" required></textarea>
</div>
<div class="final">
<input type="button" name="verify" onclick="validate()" />
<input type="submit" name="submit" style="display:none" id="submit" />
<input type="reset" name="reset" id="reset" />
</div>
</form>
</div>
</div>
#import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
.container{
width: 100%;
margin-left: 400px;
}
#spanning{
color: #06a3e9;
}
.nav ul{
width: 150px;
float: left;
background-color: #dadada;
padding: 0px;
margin: 0px;
}
.nav li{
list-style-type: none;
}
.nav a{
color:#000;
cursor:pointer;
display: block;
line-height: 40px;
text-indent: 10px;
text-decoration: none;
font-weight: bold;
}
.nav ul ul li{
display: none;
}
.nav li:hover ul li{
display: block;
}
.subnav ul{
position: relative;
background: #dadada;
}
#labels{
position: relative;
width: 250px;
top:80px;
float: left;
}
h3{
margin: 0px 0px 20px 0px;
}
#fields{
position: relative;
width: 250px;
top:80px;
float: left;
}
.element{
margin-bottom: 23px;
border: 1px solid #dadada;
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
}
.different{
margin-top: 4px;
margin-bottom: 22px;
}
.value{
margin-bottom: 23px;
}
.heading, .feedback{
margin-top: 43px;
}
.preference{
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
}
.multiple{
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
margin-top: 20px;
}
textarea{
margin-top: 20px;
border: 1px solid #06a3e9;
box-shadow: 0 0 1px lightblue;
}
a{
color: #06a3e9;
}
.final{
margin-top: 15px;
}
.feedback{
margin-top: 73px;
}
#submit, #reset{
border: 1px solid #dadada;
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
border-radius:5px;
}
input[type="checkbox"]{
display: none;
}
label:before{
width: 1em;
display: inline-block;
}
label{
margin-right: 5px;
}
input[type="checkbox"] + label:before{
font-family: FontAwesome;
display: inline-block;
content: "\f096";
letter-spacing: 5px;
color: #06a3e9;
display: inline-block;
}
input[type="checkbox"]:checked + label:before{
content:"\f14a";
display: inline-block;
color: #06a3e9;
}
input[type="radio"]{
display: none;
}
input[type="radio"] + label:before{
font-family: FontAwesome;
display: inline-block;
content:"\f10c";
font-size: 14px;
color: #06a3e9;
letter-spacing: 5px;
display: inline-block;
}
input[type="radio"]:checked + label:before{
content:"\f192";
font-size: 14px;
display: inline-block;
}
window.validate = function() {
var valid = true;
var checkbox1 = document.getElementById('three').checked;
var checkbox2 = document.getElementById('four').checked;
var checkbox3 = document.getElementById('five').checked;
var checkbox4 = document.getElementById('six').checked;
if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == true) {
if (referenceToForm.elements["usrgrp[]"].selectedIndex == -1) {
alert("Please enter all the required values");
valid = false;
}
}
if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == false) {
if (referenceToForm.elements["usrgrp[]"].selectedIndex == -1) {
alert("Please enter all the required values");
valid = false;
}
}
if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == false) {
if (referenceToForm.elements["usrgrp[]"].selectedIndex != -1) {
alert("Please enter all the required values");
valid = false;
}
}
if (document.getElementById('multiple').value == -1)
{
alert("Please enter all the required values");
valid = false;
}
if (document.getElementById('preference').value == -1)
{
alert("Please enter all the required values");
valid = false;
}
if (valid)
{
document.getElementById('submit').click();
}
}

Related

Problems with legend tag when I am unhiding and re-hiding it in a fieldset

So I am trying to do this thing where a legend tag shows when the input box is being clicked. The idea is there is that the input box is inside a fieldset and the legend as a hidden class first. If the input box is on focus or clicked, the hidden class will be removed and it will show like this
I also added a part wherein if was left blank the legend tag will disappear by re-adding the removed
hidden class. However, it also leaves awkward whitespace in a place where it is formerly was like this
Did I do something wrong? Is there something I must do first?
The code is here:
$(function() {
$(".next").click(function() {
var div = $(this).closest('.wrapper');
var next = $(this).closest('.wrapper').next();
div.addClass('hidden');
next.removeClass('hidden');
})
})
$(function() {
$('input').click(function() {
$('input').each(function(index) {
const legend = $(this).closest('fieldset').children('legend');
if (($(this).val() == "" || $(this).val() == " ") && $(this).is(":focus") == false) {
if (legend.hasClass('hidden') == false) {
legend.addClass('hidden');
$(this).css("margin-top", "10px");
}
} else {
legend.removeClass('hidden');
$(this).css("margin-top", "-150%");
}
})
})
})
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#700&display=swap');
html {
font-family: "Poppins", sans-serif;
margin: 0px;
padding: 0px;
background: #EDE9E8;
}
.cover {
width: 100%;
height: 100%;
position: absolute;
}
form {
/*border: 3px solid red;/**/
width: 57%;
height: 100%;
margin: 0 auto;
}
.child {
width: 50%;
}
.wrapper {
background: white;
width: 95%;
height: 65%;
padding: 3%;
margin-top: 8%;
border-radius: 50px;
display: flex;
}
.border_none {
border: none;
}
.border_black {
border: 2px solid black;
}
.with_image {
text-align: center;
margin-top: 15%;
}
.with_image img {
width: 40%;
}
.input_box {
height: 40px;
width: 70%;
}
.wrapper h1 {
margin-top: 10%;
}
.wrapper label {
font-size: 150%;
}
legend {
font-size: 12px;
/*border: 2px solid black;/**/
}
.wrapper fieldset input[type="text"],
.wrapper fieldset input[type="email"],
.wrapper input[type="password"],
input[type="number"] {
width: 100 %;
height: 100 %;
margin - top: 10 px;
border: none;
/**/
}
.wrapper fieldset input[type="text"]: focus,
.wrapper input[type="email"]: focus,
.wrapper input[type="password"]: focus,
input[type="number"]: focus {
outline: none;
}
.child fieldset {
overflow: hidden;
border - radius: 20 px;
}
.wrapper select {
margin - left: 14 %;
height: 40 px;
}
.wrapper.next {
background: #2c54db;
width: 15%;
height: 8%;
border: white;
color: white;
float: right;
border-radius: 40px;
font-weight: bold;
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cover">
<form method="post" action="">
<fieldset class="wrapper border_none">
<div class="child">
<h1>Identity</h1>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">First Name</legend>
<input class="input_inner" type="text" name="fname" placeholder="First Name">
</fieldset><br>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">Last Name</legend>
<input class="input_inner" type="text" name="lname" placeholder="Last Name">
</fieldset><br>
<label>Civil Status</label>
<select name="civil_status" id="cv_stat">
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Widowed">Widowed</option>
<option value="Annulled">Anulled</option>
</select><br><br>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">Email</legend><input type="email" name="email" placeholder="Email">
</fieldset>
<button type="button" class="next">
Next
</button>
</div>
<div class="child with_image">
<img src="../images/registration/user_folder_125px.png">
</div>
</fieldset>
<fieldset class="wrapper hidden">
<div class="child">
<h1>Password</h1>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">Password</legend>
<input type="password" name="password" placeholder="Password">
</fieldset>
<br>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">Confirm Password</legend>
<input type="password" name="cpassword" placeholder="Confirm Password">
</fieldset>
<button type="button" class="next">
Next
</button>
</div>
</div>
<div class="child">
</fieldset>
</form>
</div>
Thank you in advance!

When checked multiple checkboxes form fields should appear accordingly with common fields

When the user checks multiple checkboxes, form fields should appear according to the checkboxes, example: if flight checkbox had full name last name, when user checked both hotel and flight the full name and last name should be there and other fields should be hidden.
I have tried a toggle method which hides when I check, but I can not select multiple fields and get the common fields together and hide others. also my checkboxes should be aligned horizontally. I should css but it's not working
function toggle(object) {
var input;
var value = object.getAttribute("value");
switch (value) {
case "flight":
input = "input1";
break;
case "hotel":
input = "input2";
break;
case "travel":
input = "input3";
break;
}
var elements = document.getElementsByClassName(input);
for (var i = 0; i < elements.length; i++) {
if (elements[i].style.display == "block") {
elements[i].style.display = "none";
} else {
elements[i].style.display = "block";
}
}
document.getElementsByTagName("button")[0].style.display = "block";
}
.form-style-1 {
max-width: 600px;
padding: 15px 25px;
background: #f4f7f8;
margin: 15px auto;
padding: 20px;
background: #f4f7f8;
border-radius: 18px;
font-family: Calibri, sans-serif;
}
.form-style-1 fieldset {
border-radius: none;
background-color: #f2f2f2;
padding: 20px;
border: 1px solid lightgray;
width: 550px;
margin: auto;
}
.form-style-1 lable {
width: 180px;
float: left;
padding-top: 50px;
}
.form-control {
width: 550px;
padding: 15px 30px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
display: inline;
}
output {
height: 30px;
display: block;
padding-top: 20px;
}
.btn {
width: 100%;
background-color: #4CAF50;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn:hover {
background-color: #45a049;
}
.form-style-1 input[type="text"],
.form-style-1 input[type="date"],
.form-style-1 input[type="datetime"],
.form-style-1 input[type="email"],
.form-style-1 input[type="number"],
.form-style-1 input[type="search"],
.form-style-1 input[type="time"],
.form-style-1 input[type="url"],
.form-style-1 input[type="tel"],
.form-style-1 textarea,
.form-style-1 select {
font-family: Calibri, sans-serif;
background: rgba(255, 0, 0, 0.2);
border: none;
border-radius: 3px;
font-size: 15px;
margin: 0;
outline: 0;
padding: 10px;
width: 50%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color: #000000;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
margin-bottom: 10px;
}
.form-style-1 input[type="text"]:focus,
.form-style-1 input[type="date"]:focus,
.form-style-1 input[type="datetime"]:focus,
.form-style-1 input[type="email"]:focus,
.form-style-1 input[type="number"]:focus,
.form-style-1 input[type="search"]:focus,
.form-style-1 input[type="time"]:focus,
.form-style-1 input[type="url"]:focus,
.form-style-1 input[type="tel"],
.form-style-1 textarea:focus,
.form-style-1 input {}
}
.form-style-1 select {
-webkit-appearance: menulist-button;
height: 15px;
color: #000000;
text-shadow: 0 1px 0 rgba(0, 0, 0);
background: #d2d9dd;
}
.form-style-1 number {
background: #1abc9c;
color: #000000;
height: 10px;
width: 10px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 10px;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
border-radius: 15px 15px 15px 0px;
}
.form-style-1 input[type="submit"],
.form-style-1 input[type="button"] {
position: relative;
display: block;
padding: 15px 29px 15px 29px;
color: #FFF;
margin: 0 auto;
background: #1abc9c;
font-size: 15px;
text-align: center;
line-height: 10%;
font-style: normal;
width: 30%;
border: 1px solid #16a085;
border-width: 1px 1px 3px;
margin-top: 1px;
margin-bottom: 5px;
}
.form-style-1 input[type="submit"]:hover,
.form-style-1 input[type="button"]:hover {
background: #109177;
}
#travel-form label,
textarea {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
width: 80%;
padding-bottom: 0.1rem;
}
#travel-form input,
select {
margin-left: 1rem;
}
textarea {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
width: 250%;
padding-bottom: 0.1rem;
}
.common {
margin-bottom: 8px;
}
input[type="text"] {
display: none;
}
button {
display: none;
}
input[type="checkbox"] {
display: inline;
width: 12px;
height: 12px;
padding: 5px;
}
<body>
<div class="form-style-1">
<form action="mailto: ?subject=Travel Pre-approval Form " method="post" enctype="text/plain" id="travel-form" onsubmit="test1()">
<fieldset>
<input type="checkbox" onclick="toggle(this)" id="flight" value="flight"><label for="flight">Flight</label>
<input type="checkbox" onclick="toggle(this)" id="hotel" value="hotel"><label for="hotel">Hotel</label>
<input type="checkbox" onclick="toggle(this)" id="travel" value="travel"><label for="travel">Travel</label>
<label>Full Name: <input type="text" class="input1 common " id="name" placeholder="Full Name as per Passport"></label><br>
<label>Date of travel: <input type="date" class="input1 common " name="num1" id="date of travel"></label>
<label>Date of arrival: <input type="date" class="input1 common" name="num2"></label>
<label>Origin Location: <select name="opt2" id="cost" onchange="calculateTotal()">
<option value="select">select</option>
<option value="Dubai, United Arab Emirates (DXB-Dubai Intl.)">Dubai, United Arab Emirates (DXB-Dubai Intl.)</option>
</select></label>
<label>Destination Location: <select name="op1" id="locations" onchange="calculateTotal()">
<option value="none">none</option>
<option value="Aberdeen, Scotland, UK (ABZ)">Aberdeen, Scotland, UK (ABZ)</option>
</select></label>
<label>Mobile Number(Roaming) <input type="tel" id="phone"></label><br>
<br>
<label>Company Email Address <input type="email" id="email" placeholder="email address"></label><br>
<br>
<label>Passport Number <input type="text" id="passnum" size="5" name="passportnumber"></label>
<br>
<br>
<label>Passport Expiry Date <input type="date" id="passexdate" size="4" name="passportexdate"></label> <br>
<br>
<label>Visa Required <select type="checkbox" name="visarequired">
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Don't Know">Don't Know</option>
</select></label>
<br>
<br>
<label>Visa Expiry Date <input type="date" id="visaexdate" name="visa"> </label>
<br>
<br>
<label>Purpose of Travel <input type="text" rows="6" cols="50" name="purpose Of Travel" form="usrform" placeholder="Purpose Of Travel">
</label> <br>
<label>Address Of Place Of Visitrows <input type="text" rows="6" cols="50" name="address" form="usrform" placeholder="Address of the place of Vist">
</label> <br>
<br>
<label>Billable Cost Centre <input type="text" id="billablecostcentre"></label>
<br>
<br>
<label>Billable project code <br> (Select "N/A" otherwise) <input type="text"></label>
<br>
<br>
<textarea rows="4" cols="150" name="comment" form="usrform" placeholder="Comments">
</textarea>
<label>Do you need Ground Transfer <select type="checkbox" namegroundtransfer>
<option>Yes</option>
<option>No</option>
</select></label>
<br>
<div id="totalCost">Total Cost </div><br>
<br>
<br>
<input type="submit" value="Submit">
</fieldset>
</form>
</div>
Check out the following code, it's a bit shortened and generalized CSS only approach of your form, that allows you to toggle form fields conditionally with checkboxes:
.form__field {
display: block;
}
[class*="--checkbox"] {
display: inline-block;
}
[data-conditional] {
display: none;
}
#flight:checked ~ [data-conditional*="flight"] {
display: block;
}
#hotel:checked ~ [data-conditional*="hotel"] {
display: block;
}
#travel:checked ~ [data-conditional*="travel"] {
display: block;
}
<form action="mailto:?subject=Travel Pre-approval Form " method="POST" enctype="text/plain" id="travel-form" onsubmit="test1()">
<input class="form__input form__input--checkbox" type="checkbox" id="flight" />
<label class="form__field form__field--checkbox" for="flight">
<span class="form__label">Flight</span>
</label>
<input class="form__input form__input--checkbox" type="checkbox" id="hotel" />
<label class="form__field form__field--checkbox" for="hotel">
<span class="form__label">Hotel</span>
</label>
<input class="form__input form__input--checkbox" type="checkbox" id="travel" />
<label class="form__field form__field--checkbox" for="travel">
<span class="form__label">Travel</span>
</label>
<label class="form__field form__field--text" data-conditional="flight hotel">
<span class="form__label">Full Name:</span>
<input class="form__input" type="text" placeholder="Full Name as per Passport" />
</label>
<label class="form__field form__field--date" data-conditional="flight hotel">
<span class="form__label">Date of travel:</span>
<input class="form__input" type="date" />
</label>
<label class="form__field form__field--date" data-conditional="flight hotel">
<span class="form__label">Date of arrival:</span>
<input class="form__input" type="date" />
</label>
<label class="form__field form__field--text" data-conditional="flight">
<span class="form__label">For Flight only:</span>
<input class="form__input form__input--text" type="text" />
</label>
<label class="form__field form__field--text" data-conditional="hotel">
<span class="form__label">For Hotel only:</span>
<input class="form__input form__input--text" type="text" />
</label>
<label class="form__field form__field--text" data-conditional="travel">
<span class="form__label">For Travel only:</span>
<input class="form__input form__input--text" type="text" />
</label>
<div class="form__field form__field--submit">
<button type="submit">Submit</button>
</div>
</form>
also my checkboxes should be aligned horizontally
this should be satisfied as well by the above snippet
We basically use checkboxes to toggle form fields based on the data-conditional attribute (you can call it whatever you like) that contains some value(s) we control to show/hide the form fields. The relatively simple secret-sauce part here is the general next sibling selector combined with HTML markup that allows us to use it properly.
I added some more fields that only show up for a single checkbox at the end of the form, to illustrate how the conditional filter works.

How to add check box using field-wrap tag in html?

I'm trying to add check using field-wrap tag, but space submit button and check box non-aligned. I have to two forms called sign up and login. Sign up form contains many fields like name, email, password, etc.. Tried in terms and condition using checkbox in sign up form, but alignment is messed up.
*, *:before, *:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background: #fff;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration: none;
color: #4F5459;
transition: .5s ease;
}
a:hover {
color: #71D72C;
}
.form .forgot p {
color: #4F5459;
}
.form {
background: #fff;
padding: 40px;
max-width: 500px;
margin: 30px auto;
border-radius: 4px;
/* box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3); */
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
height: 50%;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: #4F5459;
color: #fff;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: .5s ease;
}
.tab-group li a:hover {
background: #71D72C;
color: #ffffff;
}
.tab-group .active a {
background: #71D72C;
color: #ffffff;
}
.tab-content > div:last-child {
display: none;
}
h1 {
text-align: center;
color: #4F5459;
font-weight: 300;
margin: 0 0 30px;
}
label {
position: absolute;
-webkit-transform: translateY(6px);
transform: translateY(6px);
left: 14px;
color: #4F5459;
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size: 14px;
}
label .req {
margin: 2px;
color: #4F5459;
}
label.active {
-webkit-transform: translateY(35px);
transform: translateY(35px);
left: 2px;
font-size: 14px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #4F5459;
font-size: 14px;
}
input, textarea {
font-size: 15px;
display: block;
width: 100%;
height: 100%;
padding: 5px 10px;
background: #E7E8E6;
background-image: none;
border: 1px solid #a0b3b0;
color: #4F5459;
border-radius: 0;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
outline: 0;
border-color: #71D72C;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.field-wrap {
position: relative;
margin-bottom: 30px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row > div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row > div:last-child {
margin: 0;
}
.button {
border: 0;
outline: none;
border-radius: 0;
padding: 15px 0;
font-size: 20px;
font-weight: 300;
/* text-transform: uppercase; */
letter-spacing: .1em;
background: #71D72C;
color: #ffffff;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover, .button:focus {
background: #71D72C;
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sign-Up/Login Form</title>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="form">
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<!-- <h1>Sign Up for Free</h1> -->
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Business Name<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
<h1 style="font-size:14px; text-align: left; font-weight: 600">Payment</h1>
<div class="field-wrap">
<label>
Name on Card<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Card Number<span class="req">*</span>
</label>
<input type="number"required autocomplete="off"/>
</div>
<div class="top-row">
<h1 style="font-size:14px; text-align: left; font-weight: 600">Expiration</h1>
<div class="field-wrap">
<label>
MM<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
YYYY<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
CVC<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label><input type="checkbox" />Option 1</label>
<!-- <input type="checkbox" required autocomplete="off" /> -->
<!-- <input type="checkbox" class="form-check-input" id="exampleCheck1" required autocomplete="off"> -->
<!-- <label class="req form-check-label" for="exampleCheck1">Check me out</label> -->
</div>
<button type="submit" class="button button-block"/>Sign Up</button>
</form>
</div>
<div id="login">
<!-- <h1>Welcome Back!</h1> -->
<form action="/" method="post">
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block"/>Log In</button>
</form>
</div>
</div><!-- tab-content -->
</div> <!-- /form -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
From snippet can able to see check box and submit button are non aligned. How to add check box like above input field with correct space?
You have coded CSS for input, so for all input element, it will take width:100% & height:100% etc...
See the attached snippet
*, *:before, *:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background: #fff;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration: none;
color: #4F5459;
transition: .5s ease;
}
a:hover {
color: #71D72C;
}
.form .forgot p {
color: #4F5459;
}
.form {
background: #fff;
padding: 40px;
max-width: 500px;
margin: 30px auto;
border-radius: 4px;
/* box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3); */
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
height: 50%;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: #4F5459;
color: #fff;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: .5s ease;
}
.tab-group li a:hover {
background: #71D72C;
color: #ffffff;
}
.tab-group .active a {
background: #71D72C;
color: #ffffff;
}
.tab-content > div:last-child {
display: none;
}
h1 {
text-align: center;
color: #4F5459;
font-weight: 300;
margin: 0 0 30px;
}
label {
/* position: absolute;
-webkit-transform: translateY(6px);
transform: translateY(6px);
left: 14px;
pointer-events: none;*/
color: #4F5459;
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
font-size: 14px;
}
label .req {
margin: 2px;
color: #4F5459;
}
label.active {
-webkit-transform: translateY(35px);
transform: translateY(35px);
left: 2px;
font-size: 14px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #4F5459;
font-size: 14px;
}
input, textarea {
font-size: 15px;
display: block;
width: 100%;
height: 100%;
padding: 5px 10px;
background: #E7E8E6;
background-image: none;
border: 1px solid #a0b3b0;
color: #4F5459;
border-radius: 0;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
outline: 0;
border-color: #71D72C;
}
[type=checkbox], [type=radio] {
box-sizing: border-box;
padding: 0;
width: 20px;
height: 20px;
display: inline;
vertical-align: middle;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.field-wrap {
position: relative;
margin-bottom: 30px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row > div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row > div:last-child {
margin: 0;
}
.button {
border: 0;
outline: none;
border-radius: 0;
padding: 15px 0;
font-size: 20px;
font-weight: 300;
/* text-transform: uppercase; */
letter-spacing: .1em;
background: #71D72C;
color: #ffffff;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover, .button:focus {
background: #71D72C;
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/>
<div class="form">
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<!-- <h1>Sign Up for Free</h1> -->
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label> First Name<span class="req">*</span> </label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label> Last Name<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label> Email Address<span class="req">*</span> </label>
<input type="email" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> Password<span class="req">*</span> </label>
<input type="password" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> Business Name<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
<h1 style="font-size:14px; text-align: left; font-weight: 600">Payment</h1>
<div class="field-wrap">
<label> Name on Card<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> Card Number<span class="req">*</span> </label>
<input type="number" required autocomplete="off"/>
</div>
<div class="top-row">
<h1 style="font-size:14px; text-align: left; font-weight: 600">Expiration</h1>
<div class="field-wrap">
<label> MM<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> YYYY<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label> CVC<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
<input type="checkbox" >
Option 1</label>
<!-- <input type="checkbox" required autocomplete="off" /> -->
<!-- <input type="checkbox" class="form-check-input" id="exampleCheck1" required autocomplete="off"> -->
<!-- <label class="req form-check-label" for="exampleCheck1">Check me out</label> -->
</div>
<button type="submit" class="button button-block">Sign Up</button>
</form>
</div>
<div id="login">
<!-- <h1>Welcome Back!</h1> -->
<form action="/" method="post">
<div class="field-wrap">
<label> Email Address<span class="req">*</span> </label>
<input type="email" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> Password<span class="req">*</span> </label>
<input type="password" required autocomplete="off"/>
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block">Log In</button>
</form>
</div>
</div>
<!-- tab-content -->
</div>
<!-- /form -->

jQuery Multi-Step Wizard Form

I trying to submit a form (perl script) with a demo of jQuery Multi-Step Wizard Form but for the life of me I cannot get it to submit to my test script NoScript.pl.
I have read the documentation and really cant seem to figure it out any help is appreciated.
window.onload = function() {
$(function() {
var $signupForm = $('#SignupForm');
$signupForm.validationEngine();
$signupForm.formToWizard({
submitButton: 'SaveAccount',
showProgress: true, //default value for showProgress is also true
nextBtnName: 'Forward >>',
prevBtnName: '<< Previous',
showStepNo: true,
validateBeforeNext: function() {
return $signupForm.validationEngine('validate');
}
});
$('#txt_stepNo').change(function() {
$signupForm.formToWizard('GotoStep', $(this).val());
});
$('#btn_next').click(function() {
$signupForm.formToWizard('NextStep');
});
$('#btn_prev').click(function() {
$signupForm.formToWizard('PreviousStep');
});
});
}
body {
font-family: Lucida Sans, Arial, Helvetica, Sans-Serif;
font-size: 13px;
margin: 20px;
}
#header {
text-align: center;
border-bottom: solid 1px #b2b3b5;
margin: 0 0 20px 0;
}
fieldset {
border: none;
width: 320px;
}
legend {
font-size: 18px;
margin: 0px;
padding: 10px 0px;
color: #b0232a;
font-weight: bold;
}
label {
display: block;
margin: 15px 0 5px;
}
input[type=text],
input[type=password] {
width: 300px;
padding: 5px;
border: solid 1px #000;
}
button,
.prev,
.next {
background-color: #b0232a;
padding: 5px 10px;
color: #fff;
text-decoration: none;
}
button:hover,
.prev:hover,
.next:hover {
background-color: #000;
text-decoration: none;
}
button {
border: none;
}
#controls {
background: #eee;
box-shadow: 0 0 16px #999;
height: 30px;
position: fixed;
padding: 10px;
top: 0;
left: 0;
width: 100%;
dex: 1
}
#controls h1 {
color: #666;
display: inline-block;
margin: 0 0 8px 0
}
#controls input[type=text] {
border-color: #999;
margin: 0 25px;
width: 120px
}
#steps {
margin: 80px 0 0 0
}
.prev {
float: left
}
.next {
float: right
}
.steps {
list-style: none;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0
}
.steps li {
color: #b0b1b3;
font-size: 24px;
float: left;
padding: 10px;
transition: all -moz-transition:all .3s;
-webkit-transition: all -o-transition:all .3s
}
.steps li span {
font-size: 11px;
display: block
}
.steps li.current {
color: #000
}
.breadcrumb {
height: 37px
}
.breadcrumb li {
background: #eee;
font-size: 14px
}
.breadcrumb li.current:after {
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
border-left: 6px solid;
content: ' ';
position: absolute;
top: 0;
right: -6px
}
.breadcrumb li.current {
background: #666;
color: #eee;
position: relative
}
.breadcrumb li:last-child:after {
border: none
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/artoodetoo/formToWizard/v0.0.2/jquery.formtowizard.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.min.js"></script>
<form id="SignupForm" action="http://www.smldesign.net/cgi-bin/NoScript.pl" method="post">
<fieldset>
<legend>Account information</legend>
<label for="Name">Name</label>
<input id="Name" type="text" class="validate[required]" />
<label for="Email">Email</label>
<input id="Email" type="text" class="validate[custom[email],required]" />
<label for="Password">Password</label>
<input id="Password" type="password" />
</fieldset>
<fieldset>
<legend>Company information</legend>
<label for="CompanyName">Company Name</label>
<input id="CompanyName" type="text" class="validate[required]" />
<label for="Website">Website</label>
<input id="Website" type="text" />
<label for="CompanyEmail">CompanyEmail</label>
<input id="CompanyEmail" type="text" />
</fieldset>
<fieldset>
<legend>Billing information</legend>
<label for="NameOnCard">Name on Card</label>
<input id="NameOnCard" type="text" />
<label for="CardNumber">Card Number</label>
<input id="CardNumber" type="text" />
<label for="CreditcardMonth">Expiration</label>
<select id="CreditcardMonth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="CreditcardYear">>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
<label for="Address1">Address 1</label>
<input id="Address1" type="text" />
<label for="Address2">Address 2</label>
<input id="Address2" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="City">Country</label>
<select id="Country">
<option value="CA">Canada</option>
<option value="US">United States of America</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="VI">United States Virgin Islands</option>
</select>
</fieldset>
<p>
<input id="SaveAccount" type="button" value="Submit form" />
</p>
</form>
To fix this issue have you attempted using jQuery's $.submit() function when the final step is called. This would be:
$("#SaveAccount").click(function() {
$("#SignupForm").submit();
}
Remember the "Submit Form" button only shows up at the final step, you just need to add this snippet of code to your Javascript after the $('#btn_prev').click(function(){...} function.
window.onload = function() {
$(function() {
var $signupForm = $('#SignupForm');
$signupForm.validationEngine();
$signupForm.formToWizard({
submitButton: 'SaveAccount',
showProgress: true, //default value for showProgress is also true
nextBtnName: 'Forward >>',
prevBtnName: '<< Previous',
showStepNo: true,
validateBeforeNext: function() {
return $signupForm.validationEngine('validate');
}
});
$('#txt_stepNo').change(function() {
$signupForm.formToWizard('GotoStep', $(this).val());
});
$('#btn_next').click(function() {
$signupForm.formToWizard('NextStep');
});
$('#btn_prev').click(function() {
$signupForm.formToWizard('PreviousStep');
});
$("#SaveAccount").click(function() {
$("#SignupForm").submit();
});
});
}
body {
font-family: Lucida Sans, Arial, Helvetica, Sans-Serif;
font-size: 13px;
margin: 20px;
}
#header {
text-align: center;
border-bottom: solid 1px #b2b3b5;
margin: 0 0 20px 0;
}
fieldset {
border: none;
width: 320px;
}
legend {
font-size: 18px;
margin: 0px;
padding: 10px 0px;
color: #b0232a;
font-weight: bold;
}
label {
display: block;
margin: 15px 0 5px;
}
input[type=text],
input[type=password] {
width: 300px;
padding: 5px;
border: solid 1px #000;
}
button,
.prev,
.next {
background-color: #b0232a;
padding: 5px 10px;
color: #fff;
text-decoration: none;
}
button:hover,
.prev:hover,
.next:hover {
background-color: #000;
text-decoration: none;
}
button {
border: none;
}
#controls {
background: #eee;
box-shadow: 0 0 16px #999;
height: 30px;
position: fixed;
padding: 10px;
top: 0;
left: 0;
width: 100%;
dex: 1
}
#controls h1 {
color: #666;
display: inline-block;
margin: 0 0 8px 0
}
#controls input[type=text] {
border-color: #999;
margin: 0 25px;
width: 120px
}
#steps {
margin: 80px 0 0 0
}
.prev {
float: left
}
.next {
float: right
}
.steps {
list-style: none;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0
}
.steps li {
color: #b0b1b3;
font-size: 24px;
float: left;
padding: 10px;
transition: all -moz-transition:all .3s;
-webkit-transition: all -o-transition:all .3s
}
.steps li span {
font-size: 11px;
display: block
}
.steps li.current {
color: #000
}
.breadcrumb {
height: 37px
}
.breadcrumb li {
background: #eee;
font-size: 14px
}
.breadcrumb li.current:after {
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
border-left: 6px solid;
content: ' ';
position: absolute;
top: 0;
right: -6px
}
.breadcrumb li.current {
background: #666;
color: #eee;
position: relative
}
.breadcrumb li:last-child:after {
border: none
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/artoodetoo/formToWizard/v0.0.2/jquery.formtowizard.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.min.js"></script>
<form id="SignupForm" action="http://www.smldesign.net/cgi-bin/NoScript.pl" method="post">
<fieldset>
<legend>Account information</legend>
<label for="Name">Name</label>
<input id="Name" type="text" class="validate[required]" />
<label for="Email">Email</label>
<input id="Email" type="text" class="validate[custom[email],required]" />
<label for="Password">Password</label>
<input id="Password" type="password" />
</fieldset>
<fieldset>
<legend>Company information</legend>
<label for="CompanyName">Company Name</label>
<input id="CompanyName" type="text" class="validate[required]" />
<label for="Website">Website</label>
<input id="Website" type="text" />
<label for="CompanyEmail">CompanyEmail</label>
<input id="CompanyEmail" type="text" />
</fieldset>
<fieldset>
<legend>Billing information</legend>
<label for="NameOnCard">Name on Card</label>
<input id="NameOnCard" type="text" />
<label for="CardNumber">Card Number</label>
<input id="CardNumber" type="text" />
<label for="CreditcardMonth">Expiration</label>
<select id="CreditcardMonth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="CreditcardYear">>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
<label for="Address1">Address 1</label>
<input id="Address1" type="text" />
<label for="Address2">Address 2</label>
<input id="Address2" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="City">Country</label>
<select id="Country">
<option value="CA">Canada</option>
<option value="US">United States of America</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="VI">United States Virgin Islands</option>
</select>
</fieldset>
<p>
<input id="SaveAccount" type="button" value="Submit form" />
</p>
</form>
I believe the above answer is correct.
At no point does it appear that you are actually forcing your FORM that posts the Perl script to execute a submit.
The jQuery submit method can do that for you.
p.s., your credit-card submission form appears to be non-TLS

How to validate a multiple step form

I not able to validate a multiple step form - I want a validation for each field instead of now it validates sets of fields
My code
function show_next(id, nextid, bar) {
var ele = document.getElementById(id).getElementsByTagName("input");
var error = 0;
for (var i = 0; i < ele.length; i++) {
if (ele[i].type == "text" && ele[i].value == "") {
error++;
}
}
if (error == 0) {
document.getElementById("account_details").style.display = "none";
document.getElementById("user_details").style.display = "none";
document.getElementById("qualification").style.display = "none";
$("#" + nextid).fadeIn();
document.getElementById(bar).style.backgroundColor = "#38610B";
} else {
alert("Fill All The details");
}
}
function show_prev(previd, bar) {
document.getElementById("account_details").style.display = "none";
document.getElementById("user_details").style.display = "none";
document.getElementById("qualification").style.display = "none";
$("#" + previd).fadeIn();
document.getElementById(bar).style.backgroundColor = "#D8D8D8";
}
body {
margin: 0 auto;
padding: 0;
text-align: center;
background-color: #D8D8D8;
}
#wrapper {
width: 995px;
padding: 0px;
margin: 0px auto;
font-family: helvetica;
position: relative;
}
#wrapper .baricon {
display: inline-block;
border-radius: 100%;
padding: 12px;
background-color: #38610B;
color: white;
}
#wrapper .progress_bar {
width: 200px;
height: 5px;
border-radius: 20px;
background-color: #D8D8D8;
display: inline-block;
}
#wrapper form div {
margin-left: 340px;
padding: 10px;
box-sizing: border-box;
width: 300px;
margin-top: 50px;
background-color: #585858;
}
#wrapper form div p {
color: #F2F2F2;
margin: 0px;
margin-top: 10px;
font-weight: bold;
}
#wrapper form div .form_head {
font-size: 22px;
font-weight: bold;
margin-bottom: 30px;
}
#wrapper form div input[type="text"] {
width: 200px;
height: 40px;
padding: 5px;
border-radius: 5px;
border: none;
margin-top: 10px;
}
#wrapper form div input[type="button"],
input[type="submit"] {
width: 80px;
height: 40px;
border-radius: 5px;
border: 2px solid white;
background: none;
color: white;
margin: 5px;
margin-top: 10px;
}
#user_details,
#qualification {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapper">
<br>
<span class='baricon'>1</span>
<span id="bar1" class='progress_bar'></span>
<span class='baricon'>2</span>
<span id="bar2" class='progress_bar'></span>
<span class='baricon'>3</span>
<form method="post" action="">
<div id="account_details">
<p class='form_head'>Account Details</p>
<p>Email Address</p>
<input type="text" placeholder='Email Address'>
<p>Password</p>
<input type="text" placeholder='Password'>
<br>
<input type="button" value="Next" onclick="show_next('account_details','user_details','bar1');">
</div>
<div id="user_details">
<p class='form_head'>User Details</p>
<p>First Name</p>
<input type="text" placeholder='First Name'>
<p>Last Name</p>
<input type="text" placeholder='Last Name'>
<p>Gender</p>
<input type="text" placeholder='Gender'>
<br>
<input type="button" value="Previous" onclick="show_prev('account_details','bar1');">
<input type="button" value="Next" onclick="show_next('user_details','qualification','bar2');">
</div>
<div id="qualification">
<p class='form_head'>Qualification</p>
<p>Qualification</p>
<input type="text" placeholder='Qualification'>
<p>Hobbies</p>
<input type="text" placeholder='Hobbies'>
<br>
<input type="button" value="Previous" onclick="show_prev('user_details','bar2');">
<input type="Submit" value="Submit">
</div>
</form>
</div>
Here is a version that will not go to the next page if there are errors
Let me know what you think
I added two validations. You can change the rest. The code is vastly simplified
function isEmail(str) { // simple email validation
return /(.+)#(.+){2,}\.(.+){2,}/.test($.trim(str));
}
function isEmpty(str) { // test for empty string
return $.trim(str) === "";
}
function validate($div) { // validates any div - will not let you leave the div if error
var $fields = $div.find("input"), hasError = false;
$fields.each(function() {
$(this).removeClass("error")
hasError = this.name=="pword" && isEmpty(this.value);
if (hasError) {
$("#pword").addClass("error").focus();
return false;
}
hasError = this.name=="email" && (isEmpty(this.value) || !isEmail(this.value));
if (hasError) {
$("#email").addClass("error").focus();
return false;
}
hasError = isEmpty(this.value); // the rest of the fields
if (hasError) {
$(this).addClass("error").focus();
return false;
}
})
return hasError?false:true;
}
$(function() {
// validate all divs on submit, but actually only necessary to validate thediv the submit is on
$("#myForm").on("submit",function(e) {
$(".page").each(function() {
if (!validate($(this))) {
e.preventDefault(); // stop submission
return false;
}
});
});
$(".nav").on("click", function() {
var $parent = $(this).closest("div");
var $nextDiv = $(this).hasClass("next") ? $parent.next() : $parent.prev();
if (validate($parent)) { // is the div this button is on valid?
$parent.fadeOut(function() { // fade it out and fade the next one in
if ($nextDiv.length) {
$nextDiv.fadeIn()
for (var i=$(".page").length;i> $nextDiv.index(); i--) {
$("#bar" + i).css({"background-color": "#D8D8D8"}); // we are going backwards
}
$("#bar" + $nextDiv.index()).css({"background-color": "#38610B"});
}
});
}
});
});
body {
margin: 0 auto;
padding: 0;
text-align: center;
background-color: #D8D8D8;
}
#wrapper {
width: 995px;
padding: 0px;
margin: 0px auto;
font-family: helvetica;
position: relative;
}
#wrapper .baricon {
display: inline-block;
border-radius: 100%;
padding: 12px;
background-color: #38610B;
color: white;
}
#wrapper .progress_bar {
width: 200px;
height: 5px;
border-radius: 20px;
background-color: #D8D8D8;
display: inline-block;
}
#wrapper form div {
margin-left: 340px;
padding: 10px;
box-sizing: border-box;
width: 300px;
margin-top: 50px;
background-color: #585858;
}
#wrapper form div p {
color: #F2F2F2;
margin: 0px;
margin-top: 10px;
font-weight: bold;
}
#wrapper form div .form_head {
font-size: 22px;
font-weight: bold;
margin-bottom: 30px;
}
#wrapper form div input[type="text"] {
width: 200px;
height: 40px;
padding: 5px;
border-radius: 5px;
border: none;
margin-top: 10px;
}
#wrapper form div input[type="button"],
input[type="submit"] {
width: 80px;
height: 40px;
border-radius: 5px;
border: 2px solid white;
background: none;
color: white;
margin: 5px;
margin-top: 10px;
}
#user_details,
#qualification {
display: none;
}
.error { background-color:pink !important}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapper">
<br>
<span class='baricon'>1</span>
<span id="bar1" class='progress_bar'> </span>
<span class='baricon'>2</span>
<span id="bar2" class='progress_bar'> </span>
<span class='baricon'>3</span>
<form method="post" action="" id="myForm">
<div id="account_details" class="page">
<p class='form_head'>Account Details</p>
<p>Email Address</p>
<input type="text" name="email" id="email" placeholder='Email Address'>
<p>Password</p>
<input type="text" name="pword" id="pword" placeholder='Password'>
<br>
<input type="button" value="Next" class="nav next" />
</div>
<div id="user_details" class="page">
<p class='form_head'>User Details</p>
<p>First Name</p>
<input type="text" name="fname" id="fname" placeholder='First Name'>
<p>Last Name</p>
<input type="text" name="lname" is="lname" placeholder='Last Name'>
<p>Gender</p>
<input type="text" name="gender" id="gender" placeholder='Gender'>
<br>
<input type="button" value="Prev" class="nav prev" />
<input type="button" value="Next" class="nav next" />
</div>
<div id="qualification" class="page">
<p class='form_head'>Qualification</p>
<p>Qualification</p>
<input type="text" placeholder='Qualification'>
<p>Hobbies</p>
<input type="text" placeholder='Hobbies'>
<br>
<input type="button" value="Prev" class="nav prev" />
<input type="Submit" value="Submit">
</div>
</form>
</div>

Categories

Resources