I have following requirement, before showing next div have to check atleast 1 checkbox or radio should be checked is must. it is done but, If user select window ac & select all 4 services then on nxet button should be ask for no of unist for all selected services. At last booknow button display. If he select 2 services then it ask no of units for both selected service If he select both window & split ac & then select no of services then it ask user no of units for selected services for both type window & split.
Thanks in advance.
My code as follows
<div class="container quick-box-outer">
<div class="voffset-7">
<div class="col-md-12">
<div class="panel panel-warning first current" id="step1">
<div class="panel-heading">What we provide</div>
<div class="panel-body">
<ul class="services-list">
<li>Background checked and trained technicians</li>
<li>30 days service guarantee</li>
</ul>
</div>
<div class="panel-heading">Pricing</div>
<div class="panel-body">
<ul class="services-list">
<li>Fixed charges for installation, uninstallation and servicing</li>
<li>Charges for AC repairs will be quoted upon inspection</li>
<li>Rs.199 inspection charges if no service is availed post inspection</li>
</ul>
</div>
</div>
<div class="panel panel-warning" id="step2" style="display:none">
<div class="panel-heading">What do you need?</div>
<div class="panel-body">
<div class="col-sm-12">
<div class="select-product">
<input type="checkbox" name="windowac" id="windowac" class="mychk">
<label for="windowac"> Window AC</label>
</div>
</div>
<div class="col-sm-12">
<div class="select-product last">
<input type="checkbox" id="splitac" name="fliptac" class="mychk">
<label for="splitac">Split AC</label>
</div>
</div>
</div>
</div>
<div class="panel panel-warning" id="step3" style="display:none">
<div class="panel-heading">What type of service do you want?</div>
<div class="panel-body">
<form id="step2">
<div class="col-sm-12">
<div class="select-product">
<input type="checkbox" name="wetservice" id="wetservice" class="mychk">
<label for="wetservice"> Wet Servicing (Jet pump service not included)</label>
</div>
<div class="select-product">
<input type="checkbox" name="dryservice" id="dryservice">
<label for="dryservice"> Dry Servicing</label>
</div>
<div class="select-product">
<input type="checkbox" name="gas" id="gas">
<label for="gas"> Gas Charging</label>
</div>
<div class="select-product last">
<input type="checkbox" name="other" id="other">
<label for="other"> Other repairs</label>
</div>
</div>
</form>
</div>
</div>
<div class="panel panel-warning last" id="step4" style="display:none">
<div class="panel-heading">How many ACs need Wet servicing?</div>
<div class="panel-body">
<form id="step2">
<div class="col-sm-12">
<div class="select-product">
<label for="1unit">
<span class="col-md-6"><input type="radio" name="units" id="1unit"> 1</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="2unit">
<span class="col-md-6"> <input type="radio" name="units" id="2unit"> 2</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="3unit">
<span class="col-md-6"><input type="radio" name="units" id="3unit"> 3</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="4unit">
<span class="col-md-6"><input type="radio" name="units" id="4unit"> 4</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product last">
<label for="5unit">
<span class="col-md-6"><input type="radio" name="units" id="5unit"> 5</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
</div>
</form>
</div>
</div>
<div class="panel panel-warning last" id="step5" style="display:none">
<div class="panel-heading">How many ACs need Dry servicing?</div>
<div class="panel-body">
<div class="col-sm-12">
<div class="select-product">
<label for="1unit">
<span class="col-md-6"><input type="radio" name="units" id="1unit"> 1</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="2unit">
<span class="col-md-6"> <input type="radio" name="units" id="2unit"> 2</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="3unit">
<span class="col-md-6"><input type="radio" name="units" id="3unit"> 3</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="4unit">
<span class="col-md-6"><input type="radio" name="units" id="4unit"> 4</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product last">
<label for="5unit">
<span class="col-md-6"><input type="radio" name="units" id="5unit"> 5</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-warning last" id="step6" style="display:none">
<div class="panel-heading">How many ACs need Gas Charging</div>
<div class="panel-body">
<div class="col-sm-12">
<div class="select-product">
<label for="1unit">
<span class="col-md-6"><input type="radio" name="units" id="1unit"> 1</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="2unit">
<span class="col-md-6"> <input type="radio" name="units" id="2unit"> 2</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="3unit">
<span class="col-md-6"><input type="radio" name="units" id="3unit"> 3</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="4unit">
<span class="col-md-6"><input type="radio" name="units" id="4unit"> 4</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product last">
<label for="5unit">
<span class="col-md-6"><input type="radio" name="units" id="5unit"> 5</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-warning last" id="step7" style="display:none">
<div class="panel-heading">How many ACs need other reparing</div>
<div class="panel-body">
<div class="col-sm-12">
<div class="select-product">
<label for="1unit">
<span class="col-md-6"><input type="radio" name="units" id="1unit"> 1</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="2unit">
<span class="col-md-6"> <input type="radio" name="units" id="2unit"> 2</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="3unit">
<span class="col-md-6"><input type="radio" name="units" id="3unit"> 3</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="4unit">
<span class="col-md-6"><input type="radio" name="units" id="4unit"> 4</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product last">
<label for="5unit">
<span class="col-md-6"><input type="radio" name="units" id="5unit"> 5</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="col-md-6 col-sm-6 col-xs-6">
<button type="submit" class="btn btn-raised btn-warning" id="prev" style="display:none;">Back</button>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<a href="javascript:;" class="btn btn-raised btn-warning pull-right" id="next">Next</a>
<a href="javascript:;" class="btn btn-raised btn-warning pull-right" id="booknow" style="display:none;">Book Now</a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#next').click(function() {
if ($('.current').find(':checkbox,:radio').length > 0 && !$('.current :checked').length) {
alert('Select one or more options to Continue')
return;
}
$('.current').removeClass('current').hide()
.next().show().addClass('current');
if ($('.current').hasClass('last')) {
$('#next').hide();
$('#booknow').show();
}
$('#prev').show();
});
$('#prev').click(function() {
$('#booknow').hide();
$('.current').removeClass('current').hide()
.prev().show().addClass('current');
if ($('.current').hasClass('first')) {
$('#prev').hide();
}
$('#next').show();
});
</script>
<script>
$('#booknow').click(function() {
if ($('.current').find(':checkbox,:radio').length > 0 && !$('.current :checked').length) {
alert('Select one or more options to Continue')
return;
}
window.location = "checkout.html"
});
</script>
Aucun commentaire:
Enregistrer un commentaire