We Keep Coding

HTML required tag not validating form

Using the following form with required tags does not actaully validate my input, and always alerts "ok", what am I missing?
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label for="inputFirstName">Förnamn</label>
<input type="text" class="form-control" id="inputFirstName" placeholder="Förnamn" required/>
</div>
<div class="form-group col-sm-4">
<label for="inputLastName">Efternamn</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Efternamn" required/>
</div>
<div class="form-group col-sm-4">
<label for="inputPhone">Telefon</label>
<input type="text" class="form-control" id="inputPhone" placeholder="Telefon"/>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-4">
<label for="inputMobile">Mobiltelefon</label>
<input type="text" class="form-control" id="inputMobile" placeholder="Mobiltelefon"/>
</div>
<div class="form-group col-sm-8">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required/>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-12">
<label for="inputCompany">Företag</label>
<input type="text" class="form-control" id="inputCompany" placeholder="Företag" required/>
</div>
</div>
<button type="submit" class="btn btn-primary col-sm-3 pull-right" data-bind="click: submit">Submit</button>
</form>
Javascript, where i want to alert "ok" if validation passes:
vm.submit = function(){
alert("ok");
};

Cannot disable inputs with respect to id of div through jquery

I have different forms inside divs with different ids. What I am doing is that I am using radio buttons to disable their respective divs.
My code isn't working here is what I tried
$(document).ready(function() {
$('.address_type').change(function() {
if (this.value == '0') {
var id = $(this).attr('id');
$("#add_0_" + id).find("input[class='secondary']").prop("disabled", false);
} else {
$("#add_0_" + id).find("input[class='secondary']").prop("disabled", true);
}
});
});
<form action="/ali_store/order/place" method="POST">
<div class="collapse in" id="ali_store">
<div class="panel-body">
<input type="hidden" name="_token" value="CJDqNipNtpNavJ9m1fogtUyCThJe2GCS75bI6KJ2">
</div>
<hr />
<div class="panel-body">
Address Information
<div class="row">
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali_store" value="1" checked /> Use This Address
<div id="add_1_ali_store">
<br /> asd
<br /> asd,
<br /> xcv
<br /> sdf
</div>
</div>
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali_store" value="0" /> Use This Address
<div id="add_0_ali_store">
<div class="form-group">
<label class="col-lg-4">House no.</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_hno" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Street</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_street" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Area</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_area" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">City</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_city" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">State</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_state" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Postal Code</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_postal" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Phone</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_phone" class="secondary form-control" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Mobile</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_mobile" class="secondary form-control" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div>
TOTAL: <strong>Rs. 186,145.00 /-</strong>
</div>
<input type="submit" formtarget="_blank" class="btn btn-primary" value="Place Order" />
</div>
</div>
</form>
<form action="/ali2/order/place" method="POST">
<div class="collapse in" id="ali2">
<div class="panel-body">
<input type="hidden" name="_token" value="CJDqNipNtpNavJ9m1fogtUyCThJe2GCS75bI6KJ2">
</div>
<hr />
<div class="panel-body">
Address Information
<div class="row">
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali2" value="1" checked /> Use This Address
<div id="add_1_ali2">
<br /> asd
<br /> asd
<br /> asd
<br /> asd
</div>
</div>
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali2" value="0" /> Use This Address
<div id="add_0_ali2">
<div class="form-group">
<label class="col-lg-4">House no.</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_hno" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Street</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_street" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Area</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_area" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">City</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_city" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">State</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_state" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Postal Code</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_postal" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Phone</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_phone" class="secondary form-control" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Mobile</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_mobile" class="secondary form-control" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div>
TOTAL: <strong>Rs. 1,331.00 /-</strong>
</div>
<input type="submit" formtarget="_blank" class="btn btn-primary" value="Place Order" />
</div>
</div>
</form>
<form action="/ali3/order/place" method="POST">
<div class="collapse in" id="ali3">
<div class="panel-body">
<input type="hidden" name="_token" value="CJDqNipNtpNavJ9m1fogtUyCThJe2GCS75bI6KJ2">
</div>
<hr />
<div class="panel-body">
Address Information
<div class="row">
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali3" value="1" checked /> Use This Address
<div id="add_1_ali3">
<br /> dsa
<br /> dsa
<br /> dsa
<br /> dsa
</div>
</div>
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali3" value="0" /> Use This Address
<div id="add_0_ali3">
<div class="form-group">
<label class="col-lg-4">House no.</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_hno" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Street</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_street" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Area</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_area" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">City</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_city" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">State</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_state" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Postal Code</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_postal" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Phone</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_phone" class="secondary form-control" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Mobile</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_mobile" class="secondary form-control" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div>
TOTAL: <strong>Rs. 1,500.00 /-</strong>
</div>
<input type="submit" formtarget="_blank" class="btn btn-primary" value="Place Order" />
</div>
</div>
</form>
I want that if I change the radio button and it has value '0' then its input fields get disabled only else enabled.

You can write code like
$(document).ready(function() {
$('.address_type').change(function() {
if (this.value == '0') {
var id = $(this).attr('id');
$("#add_0_" + id).find("input.secondary").prop("disabled", false);
} else {
$("#add_0_" + id).find("input.secondary").prop("disabled", true);
}
});
});

How do I add an optional column in html form

I'm trying to make an appointment management using php and mysql
so a user can register himself by filling a form. I have added a checkbox naming Mon, ) .Tue, Thu ... and gave two fields time_from and time_to (start time and end ti). I will split these time and store it in my db.
The problem is what if user have different timings on different days of the week like someone might work 9 - 5 on Monday to Friday and 11-2 on Saturday.
I want to capture these values when a user registers. Can I add an optional field in my html form or is there any other way I can do this.
My current code
<form class="form-horizontal" role="form" name=fdadd method=post action=dsave.php>
<div class="form-group">
<label for="DoctorName" class="col-sm-3 control-label">Doctor Name</label>
<div class="col-sm-9">
<input type="text" id="firstName" name=name placeholder="Doctor Name" class="form-control" autofocus>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Gender</label>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" name="radio" id="femaleRadio" value="Female">Female
</label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" name="radio" id="maleRadio" value="Male">Male
</label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" name="radio" id="uncknownRadio" value="Unknown">Unknown
</label>
</div>
</div>
</div>
</div> <!-- /.form-group -->
<div class="form-group">
<label for="Specilization" class="col-sm-3 control-label">Specilization</label>
<div class="col-sm-9">
<input type="text" id="spec" name=spec placeholder="Specilization" class="form-control" autofocus>
</div>
</div>
<div class="form-group">
<label for="designation" class="col-sm-3 control-label">Designation</label>
<div class="col-sm-9">
<input type="text" id="designation" name=desig placeholder="Designation" class="form-control" autofocus>
</div>
</div>
<div class="form-group">
<label for="fee" class="col-sm-3 control-label">Fee</label>
<div class="col-sm-9">
<input type="text" id="fee" name=fee placeholder="Fee" class="form-control" autofocus>
</div>
</div>
<div class="form-group">
<label for="checkbox1" class="col-sm-3 control-label">Available On</label>
<div class="col-sm-9">
<input type="checkbox" name="weekday" value="Mon">Mon
<input type="checkbox" name="weekday" value="Tue">Tue
<input type="checkbox" name="weekday" value="Wed">Wed
<input type="checkbox" name="weekday" value="Thu">Thu
<input type="checkbox" name="weekday" value="Fri">Fri
<input type="checkbox" name="weekday" value="Sat">Sat
<input type="checkbox" name="weekday" value="Sun">Sun
</div>
</div>
<div class="form-group">
<label for="timef" class="col-sm-3 control-label">Available from</label>
<div class="col-sm-9">
<input type="time" id="timef" name=timef class="form-control">
</div>
</div>
<div class="form-group">
<label for="timet" class="col-sm-3 control-label">Available upto</label>
<div class="col-sm-9">
<input type="time" id="timet" name=timet class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" id="email" name=email placeholder="Email" class="form-control">
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-3 control-label">Phone Number</label>
<div class="col-sm-9">
<input type="text" id="phone" name=phone placeholder="Phone Number" class="form-control">
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-3 control-label">Address</label>
<div class="col-sm-9">
<textarea class="form-control" rows="3" id="address" name=address placeholder="Address"></textarea>
</div>
</div>
<div class="form-group">
<label for="city" class="col-sm-3 control-label">City</label>
<div class="col-sm-9">
<input type="text" id="city" name=city placeholder="City" class="form-control">
</div>
</div>
<div class="form-group">
<label for="state" class="col-sm-3 control-label">State</label>
<div class="col-sm-9">
<input type="text" id="state" name=state placeholder="State" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<button type="submit" value=submit class="btn btn-primary btn-block">Register</button>
</div>
</div>
</form>
I even tried cloning the time fields with
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});

How to Show/Hide the Div using Button

First, i wanted to automatically hide div part, then if i click the add guardian button. It will show the div part. Here's my code. Thankyou in Advance. Also i indicate my script here. Please check, thankyouuu!
<div align="right">
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row" id="guardian">
<h4 class="title-well">Guardian</h4>
<div class="checkbox">
<label> <input id="chkGuardian" type="checkbox">DECEASED
</label>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianFirstName"><span
class="text-danger">*</span> First Name</label> <input
rv-value="applicant:personalInformation:guardianFirstName"
class="form-control input-lg" name="guardianFirstName" id="guardianFirstName"
data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMiddleName"><span
class="text-danger">*</span> Middle Name</label> <input
class="form-control input-lg" name="guardianMiddleName"
rv-value="applicant:personalInformation:guardianMiddleName"
id="guardianMiddleName" data-validate="required"
placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianLastName"><span
class="text-danger">*</span> Last Name</label> <input
rv-value="applicant:personalInformation:guardianLastName"
class="form-control input-lg" name="guardianLastName" id="guardianLastName"
data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianNationality"><span
class="text-danger">*</span> Nationality</label> <input
rv-value="applicant:personalInformation:guardianNationality"
class="form-control input-lg" name="guardianNationality" id="guardianNationality"
data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dateOfBirth"><span
class="text-danger">*</span> Date of Birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth"
rv-value="applicant:personalInformation:guardianDateOfBirth | date"
type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
<div id="guardianDeceased">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianHomeNumber"><span
class="text-danger">*</span> Home Number</label> <input
rv-value="applicant:personalInformation:guardianHomeNumber"
class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber"
data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMobileNumber"><span
class="text-danger">*</span> Mobile Number</label> <input
rv-value="applicant:personalInformation:guardianMobileNumber"
class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber"
data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inputEmail" class="control-label"><span
class="text-danger">*</span>Email</label> <input
rv-value="applicant:personalInformation:guardianEmailAddress"
type="email" class="form-control input-lg" name="inputEmail" id="inputEmail"
placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-12">
<label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address
</label>
</div>
</div>
</div>
<div id="guardianAdd">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="guardianStreetAddress"><span
class="text-danger">*</span> Street Address</label> <input
rv-value="applicant:personalInformation:guardianStreetAddress"
class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress"
data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCity">City</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianCity"
type="text" class="form-control input-lg ref-city" name="guardianCity"
id="guardianCity" data-validate="required">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianProvince">Province</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianProvince"
type="text" id="guardianCity" name="guardianCity"
class="form-control input-lg ref-province">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label>
<select
rv-value="applicant:personalInformation:guardianCountry"
name="guardianCountry" class="form-control input-lg ref-country"
id="guardianCountry">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label>
<input class="form-control input-lg"
rv-value="applicant:personalInformation:guardianPostalCode"
name="guardianPostalCode" id="guardianPostalCode"
data-validate="required" placeholder="Zip Code" />
</div>
</div>
</div>
</div>
<!-- End Guardian -->
<script type="text/javascript">
function toggle_div_fun(id){
var divelement = document.getElementById(id);
if(divelement.style.display == 'none')
divelement.style.display == 'block';
else
divelement.style.display == 'none';
}
</script>

Since you're using Bootstrap, just use the collapse component..
<div align="right">
<button data-toggle="collapse" data-target="#guardian" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row collapse" id="guardian">
...
Demo: http://www.codeply.com/go/0jvcrckYOL

A tiny error in your code, you had == where you need a single =
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';

function toggle_div_fun(id){
var divelement = document.getElementById(id);
if(divelement.style.visibility == 'hidden')
divelement.style.visibility = 'visible';
else
divelement.style.visibility = 'hidden';
}
<div align="right">
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row" id="guardian">
<h4 class="title-well">Guardian</h4>
<div class="checkbox">
<label> <input id="chkGuardian" type="checkbox">DECEASED
</label>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianFirstName"><span
class="text-danger">*</span> First Name</label> <input
rv-value="applicant:personalInformation:guardianFirstName"
class="form-control input-lg" name="guardianFirstName" id="guardianFirstName"
data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMiddleName"><span
class="text-danger">*</span> Middle Name</label> <input
class="form-control input-lg" name="guardianMiddleName"
rv-value="applicant:personalInformation:guardianMiddleName"
id="guardianMiddleName" data-validate="required"
placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianLastName"><span
class="text-danger">*</span> Last Name</label> <input
rv-value="applicant:personalInformation:guardianLastName"
class="form-control input-lg" name="guardianLastName" id="guardianLastName"
data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianNationality"><span
class="text-danger">*</span> Nationality</label> <input
rv-value="applicant:personalInformation:guardianNationality"
class="form-control input-lg" name="guardianNationality" id="guardianNationality"
data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dateOfBirth"><span
class="text-danger">*</span> Date of Birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth"
rv-value="applicant:personalInformation:guardianDateOfBirth | date"
type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
<div id="guardianDeceased">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianHomeNumber"><span
class="text-danger">*</span> Home Number</label> <input
rv-value="applicant:personalInformation:guardianHomeNumber"
class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber"
data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMobileNumber"><span
class="text-danger">*</span> Mobile Number</label> <input
rv-value="applicant:personalInformation:guardianMobileNumber"
class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber"
data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inputEmail" class="control-label"><span
class="text-danger">*</span>Email</label> <input
rv-value="applicant:personalInformation:guardianEmailAddress"
type="email" class="form-control input-lg" name="inputEmail" id="inputEmail"
placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-12">
<label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address
</label>
</div>
</div>
</div>
<div id="guardianAdd">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="guardianStreetAddress"><span
class="text-danger">*</span> Street Address</label> <input
rv-value="applicant:personalInformation:guardianStreetAddress"
class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress"
data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCity">City</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianCity"
type="text" class="form-control input-lg ref-city" name="guardianCity"
id="guardianCity" data-validate="required">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianProvince">Province</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianProvince"
type="text" id="guardianCity" name="guardianCity"
class="form-control input-lg ref-province">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label>
<select
rv-value="applicant:personalInformation:guardianCountry"
name="guardianCountry" class="form-control input-lg ref-country"
id="guardianCountry">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label>
<input class="form-control input-lg"
rv-value="applicant:personalInformation:guardianPostalCode"
name="guardianPostalCode" id="guardianPostalCode"
data-validate="required" placeholder="Zip Code" />
</div>
</div>
</div>
</div>
<!-- End Guardian -->

here I'm giving you the short demo. prefer below is your example. where you have to toggle DIV with class " Your_Class ".
HTML
<div class="Your_Class">
"Your Content"
</div>
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
CSS
.Your_Class { display:none;}
.Your_Class.active { display:block;}
JS
$(".btn-primary").click(function(){
if($(".Your_Class").hasClass('active')) {
$(this).removeClass('active');
}
else
{
$(this).addClass('active');
}
});

Form submits even when i use prevent default on submit button click

what i want is that when i click on button "find reservation", the form submit should not refresh the page. Instead it should enable some fields in find reservation form underneath. But I am not able to achieve that. I am using bootstrap.
Here is my html part:-
<div class="container">
<div class="jumbotron checkInGuest">
<h3 class="h3Heading">Request for following information from guest</h3>
<form class="form-horizontal" id="checkInForm">
<div class="form-group">
<label for="reservationId" class="col-md-4">Reservation Id</label>
<div class="col-md-8">
<input type="text" class="form-control" id="reservationId" name="reservationId" required>
</div>
</div>
<div class="form-group">
<label for="dlNum" class="col-md-4">Driver License #</label>
<div class="col-md-8">
<input type="number" class="form-control" id="dlNum" min="0" name="dlNum" required>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<button type="submit" class="btn btn-success" id="findResButton">Find Reservation</button>
</div>
</div>
</form>
<!-- Form when info is found. Initially all fields are disabled-->
<div class="clear clearWithBorder"></div>
<h3 class="h3Heading">Information Found</h3>
<form class="form-horizontal">
<div class="form-group">
<label for="resId" class="col-md-3">Reservation Id</label>
<div class="col-md-3">
<input type="text" class="form-control" id="resId" name="resId" disabled>
</div>
<label for="dlNumReadOnly" class="col-md-3">Driver License #</label>
<div class="col-md-3">
<input type="number" class="form-control" id="dlNumReadOnly" min="0" name="dlNumReadOnly" disabled>
</div>
</div>
<div class="form-group">
<label for="guestFullName" class="col-md-3">Guest Full Name</label>
<div class="col-md-3">
<input type="text" class="form-control" id="guestFullName" name="guestFullName" disabled>
</div>
<label for="email" class="col-md-3">Email</label>
<div class="col-md-3">
<input type="email" class="form-control" id="email" name="email" disabled>
</div>
</div>
<div class="form-group">
<label for="numRooms" class="col-md-3">Rooms Booked</label>
<div class="col-md-3">
<input type="number" class="form-control readable" id="numRooms" name="numRooms" disabled>
</div>
<label for="roomType" class="col-md-1">Room Type</label>
<div class=" col-md-2">
<label for="smoking">
<input type="radio" name="roomType" id="smoking" class="roomType readable" disabled> Smoking
</label>
</div>
<div class=" col-md-3">
<label for="nonSmoking">
<input type="radio" name="roomType" id="nonSmoking" class="roomType readable" disabled>Non-Smoking
</label>
</div>
</div>
<div class="form-group">
<label for="discount" class="col-md-3">Discount</label>
<div class="col-md-3">
<select class="form-control readable" id="discount" disabled>
<option selected>0%</option>
<option>10%</option>
<option>20%</option>
<option>30%</option>
</select>
</div>
<label for="checkInDate" class="col-md-3">CheckIn Date</label>
<div class="col-md-3">
<input type="date" class="form-control readable" id="checkInDate" name="checkInDate" disabled>
</div>
</div>
<div class="form-group">
<label for="checkOutDate" class="col-md-3">CheckOut Date</label>
<div class="col-md-9">
<input type="date" class="form-control readable" id="checkOutDate" name="checkInDate" disabled>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<button type="button" class="btn btn-success" id="roomOrdButton">Confirm Room Order</button>
</div>
</div>
</form>
<div class="clear clearWithBorder"></div>
<h3 class="h3Heading">Final Room Order</h3>
<form class="form-horizontal">
<div class="form-group">
<label for="perInEachRoom" class="col-md-12">Number of people in each room</label>
<div class="col-md-8 " id="perInEachRoom">
</div>
<div class="form-group">
<div class="col-md-2">
<button type="button" class="btn btn-success" id="checkInButton">Check In</button>
</div>
</div>
</div>
</form>
</div>
</div>
And this is jquery part:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$("#checkInForm").validator();
$("#findResButton").click(function(e){
e.preventDefault();
$(".readable").prop("disabled",false);
});
$("#roomOrdButton").click(function(){
var numberOfRooms=$("#numRooms").val();
var counter=0;
var container=$('<div/>');
$(".readable").prop("disabled",true);
for(counter=1;counter<=numberOfRooms;counter++){
container.append('<label for="room">Room '+counter+'</label><input type="number" class="form-control readable" name="checkInDate" />');
}
$("#perInEachRoom").html(container);
});
$("#checkInButton").click(function(){
$("#perInEachRoom").html("");
});
</script>

You need to put your code in a document.ready() function, so:
$(document).ready(function() {
$("#checkInForm").validator();
$("#findResButton").click(function(e){
e.preventDefault();
$(".readable").prop("disabled",false);
});
$("#roomOrdButton").click(function(){
var numberOfRooms=$("#numRooms").val();
var counter=0;
var container=$('<div/>');
$(".readable").prop("disabled",true);
for(counter=1;counter<=numberOfRooms;counter++){
container.append('<label for="room">Room '+counter+'</label><input type="number" class="form-control readable" name="checkInDate" />');
}
$("#perInEachRoom").html(container);
});
$("#checkInButton").click(function(){
$("#perInEachRoom").html("");
});
});
You should also have a look at this question: Form is submitted when I click on the button in form. How to avoid this?
Long story short, you should use
<button type="button"...
not
<button type="submit"...

Actually, all I did is:-
$("#checkInForm").submit(function(e)
{
e.preventDefault();
});
And that solved it. I didnt have to change button type or anything. Basically, in future when I will make AJAX calls I will have the code underneath preventDefault statement.