<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<script>
$(document).ready(function($) {
//Moved inside $(document).ready()
$("input[name='chkPassPort']").click(function() {
if ($("#chkYes").is(":checked")) {
$("#dvPassport").show();
} else {
$("#dvPassport").hide();
}
});
$('input.maxtickets_enable_cb').change(function() {
if ($(this).is(':checked')) $(this).parent().children('div.max_tickets').show();
else $(this).parent().children('div.max_tickets').hide();
}).change();
$('#contact_form').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
first_name: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'your first name'
}
}
}
}
})
.on('success.form.bv', function(e) {
$('#success_message').slideDown({
opacity: "show"
}, "slow")
$('#contact_form').data('bootstrapValidator').resetForm();
e.preventDefault();
var $form = $(e.target);
var bv = $form.data('bootstrapValidator');
$.post($form.attr('action'), $form.serialize(), function(result) {
console.log(result);
}, 'json');
});
});
</script>
</head>
<div class="row">
<div class="col-md-10" style="padding: 0; height:20%;">
<div class="panel panel-default">
<span>Do you have Passport?</span>
<label for="chkYes">
<input type="radio" id="chkYes" name="chkPassPort" />Yes
</label>
<label for="chkNo">
<input type="radio" id="chkNo" name="chkPassPort" />No
</label>
<hr />
<div id="dvPassport" style="display: none">
Passport Number:
<input type="text" id="txtPassportNumber" />
</div>
<form action="">
<div id="opwp_woo_tickets">
<div>
<input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][0][enable]">
<div class="max_tickets">
<input type="text" name="opwp_wootickets[tickets][0][maxtickets]">
</div>
</div>
</div>
</form>
</div>
<!-- /.container -->
<div class="container">
<form class="well form-horizontal" action="" method="post" id="contact_form">
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label">First Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" placeholder="First Name" class="form-control" type="text">
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>