<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
<p>Rooms</p>
</div>
<div class="stepwizard-step">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
<p>Under Floors</p>
</div>
<div class="stepwizard-step">
<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
<p>Step 3</p>
</div>
</div>
</div>
<form role="form">
<div class="row setup-content" id="step-1">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="col-md-8 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
Area Name
</th>
<th class="text-center">
Width
</th>
<th class="text-center">
Height
</th>
<th class="text-center">
Total Area MT<sup>2</sup>
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<input type="text" id='pn0' name='pn0' placeholder='Area Name' class="form-control"/>
</td>
<td>
<input type="text" id='pw0' name='pw0' value="0" placeholder='Watt' class="form-control txt"/>
</td>
<td>
<input type="text" id='pq0' name='pq0' value="0" placeholder='Quantity' class="form-control txt"/>
</td>
<td>
<input readonly id='el0' type="text" name='el0' value="0" placeholder='Electricity Load' class="form-control"/>
</td>
<td>
<button id="btn0" class='btn btn-success new_row'>+</button>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-2">
<label for="txtlp">Loss %</label>
<input type="text" id='txtlp' name='txtl' value="0" placeholder='Loss%' class="form-control txt"/>
</div>
<div class="col-md-2">
<label for="txtl">Total Loss</label>
<input readonly type="text" id='txtlt' name='txtlt' value="0" placeholder='Loss Total' class="form-control txt"/>
</div>
<div class="col-md-3">
<label for="txtl">Total Area</label>
<input readonly type="text" id='txtat' name='txtat' value="0" placeholder='Total' class="form-control txt"/>
</div>
<div class="col-md-2">
<label for="txtrate">Rate</label>
<input type="text" id='txtrate' name='txtrate' value="0" placeholder='Rate' class="form-control txt"/>
</div>
<div class="col-md-3">
<label for="txtamnt">Total Amount</label>
<input readonly type="text" id='txtamnt' name='txtamnt' value="0" placeholder='Total Amount' class="form-control txt"/>
</div>
</div>
</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-12">
<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-12">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-success btn-lg pull-right" type="submit">Finish!</button>
</div>
</div>
</div>
</form>
</div>
body{
margin-top:40px;
}
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
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;
}
$(document).ready(function () {
var i=1;
var gtw=0;
$(document).on("click","button.del_row",function()
{
var rowId=$(this).parent().parent().attr("id");
$("#"+rowId).remove();
GrandTotal();
});
$(document).on("click","button.new_row",function()
{
GrandTotal();
$('#addr'+i).append("<td>"+ (i+1) +"</td><td><input id='pn"+i+"' name='pn"+i+"' type='text' placeholder='Product Name' class='form-control input-md' /> </td> <td><input id='pw"+i+"' value='0' name='pw"+i+"' type='text' placeholder='Watt' class='form-control input-md txt'></td><td><input id='pq"+i+"' name='pq"+i+"' type='text' value='0' placeholder='Quantity' class='form-control input-md txt'></td><td><input id='el"+i+"' name='el"+i+"' value='0' type='text' readonly placeholder='Electricity Load' class='form-control input-md'></td> <td><button id='btn"+i+"' class='btn btn-success new_row'>+</button></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
var rno=i-1;
$('#btn'+rno).removeClass("new_row btn-success");
$('#btn'+rno).addClass("del_row btn-danger");
$('#btn'+rno).html("-");
var pw=$('#pw'+rno).val();
var pq=$('#pq'+rno).val();
var tw=pw*pq;
$('#el'+rno).val(tw);
i++;
});
$("#btn_done").click(function(){
GrandTotal();
});
$(document).on("change",".txt",function()
{
var rowId=$(this).attr("id");
var rno=rowId.substring(2);
var pw=$('#pw'+rno).val();
var pq=$('#pq'+rno).val();
$('#el'+rno).val(pw*pq);
GrandTotal();
});
function GrandTotal()
{
var T = document.getElementById('tab_logic');
gtw=0;
var x=$(T).find('> tbody > tr').length;
var c=1;
$(T).find('> tbody > tr').each(function () {
var rowId=$(this).attr("id");
var rno=rowId.substring(4);
if(c<x)
{
gtw+=parseFloat($('#el'+rno).val());
c++;
}
});
//$('#grand').html("Your House Total Electricity Load is " + gtw + " Watt.");
$('#txtat').val(gtw);
var lp=$('#txtlp').val();
var lt=gtw*lp/100;
$('#txtlt').val(lt);
$('#txtat').val(lt+gtw);
var rate=$('#txtrate').val();
var at=$('#txtat').val();
$('#txtamnt').val(rate*at);
rstotal();
return 1;
}
$(document).on("keyup","#uh",function()
{
//rstotal();
});
function rstotal()
{
var h=parseFloat($('#uh').val());
var u=((gtw/1000)*h).toFixed(2);
var rs=(u*7).toFixed(2);
$('#tu').val(u);
$('#rs').val(rs);
$('#msave').html("Your Monthly Saving By Virat Solar Power is ₹ <label id='lblresult' class='label label-danger'>" + rs + "</label> /- Only.");
}
/*....................................................................*/
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');
});
