Javascript concatenate multiple string variables and display in span - javascript

I have a simple page that makes a flyer. I have the data displaying and am stuck with taking three of the variables and displaying them in a span for tear-off. Here's what I have so far. I've tried a few different approaches trying to get the Title, Name, and Phone to print out in the div. I'm using the multi-event listener to trigger the function to place the data in the span using the getElementsByClassName handler. Any direction is much appreciated.
// JavaScript Document
// Fill Flyer text Areas
// Flyer Title
var inputBoxTitle = document.getElementById('title_input');
inputBoxTitle.onkeyup = function(){
document.getElementById('title').innerHTML = inputBoxTitle.value;
}
// Contact Name
var inputBoxConName = document.getElementById('con_name_input');
inputBoxConName.onkeyup = function(){
document.getElementById('con_name').innerHTML = inputBoxConName.value;
}
// Contact Email
var inputBoxEmail = document.getElementById('email_input');
inputBoxEmail.onkeyup = function(){
document.getElementById('email').innerHTML = inputBoxEmail.value;
}
// Contact Phone
var inputBoxPhone = document.getElementById('phone_input');
inputBoxPhone.onkeyup = function(){
document.getElementById('phone').innerHTML = inputBoxPhone.value;
}
// Animal Name
var inputAnimalName = document.getElementById('name_animal_input');
inputAnimalName.onkeyup = function(){
document.getElementById('animal_name').innerHTML = inputAnimalName.value;
}
// Lost/Found Date
var inputLostDate = document.getElementById('date_lost_input');
inputLostDate.onkeyup = function(){
document.getElementById('date_lost').innerHTML = inputLostDate.value;
}
// Lost or Found
var inputLostFound = document.getElementsByName('lost_input');
(function (){
for(var i = 0; i < inputLostFound.length; i++){
inputLostFound[i].onclick = function(){
document.getElementById('lost_found').innerText = this.value;
}
}
})();
// Microchipped Radio
var inputMicro = document.getElementsByName('micro_input');
(function (){
for(var i = 0; i < inputMicro.length; i++){
inputMicro[i].onclick = function(){
document.getElementById('micro').innerText = this.value;
}
}
})();
// Color
var inputColor = document.getElementById('color_input');
inputColor.onkeyup = function(){
document.getElementById('color').innerHTML = inputColor.value;
}
// Breed
var inputBreed = document.getElementById('breed_input');
inputBreed.onkeyup = function(){
document.getElementById('breed').innerHTML = inputBreed.value;
}
// Animal Sex
var inputSex = document.getElementsByName('sex_input');
(function (){
for(var i = 0; i < inputLostFound.length; i++){
inputSex[i].onclick = function(){
document.getElementById('sex').innerText = this.value;
}
}
})();
// Description
var inputDescription = document.getElementById('description_input');
inputDescription.onkeyup = function(){
document.getElementById('description').innerHTML = inputDescription.value;
}
// Tear Offs
var res = inputBoxTitle + "<br>" + inputBoxConName + "<br>" + inputBoxPhone;
$('inputBoxTitle, inputBoxConName, inputBoxPhone').onkeyup, function(){
document.getElementsByClassName('tear_off_data').innerHTML = document.write(res);
}
.main-row {
flex-wrap: nowrap;
word-break: break-all;
}
.column, .rotate {
border: 1px dashed;
-webkit-box-flex: 1;
flex: 1 1 0;
}
.rotate {
height: 270px;
white-space: nowrap;
width: 0;
}
.rotate > div {
-webkit-transform: translate(0px, 110px) rotate(-90deg);
transform: translate(0px, 110px) rotate(-90deg);
}
.rotate > div > span {
border-bottom: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.js" integrity="sha512-nxKp6INemMtUWHV+BToAOXm2ZV4+LCc/sw+4j2fyVJG088hHf7Rt/h8qCYT7bTsEtqkDCXo6sbtFlkro3Zo3HA==" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
</head>
<body>
<!---- Start Data Input for Flyer ---->
<div class="container" style="margin-bottom: 10px;">
<div class="jumbotron"><h1>San Antonio Pet Rescue</h1>
<p>locating lost and found/stray, dogs and cats</p>
</div>
<div class="row">
<div class="col-sm">Insert Your Title Here<input type="text" id="title_input" name="title_input" placeholder="Title"></div>
<div class="col-sm">Contact Name<input type="text" id="con_name_input" name="con_name_input" placeholder="Contact Name"></div>
<div class="col-sm">Contact Phone<input class="phone_us" type="tel" id="phone_input" name="phone_input" placeholder="xxx-xxx-xxxx"></div>
<div class="col-sm">Contact Email<input type="email" id="email_input" name="email_input" placeholder="Contact Email"></div>
</div>
<div class="row">
<div class="col-sm">Animal Name if Known<input type="text" id="name_animal_input" name="name_animal_input" placeholder="ex: Duke, Gracie, Ben, Unknown"></div>
<div class="col-sm">Date Found/Lost<input type="date" id="date_lost_input" name="date_lost_input"></div>
<div class="col-sm">Predominate Color<input type="text" id="color_input" name="color" placeholder="ex: Black, Rust, Black and White, Dark Brown..."></div>
<div class="col-sm">Breed of Animal<input type="text" id="breed_input" name="breed_input" placeholder="ex: Calico, Doberman, Apaloossa..."></div>
</div>
<div class="row">
<div class="col-3 col-sm">Lost/Found<input type="radio" id="lost" name="lost_input" value="Lost">Lost <input type="radio" id="found" name="lost_input" value="Found">Found</div>
<fieldset class="form-group">
<div class="row">
<div><legend class="col-form-label col-sm-2 pt-0">Sex</legend></div>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="sex_input" id="male" value="Male" checked>
<label class="form-check-label" for="male">
Male
</label>
</div>
<div class="col-2 form-check">
<input class="form-check-input" type="radio" name="sex_input" id="female" value="Female">
<label class="form-check-label" for="female">
Female
</label>
</div>
</div>
</div>
</fieldset>
<div class="col-2 col-sm">Microchipped<input type="radio" id="micro_input" name="micro_input" value="Yes">Yes <input type="radio" name="micro" value="No">No <input type="radio" name="micro" value="Unknown">Unknown</div>
</div>
<div class="row">
<div class="col-sm col-6"><label>Add description here</label><textarea id="description_input" name="description_input" placeholder="Identifying Markings and Features, limit 316 characters including spaces
(Note: For found animals, you may want to withold specific details in order to screen for the animal's owner)" wrap="virtual" rows="10" cols="45"></textarea></div>
<div class="col-sm col-5"><label>Select Your Picture Here</label><input type="file" /></div>
</div>
<div class="row">
<div class="col-sm col-12" style="background-color: #e9ecef">Program sponsored by, Bruce Osborne, your JBGoodwin REALTORS for home sales & purchases and Apartment Leases.
For every home purchased or apartment leased through your referrals to Bruce, he will donate $50 to the pet rescue of your choice.</div>
</div>
</div> <!---- Container, Main ---->
<!---- Start Flyer Rendering ---->
<div class="container" style="border: dashed; height: 1200px; width: 1571px">
<div class="row">
<div class="h2 text-center" style="margin: 10px;">SA Pet Rescue</div>
</div>
<div class="row">
<div class="h5 text-center" style="margin: 10px;">locating lost and found/stray, dogs and cats</div>
</div>
<div class="container-md h1 text-center" id="title"></div>
<div class="container-md h1 text-center" id="preview"><img id="myImg" src="#" alt="your image here" width="700" height="400"></div> <!---- Display image ---->
<div class="row container-md">
<div class="col-4 container-md h3 text-center" id="con_name"></div>
<div class="col-4 container-md h3 text-center" id="phone"></div>
<div class="col-4 container-md h3 text-center" id="email"></div>
</div>
<div class="row">
<div class="col-2 container-md h5 text-center" id="animal_name"></div>
<div class="col-2 container-md h5 text-center">Microchipped <span id="micro"></span></div>
<div class="col-2 container-md h5 text-center" id="sex"></div>
<div class="col-2 container-md h5 text-center" id="breed"></div>
<div class="col-2 container-md h5 text-center" id="color"></div>
<div class="col-2 container-md h5 text-center"><span id="lost_found"></span> On <span id="date_lost"></span></div>
</div>
<div class="container-md h3 text-center" id="description"></div>
<div class="container-fluid">
<div class="col-xs-9">
<div class="row main-row">
<div class="rotate">
<div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
<div class="rotate">
<div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
<div class="rotate">
<div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
<div class="rotate">
<div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
<div class="rotate">
<div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
<div class="rotate">
<div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
<div class="rotate">
<div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
<div class="rotate">
<div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
<div class="rotate">
<div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
</div>
</div>
</div>
</div>
<div class="container my-5"></div>
</body>
<script src="flyer-text.js"></script>
<script type="text/jscript">
window.addEventListener('load', function() {
document.querySelector('input[type="file"]').addEventListener('change', function() {
if (this.files && this.files[0]) {
var img = document.querySelector('img'); // $('img')[0]
img.src = URL.createObjectURL(this.files[0]); // set src to file url
}
});
});
</script>
</html>


You are missing .value after the element variables.
You also don't need to call document.write().
The 'Tear-offs' section should be:
var res = inputBoxTitle.value + "<br>" + inputBoxConName.value + "<br>" + inputBoxPhone.value;
$('inputBoxTitle, inputBoxConName, inputBoxPhone').onkeyup, function(){
document.getElementsByClassName('tear_off_data').innerHTML = res;
}
EDIT: I also noticed that you are declaring for loops inside of separate functions. You don't need to do this!
Example:
(function (){
for(var i = 0; i < inputLostFound.length; i++){
inputLostFound[i].onclick = function(){
document.getElementById('lost_found').innerText = this.value;
}
}
})();
Can simply be written as:
for(var i = 0; i < inputLostFound.length; i++){
inputLostFound[i].onclick = function(){
document.getElementById('lost_found').innerText = this.value;
}
}

Related

Adding input fields and setting their ids dynamically

$(document).ready(function() {
function getData1() {
var innerhtml1 = $('.load1').html();
$('.main_div').append(innerhtml1);
}
getData1();
$(document).on('click', '.add_question', function() {
let lengthQstn = $('.main_div').children().length;
let questionHtml = $('.load1').html();
let appendQstn = questionHtml.replace(/0/g, lengthQstn).replace(/add_question/g, "remove_question").replace(/add question/g, "remove question");
$('.main_div').append(appendQstn);
})
$(document).on('click', '.add_option', function() {
var dataParent = $(this).attr('data-parent');
let lengthOpt = $("#option_" + dataParent).children().length;
lengthOpt++;
var dataParent = $(this).attr('data-parent');
let optionHtml = $('.load2').html();
let appendOpt = optionHtml.replace(/count/g, lengthOpt).replace(/0/g, dataParent);
$("#option_" + dataParent).append(appendOpt);
})
$(document).on('click', '.remove_question', function() {
var dataParent = $(this).attr('data-parent');
$("#question_" + dataParent).remove();
})
$(document).on('click', '.remove_option', function() {
var dataParent = $(this).attr('data-parent');
var dataIndex = $(this).attr('data-id');
$("#row_" + dataParent + '_' + dataIndex).remove();
})
})
.hide {
display: none;
}
.remove_option,
.remove_question {
background-color: rgb(204, 177, 177);
}
.add_question,
.add_option {
background-color: rgb(201, 233, 222);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<div class="container">
<center>
<h2>New Form</h2>
</center>
<div class="main_div">
</div>
</div>
<div class="load1 hide">
<div class="parent_div mb-5 mt-5" id="question_0">
<div class="div1">
<div class="row">
<div class="col-6">
<label id="question_0">Question_0</label>
<input type="text" name="question_0" id="question_0" class="form-control">
</div>
<div class="col-3">
<button id="add_question_0" class="form-control add_question mt-4" data-parent="0">add_question</button>
</div>
</div>
</div>
<div class="div2" id="option_0">
<div class="row" id="row_0_1">
<div class="col-6">
<label id="option_0_1">option_0_1</label>
<input type="text" name="option_0_1" id="option_0_1" class="form-control">
</div>
<div class="col-3">
<button id="add_option_0" class="form-control add_option mt-4" data-parent="0">add
option</button>
</div>
</div>
<div class="row" id="row_0_2">
<div class="col-6">
<label id="option_0_2">option_0_2</label>
<input type="text" name="option_0_2" id="option_0_2" class="form-control">
</div>
</div>
</div>
</div>
</div>
<div class="load2 hide">
<div class="row" id="row_0_count">
<div class="col-6 option_0_count">
<label id="option_0_count">option_0_count</label>
<input type="text" name="option_0_count" id="option_0_count" class="form-control">
</div>
<div class="col-3">
<button id="remove_option_count" class="form-control remove_option mt-4" data-parent="0" data-id="count">remove option</button>
</div>
</div>
</div>
I have made a page for dynamically appending input fields for new questions, as well as new options.
All are input fields only, I have to generate an index for the fields.
But, when I click on "add option" the options input fields are appending but the index is not being generated correctly; also I have to generate an index similarly for the buttons too. Please help with this part.
Also, I have to dynamically remove the added option fields too when clicked on "remove option" button, I have commented it as of now.

Progress Bar - Multi Step Form - Javascript Problem

I have a multi step form, where I want to include a progress bar.
So far I have the following solution, which is working for the first click, but afterwards it doesn't work.
Javascript:
$(document).ready(function(){
var a = document.getElementsByClassName("progress-15");
var b = document.getElementsByClassName("progress-30");
var c = document.getElementsByClassName("progress-50");
var d = document.getElementsByClassName("progress-70");
var e = document.getElementsByClassName("progress-85");
var f = document.getElementsByClassName("progress-100");
window.addEventListener('click', function() {
if($("a").is(":visible")) {
document.getElementsByClassName("progress-bar")[0].style.width = "15%";
}
})
});
I want to add the classes like ".progress-15" to the steps in the form.
It works for progress-15 until now, but it doesn't load for progress-30.
HTML:
<!-- /Immobilienart > Grundstück ============================== -->
<div class="branch" id="Grundstück">
<div class="step" data-state="grundflaeche">
<div class="question_title progress-15">
<p>Um <strong>was für ein Grundstück</strong> handelt es sich?</p>
</div>
<div class="row">
<div class="col-sm-3">
<div class="item">
<input id="branch_0_answer_0" name="branch_0_answers[]" type="radio" value="Bauland" class="required">
<label for="branch_0_answer_0"><img src="img/Bauland.svg" alt=""><strong>Bauland</strong></label>
</div>
</div>
<div class="col-sm-3">
<div class="item">
<input id="branch_0_answer_1" type="radio" name="branch_0_answers[]" value="Ackerland" class="required">
<label for="branch_0_answer_1"><img src="img/Ackerland.svg" alt=""><strong>Ackerland</strong></label>
</div>
</div>
<div class="col-sm-3">
<div class="item">
<input id="branch_0_answer_2" name="branch_0_answers[]" type="radio" value="Wald / Grünland" class="required">
<label for="branch_0_answer_2"><img src="img/Wald.svg" alt=""><strong>Wald / Grünland</strong></label>
</div>
</div>
<div class="col-sm-3">
<div class="item">
<input id="branch_0_answer_3" name="branch_0_answers[]" type="radio" value="Sonstiges" class="required">
<label for="branch_0_answer_3"><img src="img/Sonstiges.svg" alt=""><strong>Sonstiges</strong></label>
</div>
</div>
</div>
<!-- /row-->
</div>
<!-- /step -->
</div>
HTML (Progress Bar):
<main>
<h1 id="hero">So verkaufen Sie Ihre Immobilie zum Top-Preis</h1>
<div class="container mb-5">
<div class="progress-rounded progress pmd-progress position-absolute"><div class="progress-bar progress-bar-info" style="width: 0%;"></div></div>
<!-- Preloader ============================== -->
<div data-loader="circle-side"></div>
<div id="wizard_container">
<form class="immobilienbewertung" name="example-1" id="wrapped" method="POST">
<input id="website" name="website" type="text" value="">
<!-- Leave input above for security protection, read docs for details -->
<div id="middle-wizard" class="h-75 mb-4 pt-2">
<!-- Immobilienart ============================== -->
<div class="step" data-state="branchtype">
<div class="question_title">
<p><strong>Welche Immobilie</strong> möchten Sie verkaufen?</p>
</div>
<div class="row mb-5">
<div class="col-md-3">
<div class="item" id="start">
<input id="answer_1" type="radio" name="branch_1_group_1" value="Grundstück" class="required">
<label for="answer_1"><img src="img/Grundstueck.svg" alt=""><strong>Grundstück</strong></label>
</div>
</div>
<div class="col-md-3">
<div class="item">
<input id="answer_2" name="branch_1_group_1" type="radio" value="Wohnung" class="required">
<label for="answer_2"><img src="img/Wohnung.svg" alt=""><strong>Wohnung</strong></label>
</div>
</div>
<div class="col-md-3">
<div class="item">
<input id="answer_3" name="branch_1_group_1" type="radio" value="Haus" class="required">
<label for="answer_3"><img src="img/Haus.svg" alt=""><strong>Haus</strong></label>
</div>
</div>
<div class="col-md-3">
<div class="item">
<input id="answer_4" name="branch_1_group_1" type="radio" value="Gewerbe" class="required">
<label for="answer_4"><img src="img/Gewerbeimmobilie.svg" alt=""><strong>Gewerbe</strong></label>
</div>
</div>
</div>
<!-- /row-->
Do you have an idea how I could get this to work?
Thanks so much in Advance.
Solution:
$(document).on('click', function(){
if($(".progress-0").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "0%";
}
if($(".progress-10").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "10%";
}
if($(".progress-20").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "20%";
}
if($(".progress-30").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "30%";
}
if($(".progress-40").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "40%";
}
if($(".progress-50").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "50%";
}
if($(".progress-60").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "60%";
}
if($(".progress-70").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "70%";
}
if($(".progress-80").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "80%";
}
if($(".progress-90").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "90%";
}
if($(".progress-100").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "100%";
}
});

Why would the vars in these functions fail to calculate?

I know this is a rookie question so forgive me but can anyone tell me why these two functions would fail to compute. (I had paid someone to do it but I'm starting to think they had as much of a clue as me)
This function should calculate the amount commission is due on by subtracting target from nettakings.
$(function(){
$("#Commissionon").keyup(function(){
var target = $("#target_").val();
var nettakings = $("#nettakings_").val();
//alert(targetmultiplier);
$("#Commissionon_").html();
$("#Commissionon_").html(nettakings-target);
})
})
This function should return the % that a user types in a cell which should then calculate an amount to another cell as the amount due of the function above. ie if above totalled 100 and user types 50% the amount would show as £50 commission. (% sign can be outside the cell)
$(function(){
$("#Commissionp").keyup(function(){
var Commissionp = $("#Commissionp").val();
//alert(Commissionp);
$("#Commissionp_").html();
$("#Commissionp_").html(Commissionp);
Full code:
$(function() {
$("#Hourlyrate").keyup(function() {
var Hoursworked = $("#Hoursworked").val();
//alert(Hoursworked);
var Hourlyrate = $("#Hourlyrate").val();
$("#Basepay_").html();
$("#Basepay_").html(Hoursworked * Hourlyrate);
})
})
$(function() {
$("#Targetmultiplier").keyup(function() {
var targetmultiplier = $("#Targetmultiplier").val();
//alert(targetmultiplier);
var Basepay = $("#Basepay_").html();
$("#target_").html();
$("#target_").html(targetmultiplier * Basepay * 1.2);
})
})
$(function() {
$("#Grosstakings").keyup(function() {
var nettakings = $("#Grosstakings").val();
//alert(targetmultiplier);
$("#nettakings_").html();
$("#nettakings_").html(nettakings / 1.2);
})
})
$(function() {
$("#Commissionon").keyup(function() {
var Commissionon = $("#Commissionon").val();
var target = $("#target_").html();
var nettakings = $("#nettakings_").html();
//alert(targetmultiplier);
$("#Commissionon_").html();
$("#Commissionon_").html(nettakings - target);
})
})
$(function() {
$("#Commissionp").keyup(function() {
var Commissionp = $("#Commissionp").val();
//alert(Commissionp);
$("#Commissionp_").html();
$("#Commissionp_").html(Commissionp);
})
})
$(function() {
$("#Commission").keyup(function() {
var Commissionon = $("#Commissionon").val();
//alert(Hoursworked);
var Commissionp = $("#Commissionp").val();
$("#Commission_").html();
$("#Commission_").html(Commissionon * Commissionp);
})
})
$(function() {
$("#Wage").keyup(function() {
var basepay = $("#Basepay_").html();
//alert(Hoursworked);
var Commission = $("#Commission").val();
$("#Wage_").html();
$("#Wage_").html(basepay + Commission);
})
})
$(function() {
$("#Holidayaccrued").keyup(function() {
var Hourlyrate = $("#Hourlyrate").val();
// alert(Hourlyrate);
var Hoursworked = $("#Hoursworked").val();
$("#Holidayaccrued_").html();
$("#Holidayaccrued_").html(((12.07 / 100) * Hoursworked) * Hourlyrate);
})
})
$(function() {
$("#emppensionp").keyup(function() {
var emppensionp = $("#emppensionp").val();
//alert(Hoursworked);
$("#emppensionp_").html();
$("#emppensionp_").html(emppensionp);
})
})
$(function() {
$("#Emppension").keyup(function() {
var Emppension = $("#Emppension").val();
//alert(Hoursworked);
var Wage = $("#Wage").val();
$("#Emppension_").html();
$("#Emppension_").html((Emppension * Wage));
})
})
$(function() {
$("#Employerni").keyup(function() {
var Employerni = $("#Employerni").val();
//alert(Hoursworked);
var Wage = $("#Wage").val();
$("#Employerni_").html();
$("#Employerni_").html(((Wage * 13.8) / 100));
})
})
$(function() {
$("#totalpayroll").keyup(function() {
var totalpayroll = $("#totalpayroll").val();
//alert(Hoursworked);
var Wage = $("#Wage").val();
var Employerni = $("#Employerni").val();
var Holidayaccrued = $("#Holidayaccrued").val();
var emppension = $("#emppension").val();
$("#totalpayroll_").html();
$("#totalpayroll_").html(Wage + Employerni + Holidayaccrued + emppension);
})
})
.divTable {
display: table;
width: 60%;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell,
.divTableHead {
border: 1px solid #800080;
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!--script src='scripts/jquery-1.7.2.min.js' type='text/javascript'></script>
<!--script src='scripts/globalize.js' type='text/javascript'></script>
<script src='scripts/sessvars.js' type='text/javascript'></script-->
<h1>Calculate Commission and Total Payroll Cost.</h1>
<p>Calculate Commission and Total Payroll Cost.</p>
<hr>
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"><label for="Hoursworked"><b>Hours Worked</b></label></div>
<div class="divTableCell"><input type="number" value="" class="form-control" placeholder="Enter Hours Worked" name="Hoursworked" id="Hoursworked" required></div>
<div class="divTableCell"> </div>
<div class="divTableCell"> </div>
</div>
<div class="divTableRow">
<div class="divTableCell"><label for="Hourlyrate"><b>Hourly Rate</b></label></div>
<div class="divTableCell"><input class="form-control" type="number" placeholder="Enter Hourly Rate" id="Hourlyrate" name="Hourlyrate" required></div>
<div class="divTableCell" id="Basepay_"> </div>
<div class="divTableCell"> </div>
</div>
<div class="divTableRow">
<div class="divTableCell"><label for="Targetmultiplier"><b>Target Multiplier</b></label></div>
<div class="divTableCell"><input class="form-control" type="number" placeholder="Enter Target Multiplier" name="Targetmultiplier" id="Targetmultiplier" required></div>
<div class="divTableCell" id="target_"> </div>
<div class="divTableCell"> </div>
</div>
<div class="divTableRow">
<div class="divTableCell"><label for="Grosstakings"><b>Actual Gross Takings</b></label></div>
<div class="divTableCell"><input class="form-control" type="number" placeholder="Enter Gross Takings" name="Grosstakings" id="Grosstakings" required></div>
<div class="divTableCell" id="Grosstakings_"> </div>
<div class="divTableCell" id="nettakings_"> </div>
</div>
<div class="divTableRow">
<div class="divTableCell"><label for="Commissionon"><b>Commission On</b></label></div>
<div class="divTableCell"><input class="form-control" type="number" placeholder="" name="Commissionon" id="Commissionon" required></div>
<div class="divTableCell"> </div>
<div class="divTableCell" id="Commissionon_"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"><label for="Commissionp"><b>Commission %</b></label></div>
<div class="divTableCell"><input class="form-control" type="number" placeholder="Enter Commission %" name="Commission" id="Commissionp" required></div>
<div class="divTableCell" id="Commissionp_"> </div>
<div class="divTableCell"> </div>
</div>
<div class="divTableRow">
<div class="divTableCell"><label for="Commission"><b>Commission</b></label></div>
<div class="divTableCell"><input class="form-control" type="number" placeholder="" name="Commission" id="Commission" required></div>
<div class="divTableCell" id="Commission_"></div>
<div class="divTableCell"> </div>
</div>
</div>
<div class="divTableRow">
<div class="divTableCell"><label for="Wage"><b>Wage</b></label></div>
<div class="divTableCell"><input class="form-control" id="Wage" type="number" placeholder="" name="Wage" required></div>
<div class="divTableCell" id="Wage_"> </div>
<div class="divTableCell"> </div>
</div>
<div class="divTableRow">
<div class="divTableCell"><label for="Holidayaccrued"><b>Holiday Pay Accrued</b></label></div>
<div class="divTableCell"><input class="form-control" type="number" placeholder="" id="Holidayaccrued" name="Holidayaccrued" required></div>
<div class="divTableCell"> </div>
<div class="divTableCell" id="Holidayaccrued_"> </div>
</div>
<div class="divTableRow">
<div class="divTableCell"><label for="emppensionp"><b>Emp Pension Contribution %</b></label></div>
<div class="divTableCell"><input class="form-control" type="number" placeholder="" name="emppensionp" id="emppensionp" required></div>
<div class="divTableCell" id="emppensionp_"> </div>
<div class="divTableCell"> </div>
</div>
<div class="divTableRow">
<div class="divTableCell"><label for="Emppension"><b>Employers Pension Contribution</b></label></div>
<div class="divTableCell"><input class="form-control" type="number" placeholder="" name="Emppension" id="Emppension" required></div>
<div class="divTableCell"> </div>
<div class="divTableCell" id="Emppension_"> </div>
</div>
<div class="divTableRow">
<div class="divTableCell"><label for="Employerni"><b>Employer N.I.</b></label></div>
<div class="divTableCell"><input class="form-control" type="number" placeholder="" name="Employerni" id="Employerni" required>
</div>
<div class="divTableCell"> </div>
<div class="divTableCell" id="Employerni_"> </div>
</div>
<div class="divTableRow">
<div class="divTableCell"><label for="totalpayroll"><b>Total Payroll Cost</b></label></div>
<div class="divTableCell"><input type="number" class="form-control" placeholder="" name="totalpayroll" id="totalpayroll" required></div>
<div class="divTableCell"> </div>
<div class="divTableCell" id="totalpayroll_"> </div>
</div>

several problems with your code:
1) You should be using onchange instead of keyup, as the form doesn't work when you using the html5 input buttons to change values.
2) completely unnecessary to do calls like this: $("#emppensionp_").html();
3) variables should start with lowercase letter
4) you need to either default all your input values to '0' or have code to handle undefined values.

Form validation change input value

I am using Javascript regualar expression for form validation in my project.Once the validation is completed without any error and while clicking submit button the form should submit and I need to change the submit value to 'please wait..'.
I have tried two methods.
Method 1:By changing the submit value
Method 2:Hide/show method using jquery
Both the methods are not working and i couldn't find the error to.Can anyone help me with this?
/*
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: 12.991011, lng: 77.721225};
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 10, center: uluru});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
*/
function pagetest(){
var name= document.getElementById("name").value;
var filt = /^[a-zA-Z]+$/;
if (!name.match(filt)){
document.getElementById("name").style.borderColor="red";
document.getElementById("nameerror").innerHTML='Name should not contain any number or special characters';
document.getElementById("nameerror").style.color='red';
}
else{
document.getElementById("name").style.borderColor="green";
document.getElementById("nameerror").innerHTML='valid name';
document.getElementById("nameerror").style.color='green';
}
var number=document.getElementById("mobile").value;
if(number.length!=10)
{
document.getElementById("mobile").style.borderColor="red";
document.getElementById("moberror").innerHTML="Number should be exactly 10 digits and not less than or more than that";
document.getElementById("moberror").style.color='red';
}
else
{
document.getElementById("mobile").style.borderColor="green";
document.getElementById("moberror").innerHTML="valid number";
document.getElementById("moberror").style.color='green';
}
var email = document.getElementById("email").value;
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,3})+$/;
if (!filter.test(email)) {
document.getElementById("email").style.borderColor="red";
document.getElementById("emailerror").innerHTML="Please provide a valid email address";
document.getElementById("emailerror").style.color="red";
}
else{
document.getElementById("email").style.borderColor="green";
document.getElementById("emailerror").innerHTML='valid email address';
document.getElementById("emailerror").style.color='green';
}
var country= document.getElementById("country").value;
var filt = /^[a-zA-Z]+$/;
if (!country.match(filt)) {
document.getElementById("country").style.borderColor="red";
document.getElementById("countryerror").innerHTML='country should not contain any number or special characters';
document.getElementById("countryerror").style.color='red';
}
else{
document.getElementById("country").style.borderColor="green";
document.getElementById("countryerror").innerHTML='Valid Country name';
document.getElementById("countryerror").style.color='green';
}
var city= document.getElementById("city").value;
var filt = /^[a-zA-Z]+$/;
if (!city.match(filt)) {
document.getElementById("city").style.borderColor="red";
document.getElementById("cityerror").innerHTML='city should not contain any number or special characters';
document.getElementById("cityerror").style.color='red';
}
else{
document.getElementById("city").style.borderColor="green";
document.getElementById("cityerror").innerHTML='Valid city name';
document.getElementById("cityerror").style.color='green';
}
/* var reg = /[^A-Za-z]/;
if ((reg.test(query) == false) && (query ==""))
{
document.getElementById('query').style.borderColor="red";
document.getElementById('queryerror').innerHTML="This field is required";
}
else{
document.getElementById("query").style.borderColor="green";
document.getElementById("queryerror").innerHTML ="";
}*/
var security = document.getElementById("security").value;
var securitycode = document.getElementById("securitycode").innerHTML;
if(security ==securitycode){
document.getElementById("security").style.borderColor="";
document.getElementById("codeerror").innerHTML="Code matched";
document.getElementById("codeerror").style.color='green';
}
else{
document.getElementById("security").style.borderColor="red";
document.getElementById("codeerror").innerHTML="Code didn't match or emplty";
document.getElementById("codeerror").style.color='red';
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML =val;
security.focus;
}
if( (name!="") && (email!="") && (number!="") && (country!="") && (city!="") && (security!=""))
{
//alert("ok");
document.getElementById("form_id").submit();//submit() is a predefined function in js.
//document.getElementById("").innerHTML='Please wait..';
}
}
/*$(document).ready(function(){
$('form').submit(function(){
if(validationIsTrue()){
(":button").css('display':'none');
('#Button1').css('display':'block');
}
else{
return false;
}
});
});
$("#form_id").on("submit", function(e){
var $this = $(this);
if(this.checkValidity()) {
e.preventDefault();
alert('ok');
//$this.parents(".form-wrap").hide();
//$(".success-msg").removeClass("hidden")
}
});
*/
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.iframe-container > *{
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/* Demo styles */
.iframe-container{
margin-top:50px;
width:100%;
}
/*form */
.content{
background-image:url("contact-us (1).jpg");
min-height: 380px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: inset 0 0 0 400px rgba(185, 212, 212, 0.35);
/* Needed to position the navbar */
}
.form-group{
color:white;
}
.no-border {
border: 0;
box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
}
.contact{
color:#BF2626;
font-weight:bold;
margin-top:25px;
}
input,textarea{
margin-left:5px;
}
input:focus{
background-color:#b9dbe2;
color:black;
}
label{
color:black;
margin-top:4px;
}
.code{
color:black;
font-weight:bold;
margin-left:7px;
}
h3{
margin-left:-80px;
}
#securitycode{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="formvali.js"></script>
<link rel="stylesheet" href="form.css">
</head>
<body onsubmit="loginload()">
<div class="col-sm-12 content">
<div class="col-sm-1"></div>
<div class="col-sm-4">
<h2 class="text-center">
Fill out this form and we will get back to you<span class="glyphicon glyphicon-hand-right"></span>
</h2>
<!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7245780.082381814!2d-88.29713116153964!3d27.53212533124578!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88c1766591562abf%3A0xf72e13d35bc74ed0!2sFlorida!5e0!3m2!1sen!2s!4v1470659148428" class="img-responsive" frameborder="0" style="border:0" allowfullscreen></iframe>
-->
<h3 class="text-center"><strong>Bangalore Office</strong></h3>
<iframe src="http://maps.google.com/maps?q=12.987510,77.620491 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
<h3 class="text-center"><strong>Kerala Office</strong></h3>
<iframe src="http://maps.google.com/maps?q=9.988126,76.295285 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
</div>
<div class="col-sm-6" style="line-height:1.45;">
<h1 class="text-center contact"> Contact Us</h1>
<form action="#" method="POST" id="form_id" name="myform">
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Name</label>
</div>
<div class="col-sm-9">
<input type="text" id="name" class="form-control" placeholder="Enter Your Name">
<i id="nameerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Mobile</label>
</div>
<div class="col-sm-9">
<input type="text" id="mobile" class="form-control" placeholder="Enter Your Mobile Number">
<i id="moberror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label style="margin-left:0px;">Email </label>
</div>
<div class="col-sm-9">
<input type="email" id="email" class="form-control"placeholder="Enter Your Email Id">
<i id="emailerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Country</label>
</div>
<div class="col-sm-9">
<input type="text" id="country" class="form-control" placeholder="Enter Your Country Name">
<i id="countryerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>City</label>
</div>
<div class="col-sm-9">
<input type="text" id="city" class="form-control"placeholder="Enter Your City Name">
<i id="cityerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Query</label>
</div>
<div class="col-sm-9">
<textarea type="text" class="form-control" id="query"placeholder="Enter Your Query here(optional)"></textarea>
<i id="queryerror"></i>
</div>
</div>
<div class="row form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-6">
<span class="code"></strong>Security Code <span id="securitycode"></span></span>
<input type="number" id="security" class="form-control" placeholder="Enter the security code">
<i id="codeerror"></i><br>
<div class="form-group text-center">
<div class="col-sm-2"></div>
<input type="button" class="btn btn-warning" name="sub" value="Submit" onclick="pagetest()"/>
<button id="Button1" style="display:none;">Please wait..</button>
</div>
</div>
</div>
</div>
</form>
<script>
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML = val;
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXRmYpTXDBP7vdQ-2fy11OqoKGUuGfcxI&callback=initMap">
</script>
</body>
</html>

function pagetest(){
var name= document.getElementById("name").value;
var filt = /^[a-zA-Z]+$/;
if (!name.match(filt)){
document.getElementById("name").style.borderColor="red";
document.getElementById("nameerror").innerHTML='Name should not contain any number or special characters';
document.getElementById("nameerror").style.color='red';
}
else{
document.getElementById("name").style.borderColor="green";
document.getElementById("nameerror").innerHTML='valid name';
document.getElementById("nameerror").style.color='green';
}
var number=document.getElementById("mobile").value;
if(number.length!=10)
{
document.getElementById("mobile").style.borderColor="red";
document.getElementById("moberror").innerHTML="Number should be exactly 10 digits and not less than or more than that";
document.getElementById("moberror").style.color='red';
}
else
{
document.getElementById("mobile").style.borderColor="green";
document.getElementById("moberror").innerHTML="valid number";
document.getElementById("moberror").style.color='green';
}
var email = document.getElementById("email").value;
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,3})+$/;
if (!filter.test(email)) {
document.getElementById("email").style.borderColor="red";
document.getElementById("emailerror").innerHTML="Please provide a valid email address";
document.getElementById("emailerror").style.color="red";
}
else{
document.getElementById("email").style.borderColor="green";
document.getElementById("emailerror").innerHTML='valid email address';
document.getElementById("emailerror").style.color='green';
}
var country= document.getElementById("country").value;
var filt = /^[a-zA-Z]+$/;
if (!country.match(filt)) {
document.getElementById("country").style.borderColor="red";
document.getElementById("countryerror").innerHTML='country should not contain any number or special characters';
document.getElementById("countryerror").style.color='red';
}
else{
document.getElementById("country").style.borderColor="green";
document.getElementById("countryerror").innerHTML='Valid Country name';
document.getElementById("countryerror").style.color='green';
}
var city= document.getElementById("city").value;
var filt = /^[a-zA-Z]+$/;
if (!city.match(filt)) {
document.getElementById("city").style.borderColor="red";
document.getElementById("cityerror").innerHTML='city should not contain any number or special characters';
document.getElementById("cityerror").style.color='red';
}
else{
document.getElementById("city").style.borderColor="green";
document.getElementById("cityerror").innerHTML='Valid city name';
document.getElementById("cityerror").style.color='green';
}
/* var reg = /[^A-Za-z]/;
if ((reg.test(query) == false) && (query ==""))
{
document.getElementById('query').style.borderColor="red";
document.getElementById('queryerror').innerHTML="This field is required";
}
else{
document.getElementById("query").style.borderColor="green";
document.getElementById("queryerror").innerHTML ="";
}*/
var security = document.getElementById("security").value;
var securitycode = document.getElementById("securitycode").innerHTML;
if(security ==securitycode){
document.getElementById("security").style.borderColor="";
document.getElementById("codeerror").innerHTML="Code matched";
document.getElementById("codeerror").style.color='green';
}
else{
document.getElementById("security").style.borderColor="red";
document.getElementById("codeerror").innerHTML="Code didn't match or emplty";
document.getElementById("codeerror").style.color='red';
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML =val;
security.focus;
}
if( (name!="") && (email!="") && (number!="") && (country!="") && (city!="") && (security!="") && (name.match(filt)) && (number.length==10) && (filter.test(email)) && (country.match(filt)) && (city.match(filt)) && (security == securitycode))
{
alert("ok");
$('#submit_btn').val("Please wait");
document.getElementById("form_id").submit();//submit() is a predefined function in js.
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="formvali.js"></script>
<link rel="stylesheet" href="form.css">
</head>
<body onsubmit="loginload()">
<div class="col-sm-12 content">
<div class="col-sm-1"></div>
<div class="col-sm-4">
<h2 class="text-center">
Fill out this form and we will get back to you<span class="glyphicon glyphicon-hand-right"></span>
</h2>
<!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7245780.082381814!2d-88.29713116153964!3d27.53212533124578!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88c1766591562abf%3A0xf72e13d35bc74ed0!2sFlorida!5e0!3m2!1sen!2s!4v1470659148428" class="img-responsive" frameborder="0" style="border:0" allowfullscreen></iframe>
-->
<h3 class="text-center"><strong>Bangalore Office</strong></h3>
<iframe src="http://maps.google.com/maps?q=12.987510,77.620491 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
<h3 class="text-center"><strong>Kerala Office</strong></h3>
<iframe src="http://maps.google.com/maps?q=9.988126,76.295285 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
</div>
<div class="col-sm-6" style="line-height:1.45;">
<h1 class="text-center contact"> Contact Us</h1>
<form action="" method="POST" id="form_id" name="myform">
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Name</label>
</div>
<div class="col-sm-9">
<input type="text" id="name" class="form-control" placeholder="Enter Your Name">
<i id="nameerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Mobile</label>
</div>
<div class="col-sm-9">
<input type="text" id="mobile" class="form-control" placeholder="Enter Your Mobile Number">
<i id="moberror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label style="margin-left:0px;">Email </label>
</div>
<div class="col-sm-9">
<input type="email" id="email" class="form-control"placeholder="Enter Your Email Id">
<i id="emailerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Country</label>
</div>
<div class="col-sm-9">
<input type="text" id="country" class="form-control" placeholder="Enter Your Country Name">
<i id="countryerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>City</label>
</div>
<div class="col-sm-9">
<input type="text" id="city" class="form-control"placeholder="Enter Your City Name">
<i id="cityerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Query</label>
</div>
<div class="col-sm-9">
<textarea type="text" class="form-control" id="query"placeholder="Enter Your Query here(optional)"></textarea>
<i id="queryerror"></i>
</div>
</div>
<div class="row form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-6">
<span class="code"></strong>Security Code <span id="securitycode"></span></span>
<input type="number" id="security" class="form-control" placeholder="Enter the security code">
<i id="codeerror"></i><br>
<div class="form-group text-center">
<div class="col-sm-2"></div>
<input type="button" class="btn btn-warning" name="sub" value="Submit" onclick="pagetest()" id="submit_btn"/>
<button id="Button1" style="display:none;">Please wait..</button>
</div>
</div>
</div>
</div>
</form>
<script>
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML = val;
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXRmYpTXDBP7vdQ-2fy11OqoKGUuGfcxI&callback=initMap">
</script>
</body>
</html>

Replace your pagetest() function with this function code below and check, I'm using jQuery call here after validation check:
function pagetest(){
var name= document.getElementById("name").value;
var filt = /^[a-zA-Z]+$/;
if (!name.match(filt)){
document.getElementById("name").style.borderColor="red";
document.getElementById("nameerror").innerHTML='Name should not contain any number or special characters';
document.getElementById("nameerror").style.color='red';
}
else{
document.getElementById("name").style.borderColor="green";
document.getElementById("nameerror").innerHTML='valid name';
document.getElementById("nameerror").style.color='green';
}
var number=document.getElementById("mobile").value;
if(number.length!=10)
{
document.getElementById("mobile").style.borderColor="red";
document.getElementById("moberror").innerHTML="Number should be exactly 10 digits and not less than or more than that";
document.getElementById("moberror").style.color='red';
}
else
{
document.getElementById("mobile").style.borderColor="green";
document.getElementById("moberror").innerHTML="valid number";
document.getElementById("moberror").style.color='green';
}
var email = document.getElementById("email").value;
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,3})+$/;
if (!filter.test(email)) {
document.getElementById("email").style.borderColor="red";
document.getElementById("emailerror").innerHTML="Please provide a valid email address";
document.getElementById("emailerror").style.color="red";
}
else{
document.getElementById("email").style.borderColor="green";
document.getElementById("emailerror").innerHTML='valid email address';
document.getElementById("emailerror").style.color='green';
}
var country= document.getElementById("country").value;
var filt = /^[a-zA-Z]+$/;
if (!country.match(filt)) {
document.getElementById("country").style.borderColor="red";
document.getElementById("countryerror").innerHTML='country should not contain any number or special characters';
document.getElementById("countryerror").style.color='red';
}
else{
document.getElementById("country").style.borderColor="green";
document.getElementById("countryerror").innerHTML='Valid Country name';
document.getElementById("countryerror").style.color='green';
}
var city= document.getElementById("city").value;
var filt = /^[a-zA-Z]+$/;
if (!city.match(filt)) {
document.getElementById("city").style.borderColor="red";
document.getElementById("cityerror").innerHTML='city should not contain any number or special characters';
document.getElementById("cityerror").style.color='red';
}
else{
document.getElementById("city").style.borderColor="green";
document.getElementById("cityerror").innerHTML='Valid city name';
document.getElementById("cityerror").style.color='green';
}
/* var reg = /[^A-Za-z]/;
if ((reg.test(query) == false) && (query ==""))
{
document.getElementById('query').style.borderColor="red";
document.getElementById('queryerror').innerHTML="This field is required";
}
else{
document.getElementById("query").style.borderColor="green";
document.getElementById("queryerror").innerHTML ="";
}*/
var security = document.getElementById("security").value;
var securitycode = document.getElementById("securitycode").innerHTML;
if(security ==securitycode){
document.getElementById("security").style.borderColor="";
document.getElementById("codeerror").innerHTML="Code matched";
document.getElementById("codeerror").style.color='green';
}
else{
document.getElementById("security").style.borderColor="red";
document.getElementById("codeerror").innerHTML="Code didn't match or emplty";
document.getElementById("codeerror").style.color='red';
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML =val;
security.focus;
}
$('#Button1').hide();
$('input[name=sub]').show();
if( (name!="") && (email!="") && (number!="") && (country!="") && (city!="") && (security!=""))
{
$('#Button1').show();
$('input[name=sub]').hide();
// $('#form_id').submit(); //uncomment if want to submit after validation
}
}

Bootsnipp Step Wizard not rendering correctly

I'm trying to learn Bootstrap / play around with Bootsnipp.
I have copied the HTML, CSS and JS from the link (although I think I have redundancy here): http://bootsnipp.com/snippets/e3MBM
1) Is it Redundant to add the CDN link and the actual CSS and JS (From what I understand the latter would only be if I host the CSS and JS files locally? Can someone confirm this?
2)The damn thing doesn't work the way it is supposed to:
Is theirs - with each step shown separately.
Mine, on the other hand has everything together:
It's probably something so stupid and simple, but I have no idea.Can someone please help?
I tried JSFiddle *First time using it, looks easy, but I hope I've got it right :)
<!DOCTYPE HTML>
https://jsfiddle.net/vvstafo2/1/

You forgot to add bootstrap JS and CSS file thats why its conflict over there, Would you please once try with the below code?
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
body {
margin-top:40px;
}
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 50%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="http://bootsnipp.com/dist/bootsnipp.min.css?ver=7d23ff901039aef6293954d33d23c066">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://bootsnipp.com/dist/scripts.min.js"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<div class="container">
<div class="stepwizard col-md-offset-3">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
1
<p>Step 1</p>
</div>
<div class="stepwizard-step">
2
<p>Step 2</p>
</div>
<div class="stepwizard-step">
3
<p>Step 3</p>
</div>
</div>
</div>
<form role="form" action="" method="post">
<div class="row setup-content" id="step-1">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="form-group">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
</div>
<div class="form-group">
<label class="control-label">Address</label>
<textarea required="required" class="form-control" placeholder="Enter your address" ></textarea>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 2</h3>
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
</div>
</div>
</div>
</form>
</div>

Categories

Resources