Checking for empty fields on HTML form - javascript

I am trying to create a form in HTML, and also trying to ensure that any field is not left empty.
Here is the HTML for the form
<form role="form" id="companyDetails" name="companyDetails" method="post" action="saveCompanyDetails.jsp" onsubmit="return false;">
<div class="col-lg-6">
<div class="form-group">
<label>Company Name</label>
<input type="text" class="form-control" id="cmpname" name="cmpname">
<p id="cmpnameError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-control" rows="3" id="desc" name="desc"></textarea>
<p id="descError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Url</label>
<input type="text" class="form-control" name="url" id="url">
<p id="urlError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Email Id</label>
<input type="text" class="form-control" name="emailid" id="emailid">
<p id="emailidError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Address</label>
<textarea class="form-control" rows="3" id="address" name="address"></textarea>
<p id="addressError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<h1>All Links <i class="fa fa-link"></i></h1>
<div class="form-group">
<label>Facebook Link</label>
<input type="text" class="form-control" name="fblink" id="fblink">
<p id="fblinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Twitter Link</label>
<input type="text" class="form-control" name="twlink" id="twlink">
<p id="twlinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
</div>
<!-- /.col-lg-6 (nested) -->
<div class="col-lg-6">
<div class="form-group">
<label>Linkedin Link</label>
<input type="text" class="form-control" name="linkinlink" id="linkinlink">
<p id="linkinlinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Download Link</label>
<input type="text" class="form-control" name="downlink" id="downlink">
<p id="downlinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Live Help Link</label>
<input type="text" class="form-control" name="livehelplink" id="livehelplink">
<p id="livehelpError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Terms & Condition Link</label>
<input type="text" class="form-control" name="tclink" id="tclink">
<p id="tclinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Promotion Link</label>
<input type="text" class="form-control" name="prolink" id="prolink">
<p id="prolinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Sign Up Link</label>
<input type="text" class="form-control" name="signuplink" id="signuplink">
<p id="signuplinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Affiliate Link</label>
<input type="text" class="form-control" name="affiliatelink" id="affiliatelink">
<p id="affiliatelinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Game Link</label>
<input type="text" class="form-control" name="gamelink" id="gamelink">
<p id="gamelinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<button type="submit" class="btn btn-default" onclick="submitData()"><i class="fa fa-check"></i>Submit</button>
<button type="reset" class="btn btn-default"><i class="fa fa-refresh"></i>Reset</button>
</div>
</form>
Notice that I have a <p> tag just below every input field, whose ID value is constructed from the ID of its corresponding input field. For eg. the <p> tag below text field cmpname is given ID cmpnameError
Now the JavaScript code for displaying the error message below the text field is given below
function submitData() {
var elements = document.querySelectorAll('#companyDetails input, #companyDetails textarea');
for (var i = 0; i < elements.length; i++) {
if (elements[i].value == "") {
var errorElementId = "#" + elements[i].id + "Error";
// alert("Generated ID is " + errorElementId);
document.getElementById(errorElementId).style.display = '';
document.getElementById(errorElementId).innerHTML = "Please enter a value for this field";
return false;
}
}
document.forms['companyDetails'].submit();
return true;
}
My problem is that the proper error message is not getting displayed on the form when I click submit.
Can anybody please help me regarding this? Thank you very much in advance.
Here is the JSFiddle link- https://jsfiddle.net/v8ooy2e1/


The pound sign is used to select elements with ids using querySelectorAll, but it shouldn't be used with getElementById.
Remove the pound sign here:
var errorElementId = "#" + elements[i].id + "Error";
Should be:
var errorElementId = elements[i].id + "Error";
Working Fiddle


You know, assuming IE 10+, you could skip all this javascript fanciness and just use the "required" attribute:
<input type="text" class="form-control" id="cmpname" name="cmpname" required>
That'll invoke the browser supported form validation.


Why do you have:
var errorElementId = "#" + elements[i].id + "Error";
Leave out the "#" sign.


If you can use jQuery
var isValid = true;
$("#companyDetails").submit(function(event) {
$("input").each(function() {
var element = $(this);
if (element.val() == "") {
isValid = false;
}
})
if (!isValid) {
alert("nopes");
}
});
FIDDLE

Related

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>

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>

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>

Showing div content with jquery

I have a forgot password link. On clicking the link i want to display a div. Here is my demo code. There is something which i am missing.
JSP Code:
<form action="login" method="post">
<label>Username :</label>
<input type="text" value="" name="email">
<label>Password :</label>
<input type="password" value="" name="password">
<input class="submit" type="submit" value="Login" name="Login">
<div id="link" class= "link">Forgot Password?</div>
</form>
<div id="forget-details" class = "forget-details">
<h1>Forgot Your Password</h1>
<p>Enter your registered email address and we will send you a link to reset your password.</p>
<input type="text" value="" name="email" placeholder = "Enter your registered email"/>
CSS:
form div.link{
color: #44869b;
cursor: pointer;
font-family: DIN,Helvetica,Arial,sans-serif;
font-size: 12px;
margin-top: 105px;
text-transform: inherit;
}
.forget-details {
background-color: #333;
float: right;
margin: 7px 0;
padding: 11px;
width: 97%;
display:none;
}
Jquery:
$(document).ready(function(){
$(".link").click(function(){
$(".forget_details").show();
});
});

You have class="forget-details" (hypen) but then select $(".forget_details") (underscore)

Either Change your class name to forget_details or make this change
$(".forget-details").show();

Categories

Resources