Add or remove input controls on the fly using jQuery,Bootstrap - javascript

I was going through the code given in this link, for adding input controls like textboxes, dropdown lists etc in my form.
but when i tried to modify, the code, with addition of new dropdownlists, am not getting the results properly. Alignment was wrong and label is not coming as expected.
here is my updated code
<div class="col-md-6">
<label> entity name </label>
</div>
<div class="col-md-4">
<label> Operator </label>
</div>
</div>
<div class="col-md-12 p-0">
<div class="col-md-12 form_field_outer p-0">
<div class="row form_field_outer_row">
<div class="form-group col-md-6">
<input type="text" class="form-control w_90" name="mobileb_no[]" id="mobileb_no_1"
placeholder="Enter entity name." />
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1" class="form-control" >
<option>--Select Field Name--</option>
<option>--state1--</option>
<option>--state2--</option>
<option>--state3--</option>
</select>
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1" class="form-control" >
<option>--Select attribute --</option>
<option>--attributes1--</option>
<option>--attributes2--</option>
</select>
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1" class="form-control" >
<option> --Select entity -- </option>
<option> entity1 </option>
<option> entity2 </option>
</select>
</div>
my requirement is to add 3 more dropdown lists and 2 checkboxes.
but when I tried to add the dropdown lists/ label titles , am getting those in a unexpected results.
form-with-dynamic-controls
in order to get the correctly aligned form controls - with proper titles, etc
where n which tags i need to modify?


I think you didn't add cdn's in your code. You can also take the code from here
$(document).ready(function(){
$("body").on("click",".add_new_frm_field_btn", function (){
console.log("clicked");
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
$(".form_field_outer").append(`
<div class="row form_field_outer_row">
<div class="form-group col-md-6">
<input type="text" class="form-control w_90" name="mobileb_no[]" id="mobileb_no_${index}" placeholder="Enter mobiel no." />
</div>
<div class="form-group col-md-6">
<input type="text" class="form-control w_90" name="mobileb_no[]" id="mobileb_no_${index}" placeholder="Enter mobiel no." />
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_${index}" class="form-control" >
<option>--Select type--</option>
<option>Personal No.</option>
<option>Company No.</option>
<option>Parents No.</option>
</select>
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_${index}" class="form-control" >
<option>--Select type--</option>
<option>Personal No.</option>
<option>Company No.</option>
<option>Parents No.</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer">
<button class="btn_round add_node_btn_frm_field" title="Copy or clone this row">
<i class="fas fa-copy"></i>
</button>
<button class="btn_round remove_node_btn_frm_field" disabled>
<i class="fas fa-trash-alt"></i>
</button>
<input style="margin-left:10px;" type="checkbox" id="checkbox1" value="Checkbox1">
<label for="checkbox1"> Checkbox1</label>
</div>
</div>
`);
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
///======Clone method
$(document).ready(function(){
$("body").on("click", ".add_node_btn_frm_field", function (e) {
var index = $(e.target).closest(".form_field_outer").find(".form_field_outer_row").length + 1;
var cloned_el = $(e.target).closest(".form_field_outer_row").clone(true);
$(e.target).closest(".form_field_outer").last().append(cloned_el).find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(e.target).closest(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
//change id
$(e.target).closest(".form_field_outer").find(".form_field_outer_row").last().find("input[type='text']").attr("id", "mobileb_no_"+index);
$(e.target).closest(".form_field_outer").find(".form_field_outer_row").last().find("select").attr("id", "no_type_"+index);
console.log(cloned_el);
//count++;
});
});
$(document).ready(function(){
//===== delete the form fieed row
$("body").on("click", ".remove_node_btn_frm_field", function () {
$(this).closest(".form_field_outer_row").remove();
console.log("success");
});
});
.btn_round {
width: 35px;
height: 35px;
display: inline-block;
border-radius: 50%;
text-align: center;
line-height: 35px;
margin-left: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
.btn_round:hover {
color: #fff;
background: #6b4acc;
border: 1px solid #6b4acc;
}
.btn_content_outer {
display: inline-block;
width: 85%;
}
.close_c_btn {
width: 30px;
height: 30px;
position: absolute;
right: 10px;
top: 0;
line-height: 30px;
border-radius: 50%;
background: #ededed;
border: 1px solid #ccc;
color: #ff5c5c;
text-align: center;
cursor: pointer;
}
.add_icon {
padding: 10px;
border: 1px dashed #aaa;
display: inline-block;
border-radius: 50%;
margin-right: 10px;
}
.add_group_btn {
display: flex;
}
.add_group_btn i {
font-size: 32px;
display: inline-block;
margin-right: 10px;
}
.add_group_btn span {
margin-top: 8px;
}
.add_group_btn,
.clone_sub_task {
cursor: pointer;
}
.sub_task_append_area .custom_square {
cursor: move;
}
.del_btn_d {
display: inline-block;
position: absolute;
right: 20px;
border: 2px solid #ccc;
border-radius: 50%;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 18px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="static/css/AdminLTE.min.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"
></script>
<title>
Dynamically add or remove form input fields using jQuery -
bootstrapfriendly
</title>
</head>
<body>
<div class="container py-4">
<div class="row">
<div class="col-md-12 form_sec_outer_task border">
<div class="row">
<div class="col-md-12 bg-light p-2 mb-3">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<h4 class="frm_section_n">Form Title</h4>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<label>Mobile No.</label>
</div>
<div class="col-md-4">
<label> Type </label>
</div>
</div>
<div class="col-md-12 p-0">
<div class="col-md-12 form_field_outer p-0">
<div class="row form_field_outer_row">
<div class="form-group col-md-6">
<input
type="text"
class="form-control w_90"
name="mobileb_no[]"
id="mobileb_no_1"
placeholder="Enter mobiel no."
/>
</div>
<div class="form-group col-md-6">
<input
type="text"
class="form-control w_90"
name="mobileb_no[]"
id="mobileb_no_1"
placeholder="Enter mobiel no."
/>
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1" class="form-control">
<option>--Select type--</option>
<option>Personal No.</option>
<option>Company No.</option>
<option>Parents No.</option>
</select>
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1" class="form-control">
<option>--Select type--</option>
<option>Personal No.</option>
<option>Company No.</option>
<option>Parents No.</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer">
<button
class="btn_round add_node_btn_frm_field"
title="Copy or clone this row"
>
<i class="fas fa-copy"></i>
</button>
<button class="btn_round remove_node_btn_frm_field" disabled>
<i class="fas fa-trash-alt"></i>
</button>
<input style="margin-left:10px;" type="checkbox" id="checkbox1" value="Checkbox1">
<label for="checkbox1"> Checkbox1</label>
</div>
</div>
</div>
</div>
</div>
<div class="row ml-0 bg-light mt-3 border py-3">
<div class="col-md-12">
<button class="btn btn-outline-lite py-0 add_new_frm_field_btn">
<i class="fas fa-plus add_icon"></i> Add New field row
</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 pt-4"></div>
</div>
</div>
</body>
</html>

Related

Bootstrap Div Colors only one Row in form

I do have the following code block. Except for the custom sheets, bootstrap was used.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.filter-box-margins {
margin-left: 5%;
margin-right: 5%;
}
.filer-box-height {
height: 100%;
}
.filter-box-background {
background-color: rgb(199, 214, 243);
background-size: 100%;
}
</style>
<div class="row filter-box-background filter-box-height filter-box-margins">
<div class="panel panel-default panel-body col-md-12 ">
<form class="form-control-sm">
<div class="form-row">
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Make</label>
<select id="inputState" class="form-control input-sm">
<option selected>Any</option>
<option></option>
</select>
</div>
<div class="form-group col-md-4">
<label for="inputPassword4">Keywords</label>
<input type="text" class="form-control input sm" id="search" placeholder="">
</div>
</div>
</form>
</div>
</div>
However, color is only applied as shown in the below image.
Any reason why the color is only applied to the first form-row

Buttons floating on page and serving as anchors

I'm putting floating buttons on my form to serve as anchors (the page is extensive), but only 1 button appears, but 3 buttons should be displayed.
The goal was when to slide the mouse scroll, to appear one button below the other with Unit 1, Unit 2 and Unit 3, respectively. And by clicking on them, go to their respective sessions. I'm not getting this with the 3 buttons, only with one and this is going to the top of the page.
Move the mouse and see the button (only one that appears)
$(document).ready(function(){
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navegacao1").style.display = "block";
} else {
document.getElementById("navegacao1").style.display = "none";
}
}
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navegacao2").style.display = "block";
} else {
document.getElementById("navegacao2").style.display = "none";
}
}
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navegacao3").style.display = "block";
} else {
document.getElementById("navegacao3").style.display = "none";
}
}
function anconrau1() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
function anconrau2() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
function anconrau3() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
});
.sessao-unidade {
padding-top: 11px;
height: 45px;
display: block;
width: 100%;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
line-height: 1.42857143;
text-align: center;
color: #fff;
background-color: rgb(66, 139, 202);
border: 0px solid rgb(177, 177, 177);
margin-bottom: 10px;
}
.sessao-titulos {
display: block;
width: 100%;
color: rgb(27, 80, 124);
background-color: #b4d5f1;
border-color: #357ebd;
padding: 6px 12px;
margin-bottom: 10px;
margin-top: 2px;
font-size: 14px;
font-weight: bold;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border-radius: 2px;
overflow: visible;
text-transform: uppercase;
}
.sessao-titulos:hover, .sessao-titulos:active, .sessao-titulos:visited, .sessao-titulos:focus{
text-decoration: none;
}
.flutuante{
display: none;
position: fixed;
z-index: 9999;
background-color: #e82222;
color: white;
cursor: pointer;
padding: 5px;
border-radius: 2px;
border: none;
font-size: 12px;
}
#navegacao1 {
bottom: 15px;
right: 15px;
}
#navegacao2 {
bottom: 30px;
right: 15px;
}
#navegacao3 {
bottom: 60px;
right: 15px;
}
#navegacao1:hover, #navegacao2:hover, #navegacao3:hover {
background-color: #164b79;
text-decoration: none;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="flutuante" onclick="anconrau1()" id="navegacao1" title="Ir ao topo">Unity 1</a>
<a class="flutuante" onclick="anconrau2()" id="navegacao2" title="Ir ao topo">Unity 2</a>
<a class="flutuante" onclick="anconrau3()" id="navegacao3" title="Ir ao topo">Unity 3</a>
<div id="div-unidades">
<div id="unidade1">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 1
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u1-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u1-data-aula">Class number:</label>
<input type="number" class="form-control" name="u1-data-aula" id="u1-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u1-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u1-data-aula" id="u1-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u1-tipo-aula">Classroom Type:</label>
<select name="" id="u1-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<div class="u1-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u1-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u1-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u1-objetivo-forum" id="u1-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u1-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u1-ativacao-forum" id="u1-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u1-avaliacao-forum">Evaluation:</label>
<select name="u1-avaliacao-forum" id="u1-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u1-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u1-peso-forum" id="u1-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<div class="u1-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u1-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u1-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u1-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--UNIDADE 2 -->
<div id="unidade2">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 2
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u2-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u2-data-aula">Class number:</label>
<input type="date" class="form-control" name="u2-data-aula" id="u2-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u2-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u2-data-aula" id="u2-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u2-tipo-aula">Classroom Type:</label>
<select name="" id="u2-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<!-- FORUNS DE DISCUSSÃO DA UNIDADE -->
<div class="u2-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u2-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u2-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u2-objetivo-forum" id="u2-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u2-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u2-ativacao-forum" id="u2-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u2-avaliacao-forum">Evaluation:</label>
<select name="u2-avaliacao-forum" id="u2-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u2-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u2-peso-forum" id="u2-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<!-- Other tools -->
<div class="u2-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u2-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u2-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u2-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--UNIDADE 3 -->
<div id="unidade3">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 3
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u3-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u3-data-aula">Class number:</label>
<input type="date" class="form-control" name="u3-data-aula" id="u3-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u3-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u3-data-aula" id="u3-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u3-tipo-aula">Classroom Type:</label>
<select name="" id="u3-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<!-- FORUNS DE DISCUSSÃO DA UNIDADE -->
<div class="u3-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u3-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u3-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u3-objetivo-forum" id="u3-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u3-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u3-ativacao-forum" id="u3-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u3-avaliacao-forum">Evaluation:</label>
<select name="u3-avaliacao-forum" id="u3-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u3-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u3-peso-forum" id="u3-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<div class="u3-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u3-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u3-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u3-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

The problem here is you are overriding the funcion scrollfunction three times, so the only one which is used is the last defined.
Also you should check the scrollTop value depending on each element as you are comparing for all three functions if the scrollTop value is greater than 20.

Try using $('#navegacao1,#navegacao2,#navegacao3').click(function(){ rather than using separate functions
$(document).ready(function(){
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navegacao1").style.display = "block";
document.getElementById("navegacao2").style.display = "none";
document.getElementById("navegacao3").style.display = "none";
} else if ((document.body.scrollTop > 20 && document.body.scrollTop > 20 )|| (document.body.scrollTop < 30 && document.body.scrollTop < 30)) {
document.getElementById("navegacao2").style.display = "block";
document.getElementById("navegacao1").style.display = "none";
document.getElementById("navegacao3").style.display = "none";
}
else if ((document.body.scrollTop < 30 && document.body.scrollTop > 30 )|| (document.body.scrollTop <50 && document.body.scrollTop <50)) {
document.getElementById("navegacao3").style.display = "block";
document.getElementById("navegacao1").style.display = "none"; document.getElementById("navegacao2").style.display = "none";
}
}
$(function(){
$('#navegacao1,#navegacao2,#navegacao3').click(function(){
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
});
});
.sessao-unidade {
padding-top: 11px;
height: 45px;
display: block;
width: 100%;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
line-height: 1.42857143;
text-align: center;
color: #fff;
background-color: rgb(66, 139, 202);
border: 0px solid rgb(177, 177, 177);
margin-bottom: 10px;
}
.sessao-titulos {
display: block;
width: 100%;
color: rgb(27, 80, 124);
background-color: #b4d5f1;
border-color: #357ebd;
padding: 6px 12px;
margin-bottom: 10px;
margin-top: 2px;
font-size: 14px;
font-weight: bold;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border-radius: 2px;
overflow: visible;
text-transform: uppercase;
}
.sessao-titulos:hover, .sessao-titulos:active, .sessao-titulos:visited, .sessao-titulos:focus{
text-decoration: none;
}
.flutuante{
display: none;
position: fixed;
z-index: 9999;
background-color: #e82222;
color: white;
cursor: pointer;
padding: 5px;
border-radius: 2px;
border: none;
font-size: 12px;
}
#navegacao1 {
bottom: 15px;
right: 15px;
}
#navegacao2 {
bottom: 30px;
right: 15px;
}
#navegacao3 {
bottom: 60px;
right: 15px;
}
#navegacao1:hover, #navegacao2:hover, #navegacao3:hover {
background-color: #164b79;
text-decoration: none;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="flutuante" id="navegacao1" title="Ir ao topo">Unity 1</a>
<a class="flutuante" id="navegacao2" title="Ir ao topo">Unity 2</a>
<a class="flutuante" id="navegacao3" title="Ir ao topo">Unity 3</a>
<div id="div-unidades" style="height:1000px">
<div id="unidade1">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 1
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u1-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u1-data-aula">Class number:</label>
<input type="number" class="form-control" name="u1-data-aula" id="u1-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u1-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u1-data-aula" id="u1-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u1-tipo-aula">Classroom Type:</label>
<select name="" id="u1-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<div class="u1-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u1-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u1-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u1-objetivo-forum" id="u1-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u1-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u1-ativacao-forum" id="u1-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u1-avaliacao-forum">Evaluation:</label>
<select name="u1-avaliacao-forum" id="u1-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u1-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u1-peso-forum" id="u1-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<div class="u1-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u1-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u1-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u1-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--UNIDADE 2 -->
<div id="unidade2">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 2
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u2-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u2-data-aula">Class number:</label>
<input type="date" class="form-control" name="u2-data-aula" id="u2-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u2-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u2-data-aula" id="u2-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u2-tipo-aula">Classroom Type:</label>
<select name="" id="u2-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<!-- FORUNS DE DISCUSSÃO DA UNIDADE -->
<div class="u2-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u2-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u2-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u2-objetivo-forum" id="u2-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u2-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u2-ativacao-forum" id="u2-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u2-avaliacao-forum">Evaluation:</label>
<select name="u2-avaliacao-forum" id="u2-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u2-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u2-peso-forum" id="u2-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<!-- Other tools -->
<div class="u2-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u2-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u2-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u2-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--UNIDADE 3 -->
<div id="unidade3">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 3
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u3-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u3-data-aula">Class number:</label>
<input type="date" class="form-control" name="u3-data-aula" id="u3-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u3-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u3-data-aula" id="u3-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u3-tipo-aula">Classroom Type:</label>
<select name="" id="u3-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<!-- FORUNS DE DISCUSSÃO DA UNIDADE -->
<div class="u3-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u3-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u3-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u3-objetivo-forum" id="u3-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u3-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u3-ativacao-forum" id="u3-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u3-avaliacao-forum">Evaluation:</label>
<select name="u3-avaliacao-forum" id="u3-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u3-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u3-peso-forum" id="u3-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<div class="u3-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u3-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u3-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u3-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Bootstrap Makes Text Look Like Button

I am utilizing this syntax, but for some reason it makes my text look like it is a button. What I would like is for the text to just appear as text - black text with white background. How can this syntax be altered so that the text does not have the same outlining as a button?
<div class="col-md-2 col-xs-2">
<div class="input-group">
<span class="input-group-addon">Date One:</span>
<input type="date" name="dateone" />
</div>
</div>
<div class="col-md-4 col-xs-4"></div>
<div class="col-md-2 col-xs-2">
<div class="input-group">
<span class="input-group-addon">Date Two:</span>
<input type="date" name="datetwo" />
<span class="input-group-btn">
<input type="submit" name="getthat" value="Show Me Info">
</span>
</div>
</div>
And here I also create bootstrap fiddle to show the visual:
https://jsfiddle.net/DTcHh/35702/

<style>
.input-group-addon_1 {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon_1 {
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
line-height: 1;
color: #555;
text-align: center;
}
</style>
<div class="col-md-2 col-xs-2">
<div class="input-group">
<span class="input-group-addon_1">Date One:</span>
<input type="date" name="dateone" />
</div>
</div>
<div class="col-md-4 col-xs-4"></div>
<div class="col-md-2 col-xs-2">
<div class="input-group">
<span class="input-group-addon_1">Date Two:</span>
<input type="date" name="datetwo" />
<span class="input-group-btn">
<input type="submit" name="getthat" value="Show Me Info">
</span>
</div>
</div>

try this
.input-group-addon
{
background-color: #fff;
border: 0px solid #ccc;
border-radius: 0px;
}
add this class in your css file
OR
also use class for particular input-group
.col-md-2 > .input-group > .input-group-addon
{
background-color: #fff;
border: 0px solid #ccc;
border-radius: 0px;
}

Just change input-group-addon to input-group
<div class="col-md-2 col-xs-2">
<div class="input-group">
<span class="input-group">Date One:</span>
<input type="date" name="dateone" />
</div>
</div>
<div class="col-md-4 col-xs-4"></div>
<div class="col-md-2 col-xs-2">
<div class="input-group">
<span class="input-group">Date Two:</span>
<input type="date" name="datetwo" />
<span class="input-group-btn">
<input type="submit" name="getthat" value="Show Me Info">
</span>
</div>
</div>
Working fiddle https://jsfiddle.net/9txv3rfz/

Issue with forms using twitter typeahead and bootstrap3

I'm trying to build a simple inline form using bootstrap 3 and with typeahead functionalities. I'm having 2 issues, and I'm not sure if they are related somehow or not. The issues are as follows:
-- The first issue I'm having is with the size of #orig and #dest fields (1st and 2nd input fields) not fitting automatically to 100% of their grid container parent. It's as if they don't increase in size past 200px. See image: form. I really don't understand what is causing this, as nowhere in my stylesheet file do I mention 200px or any other limiting setting.
-- My second issue is also related to same aforementioned form fields, but the problem now is that when I try to resize the window, the field's ghost background remains with the same 200px in size and makes the forms appear very clumsy and stacked on each other. See image: form. I'm pretty sure this issue is related to typeahead, as when I don't include the link to my javascript file (which contains the typeahead functionality), this issue doesn't happen anymore.
See code below:
<div class="jumbotron text-center" id="main">
<div class="container-fluid">
<div class="row">
<div class="cl-md-12" id="box">
<div class="well well-lg" id="well-form">
<form role="form" class="form-inline" >
<div class="container">
<div class="row">
<div class="col-sm-3" id="field1">
<div class="form-group">
<label class="sr-only" for="orig">Origin city or airport</label>
<input type="text" class="form-control input-lg" placeholder="From" id="orig" name="origin" value="">
</div>
</div>
<div class="col-sm-1" id="field2">
<span class="glyphicon glyphicon-resize-horizontal" id="interchange"> </span>
</div>
<div class="col-sm-3" id="field3">
<div class="form-group">
<label class="sr-only" for="dest">Destination city or airport</label>
<input type="text" class="form-control input-lg" placeholder="To" id="dest" name="destination">
</div>
</div>
<div class="col-sm-2" id="field4">
<div class="form-group">
<label class="sr-only" for="date_out">Date out</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_out" name="departing">
</div>
</div>
<div class="col-sm-2" id="field5">
<div class="form-group">
<label class="sr-only" for="date_in">Date in</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_in" name="returning">
</div>
</div>
<div class="col-sm-1" id="field6">
<button type="submit" class="btn btn-danger btn-md" id="submit">Search</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS
.jumbotron {
color: #ffffff;
padding: 80px 25px 200px;
margin-top: 0px;
}
.form-inline > * {
display: inline-block;
justify-content: center;
}
#date_out, #date_in{
background-color: #ffffff !important;
width:100%;
}
#orig, #dest {
background-color: #ffffff !important;
max-width: 400px;
width: 100%;
}
#field1, #field3, #field2, #field4, #field5, #field6{
padding: 1px;
margin: 0;
}
Any help would be much appreciated :)
Thanks in advance

As I running your code in bootstrap 3 with latest version. It is working fine. Check below snippet:(see in full page preview)
.jumbotron {
color: #ffffff;
padding: 80px 25px 200px;
margin-top: 0px;
}
.form-inline > * {
display: inline-block;
justify-content: center;
}
#date_out, #date_in{
background-color: #ffffff !important;
width:100%;
}
#orig, #dest {
background-color: #ffffff !important;
max-width: 400px;
width: 100%;
}
#field1, #field3, #field2, #field4, #field5, #field6{
padding: 1px;
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="jumbotron text-center" id="main">
<div class="container-fluid">
<div class="row">
<div class="cl-md-12" id="box">
<div class="well well-lg" id="well-form">
<form role="form" class="form-inline" >
<div class="container">
<div class="row">
<div class="col-sm-3" id="field1">
<div class="form-group">
<label class="sr-only" for="orig">Origin city or airport</label>
<input type="text" class="form-control input-lg" placeholder="From" id="orig" name="origin" value="">
</div>
</div>
<div class="col-sm-1" id="field2">
<span class="glyphicon glyphicon-resize-horizontal" id="interchange"> </span>
</div>
<div class="col-sm-3" id="field3">
<div class="form-group">
<label class="sr-only" for="dest">Destination city or airport</label>
<input type="text" class="form-control input-lg" placeholder="To" id="dest" name="destination">
</div>
</div>
<div class="col-sm-2" id="field4">
<div class="form-group">
<label class="sr-only" for="date_out">Date out</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_out" name="departing">
</div>
</div>
<div class="col-sm-2" id="field5">
<div class="form-group">
<label class="sr-only" for="date_in">Date in</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_in" name="returning">
</div>
</div>
<div class="col-sm-1" id="field6">
<button type="submit" class="btn btn-danger btn-md" id="submit">Search</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

How to disable going to next step without completing one step in Bootstrap?

I have created a Bootstrap widget progress shown form.It has 6 steps.my problems are
when user in first step how can i disable all the other steps?
when user completes first step then give permission to move to second step and disable all the other steps until user finish the current step.
how can i block the going to previous step?
Here is my code
<?php
include_once 'dbconnect.php';
?>
<?php
if (isset($_POST['btn-signup'])) {
$Mnumber = $_POST['Mnumber'];
$emailErr = "";
$email = $_POST['email'];
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
$fname = $_POST['fname'];
$address = $_POST['address'];
$sitename = $_POST['sitename'];
$payment = $_POST['payment'];
$title = $_POST['title'];
$descr = $_POST['descr'];
$step1 = $_POST['step1'];
$new_fname = $_POST['sitename'];
$xxx = mysql_query("SELECT fname FROM txfgf WHERE sitename = '$new_fname'") or die(mysql_error());
$yyy = mysql_fetch_row($xxx);
if (mysql_num_rows($xxx) > 0) {
echo "<script type='text/javascript'>alert('From this Name already there is a website,Tryout with different Web site Name !')</script>";
} else {
$query = mysql_query("INSERT INTO txfgf(Mnumber,email,fname,address,sitename,payment,title,descr) VALUES('$Mnumber','$email','$fname','$address','$sitename','$payment','$title','$descr')");
echo "<script>
alert(' You have registered Successfully !');
</script>";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Monthly Paid Package</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Lib CSS -->
<link href="//fonts.googleapis.com/css?family=Rancho|Open+Sans:400,300,300italic,400italic,600,600italic,700,800italic,700italic,800" rel="stylesheet">
<link href="minify/rgen_min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<!-- Favicons -->
<link rel="icon" href="images/favicons/glogo.png">
<link rel="apple-touch-icon" href="images/favicons/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-touch-icon-114x114.png">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sitename").keyup(function() {
var sitename = $('#sitename').val();
if(sitename=="")
{
$("#disp").html("");
}
else
{
$.ajax({
type: "POST",
url: "check_name.php",
data: "sitename="+ sitename ,
success: function(html){
$("#disp").html(html);
}
});
return false;
}
});
});
</script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<!--[if IE 9 ]><script src="js/ie-matchmedia.js"></script><![endif]-->
<script type="text/javascript">
function resetActive(event, percent, step) {
$(".progress-bar").css("width", percent + "%").attr("aria-valuenow", percent);
$(".progress-completed").text(percent + "%");
$("div").each(function () {
if ($(this).hasClass("activestep")) {
$(this).removeClass("activestep");
}
});
if (event.target.className == "col-md-2") {
$(event.target).addClass("activestep");
}
else {
$(event.target.parentNode).addClass("activestep");
}
hideSteps();
showCurrentStepInfo(step);
}
function hideSteps() {
$("div").each(function () {
if ($(this).hasClass("activeStepInfo")) {
$(this).removeClass("activeStepInfo");
$(this).addClass("hiddenStepInfo");
}
});
}
function showCurrentStepInfo(step) {
var id = "#" + step;
$(id).addClass("activeStepInfo");
}
</script>
</head>
<style>
.hiddenStepInfo {
display: none;
}
.activeStepInfo {
display: block !important;
}
.underline {
text-decoration: underline;
}
.step {
margin-top: 27px;
}
.progress {
position: relative;
height: 25px;
}
.progress > .progress-type {
position: absolute;
left: 0px;
font-weight: 800;
padding: 3px 30px 2px 10px;
color: rgb(255, 255, 255);
background-color: rgba(25, 25, 25, 0.3);
}
.progress > .progress-completed {
position: absolute;
right: 0px;
font-weight: 800;
padding: 3px 10px 2px;
}
.step {
text-align: center;
}
.step .col-md-2 {
background-color: #fff;
border: 1px solid #C0C0C0;
border-right: none;
}
.step .col-md-2:last-child {
border: 1px solid #C0C0C0;
}
.step .col-md-2:first-child {
border-radius: 5px 0 0 5px;
}
.step .col-md-2:last-child {
border-radius: 0 5px 5px 0;
}
.step .col-md-2:hover {
color: #F58723;
cursor: pointer;
}
.step .activestep {
color: #F58723;
height: 100px;
margin-top: -7px;
padding-top: 7px;
border-left: 6px solid #5CB85C !important;
border-right: 6px solid #5CB85C !important;
border-top: 3px solid #5CB85C !important;
border-bottom: 3px solid #5CB85C !important;
vertical-align: central;
}
.step .fa {
padding-top: 15px;
font-size: 40px;
}
</style>
<body>
<div class="container" style="margin-top: 100px; margin-bottom: 100px;">
<div class="row">
<div class="progress" id="progress1">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
</div>
<span class="progress-type">Overall Progress</span>
<span class="progress-completed">20%</span>
</div>
</div>
<div class="row">
<div class="row step">
<div id="div1" class="col-md-2" onclick="javascript: resetActive(event, 0, 'step-1');">
<span class="fa fa-file-text-o"></span>
<p>Registration Form</p>
</div>
<div class="col-md-2" onclick="javascript: resetActive(event, 20, 'step-2');">
<span class="fa fa-mobile-phone"></span>
<p>Mobile Number</p>
</div>
<div class="col-md-2" onclick="javascript: resetActive(event, 40, 'step-3');">
<span class="fa fa-search-plus"></span>
<p>Security Question</p>
</div>
<div class="col-md-2" onclick="javascript: resetActive(event, 60, 'step-4');">
<span class="fa fa-viacoin"></span>
<p>Verification Code</p>
</div>
<div class="col-md-2" onclick="javascript: resetActive(event, 80, 'step-5');">
<span class="fa fa-usd"></span>
<p>Payment</p>
</div>
<div id="last" class="col-md-2" onclick="javascript: resetActive(event, 100, 'step-6');">
<span class="fa fa-thumbs-up"></span>
<p>Finish</p>
</div>
!</div>
</div>
<div class="row setup-content step activeStepInfo" id="step-1">
<div class="col-xs-12">
<div class="col-md-12 well">
<i class="fa fa-mobile-phone"></i>
<h3 class="title small"></h3>
<p style="color: #d5d5d5"></p>
<form id="add-form" method="post">
<input class="form-control" required data-msg="Please enter First Name." type="text" id="fname" name="fname" value="" placeholder="Your First Name" autocomplete="off" required /><br>
<input class="form-control" required data-msg="Please enter Email." type="email" id="email" name="email" value="" placeholder="Your Email" required /><br>
<input class="form-control" required data-msg="Please enter Mobile Number." type="text" id="Mnumber" name="Mnumber" value="" placeholder="Your Mobile Number" required /><br>
<input class="form-control" required data-msg="Please enter Address." type="text" id="address" name="address" value="" placeholder="Your Address" required /><br>
<p align="left" style="color: #080808"></p>
<input class="form-control" required data-msg="Please enter Site Name." type="text" id="sitename" name="sitename" value="" onkeyup="copyText()" placeholder="Your Site name" autocomplete="off" /><br>
<div id="disp"></div>
<input class="form-control" required data-msg="Please enter Title." type="text" id="title" name="title" value="" placeholder="Title of your Web Site" /><br>
<input class="form-control" required data-msg="Please enter Description." type="text" id="descr" name="descr" value="" placeholder="Description of Web Site" /><br>
<button class="btn btn-primary" type="submit" id="btn-signup" name="btn-signup" >Submit</button>
</form>
</div>
</div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-2">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h2>Please Enter Your Mobile Number</h2>
<br/>
<input class="form-control" required data-msg="Please enter Mobile Number." type="text" id="Mnumber" maxlength="10" name="Mnumber" value="" placeholder="Your Mobile Number" required />
<br/><br/>
<button class="btn btn-primary " type="submit" id="btn-signup" name="btn-signup" >Continue</button>
</div>
</div>
</div>
<div class="row setup-content step hiddenstepInfo" id="step-3">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h2>Please Enter Verification Code</h2>
<br/>
<h4 >Check your mobile device, you will receive verification code from us,please enter it correctly in Following Text box</h4>
<br/>
<input class="form-control" required data-msg="Please enter Mobile Number." type="text" id="Mnumber" maxlength="10" name="Mnumber" value="" placeholder="Your Verification Code" required />
<br/><br/>
<button class="btn btn-primary " type="submit" id="btn-signup" name="btn-signup" >Continue</button>
</div>
</div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-4">
<div class="col-xs-12">
<div class="col-md-12 well text-center" >
<h2>Security Question</h2>
<br>
<p align="left">Security Question 1</p>
<select class="form-control input-lg">
<option value="What was the name of your first pet?">What was the name of your first pet?</option>
<option value="Where did you first attend school?">Where did you first attend school?</option>
<option value="What is your mother's maiden name?">What is your mother's maiden name?</option>
<option value="What is your favorite car model?">What is your favorite car model?</option>
</select>
<br>
<p align="left">Enter Response</p>
<input class="form-control input-lg">
<br>
<button class="btn btn-primary " type="submit" id="btn-signup" name="btn-signup" >Continue</button>
</div>
</div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-5">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1>STEP 5</h1>
<h3 class="underline">Instructions</h3>
Upload the application.
This may require a confirmation email.
</div>
</div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-6">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1>STEP 6</h1>
<h3 class="underline">Instructions</h3>
Send us feedback on the overall process.
This step is not obligatory.
</div>
</div>
</div>
</div>
<script src="minify/rgen_min.js"></script>
<script async src="js/rgen.js"></script>
</body>
</html>

here is plunker for your problem
I have added disabled class to other dives which are not completed yet.
write a script to Remove disabled class of next if previous section completed.
here is the css
.disabled {
cursor: not - allowed;
pointer - events: none;
opacity: .65;
}
changed html code
<div class="row step">
<div id="div1" class="col-md-2" onclick="javascript: resetActive(event, 0, 'step-1');">
<span class="fa fa-file-text-o"></span>
<p>Registration Form</p>
</div>
<div class="col-md-2 disabled" onclick="javascript: resetActive(event, 20, 'step-2');">
<span class="fa fa-mobile-phone"></span>
<p>Mobile Number</p>
</div>
<div class="col-md-2 disabled" onclick="javascript: resetActive(event, 40, 'step-3');">
<span class="fa fa-search-plus"></span>
<p>Security Question</p>
</div>
<div class="col-md-2 disabled" onclick="javascript: resetActive(event, 60, 'step-4');">
<span class="fa fa-viacoin"></span>
<p>Verification Code</p>
</div>
<div class="col-md-2 disabled" onclick="javascript: resetActive(event, 80, 'step-5');">
<span class="fa fa-usd"></span>
<p>Payment</p>
</div>
<div id="last" class="col-md-2 disabled" onclick="javascript: resetActive(event, 100, 'step-6');">
<span class="fa fa-thumbs-up"></span>
<p>Finish</p>
</div>
</div>

Categories

Resources