Enquiry Form
with Alerts + Validation
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<h3>Form Tests</h3>
<div class="form-group">
<select class="selectpicker" multiple title='Select Boiler Type' data-width="100%" name="cntnt01fbrp__119" id="fbrp__119">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div class="form-group">
<input type="text" name="cntnt01fbrp__70" value="" size="25" maxlength="80" class="form-control" placeholder='Serial No' id="cntnt01fbrp__70" />
</div>
<div id="question-1" class="modal-content" style="display:none;">
<p>Are you sure you want 5</p>
<label class="checkbox-inline">
<input type="checkbox" name="yes" id="cb-yes" value="option3">Yes
<label class="checkbox-inline">
<input type="checkbox" name="no" id="cb-no" value="option3">No</div>
<div id="question-2" style="display:none;">
<p>Does this boiler have the condensate upgrade ( Y – 83042-1 ) or ( T – 83037-1 )?</p>
<label class="checkbox-inline">
<input type="checkbox" name="yes" id="cb-3" value="yes">Yes
<label class="checkbox-inline">
<input type="checkbox" name="no" id="cb-4" value="no">No</div>
<div id="question-3" style="display:none;">
<p>Does this boiler have the Trinity upgrade part# 82370?</p>
<label class="checkbox-inline">
<input type="checkbox" name="yes" id="cb-3" value="yes">Yes
<label class="checkbox-inline">
<input type="checkbox" name="no" id="cb-4" value="no">No</div>
<div...
CSS
#question-1 {
padding:10px;
}
JavaScript
$(document).ready(function () {
$("#cntnt01fbrp__70").keyup(function () {
$("#question-1").css("display", function() {
if ($('#cntnt01fbrp__70').val() === "355") {
console.log('worked');
return "block";
} else {
return "none";
}
});
});
});