Develop Reference

Change the Bootstrap Form with Bootstrap Dropdown and Jquery

I want to change which form to show using dropdown and jquery but doesn't seem to work. I did try a simple code using just a couple of divs and a paragraph and it worked or so I thought, because it's no longer work when I put my forms into it.
By the way, here's my code:
//this is the form
<div class="container">
<h3>Choose the brand you want to input</h3> <br>
<select id="brand-combox" class="custom-select col-sm-2" name="brand-combox">
<option selected value="#">Select a Brand</option>
<option value="qnap">Qnap</option>
<option value="asustor">Asustor</option>
<option value="nutanix">Nutanix</option>
<option value="dji">DJI</option>
<option value="wps">WPS Office</option>
</select>
</div>
<br>
<div class="container container-input" id="qnap-form" style="display: none;">
<form>
<div class="row">
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
<div class="container container-input" id="asustor-form" style="display: none;">
<form>
<div class="row">
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
Here is the jquery:
$('#brand-combox').on('change', function(){
if (this.value == 'qnap') {
$('#qnap-form').show();
$('#asustor-form').hide();
}
else if(this.value == 'asustor'{
$('#qnap-form').hide();
$('#asustor-form').show();
}
});
I also tried any different ways but I can't yet find out what I'm missing.
Would you be so kind to help me?

Your else if condition is not close with ) and add jquery, check it
$('#brand-combox').on('change', function(){
if (this.value == 'qnap') {
$('#qnap-form').show();
$('#asustor-form').hide();
}
else if(this.value == 'asustor'){
$('#qnap-form').hide();
$('#asustor-form').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<h3>Choose the brand you want to input</h3> <br>
<select id="brand-combox" class="custom-select col-sm-2" name="brand-combox">
<option selected value="#">Select a Brand</option>
<option value="qnap">Qnap</option>
<option value="asustor">Asustor</option>
<option value="nutanix">Nutanix</option>
<option value="dji">DJI</option>
<option value="wps">WPS Office</option>
</select>
</div>
<br>
<div class="container container-input" id="qnap-form" style="display: none;">
<form>
<div class="row">
<h2>qnap</h2>
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
<div class="container container-input" id="asustor-form" style="display: none;">
<form>
<div class="row">
<h2>asustor</h2>
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>

Hide the div click on NO radio button

I solved my issue in snippet but when i using it on my website is not applying means when i click the No radio button the pro div is not closing but here in snippet is working even no errors in console.
Please anyone have other solution to similar like this one. Thanks.
Updated with full code:
now not working here also there are two pro div should be close on No and open on YES
function ShowHideDiv() {
var chkYes = document.getElementById("chkYes");
var pro = document.getElementsByClassName("pro");
for (var i = pro.length - 1; i >= 0; i--) {
pro[i].style.display = chkYes.checked ? "block" : "none";
}
}
$('input[type="radio"]').change(function () {
$(this).nextAll('.pro').toggle(this.value == 'Yes');
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<form id="add_form" method="post" enctype="multipart/form-data" action="<?php echo site_url('contacts/save'); ?>">
<div class="row">
<div class="col-lg-6">
<h4>English</h4>
<div class="form-group">
<label>Category:</label>
<select id="contact_type" class="chosen-select required" multiple tabindex="6" name="contact_type[]">
<option value=""></option>
<?php foreach ($getSubCat as $key => $value) {?>
<option value="<?php echo $value['Sub_Category_Name'] ?>"><?php echo $value['Sub_Category_Name'] ?></option>
<? } ?>
</select>
</div>
<div class="form-group">
<input class="form-control required" name="name" id="name" placeholder="Business Name">
</div>
<div class="form-group">
<input class="form-control required" name="number1" id="number1" placeholder="Contact Number 1">
</div>
<div class="form-group">
<input class="form-control required" name="number2" id="number2" placeholder="Contact Number 2">
</div>
<div class="form-group">
<input class="form-control required" name="owner" id="owner" placeholder="Owner Name">
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="address" id="address" placeholder="Address"></textarea>
</div>
<div>
<div class="form-group ">
<select id="location" class="form-control required" name="location" >
<option value="">Select Location</option>
<?php
foreach ($getLoc as $key => $value) {
$location = $value['location_name']; ?>
<option value="<?php echo $location; ?>"> <?php echo $location; ?> </option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<div class="typediv">
<label><input type="radio" name="type" value="1"> Free</label>
<label><input type="radio" name="type" value="2"> Paid</label>
<label><input type="radio" name="type" value="3"> Emergancy</label>
</div>
</div>
<div class="2 box"></div>
<div class="3 box"></div>
<div class="form-group 2 box" style="display:none">
<input type="date" class="required" name='durability' id="datepicker" value="" >
</div>
<div class="form-group isprocontactdiv">
<label>Is Pro Contact </label>
Yes<input type="radio" id="chkYes" name="isprocontact" value="Yes" onclick="ShowHideDiv()">
No<input type="radio" id="chkNo" name="isprocontact" value="No" checked="">
</div>
<div class="pro" style="display: none;" >
<div class="form-group">
<input class="form-control required" name="email" placeholder="Email" >
</div>
<div class="form-group" >
<input type="file" name="userfile">
</div>
<div class="form-group">
<textarea class="form-control required" id="description" name="description" rows="3" placeholder="Description" ></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" id="services" rows="3" name="services" placeholder="Services" ></textarea>
</div>
</div>
</div>
<div class="col-lg-6">
<h4>Marathi</h4>
<div class="form-group">
<input class="form-control required" name="name_marathi" id="name_marathi" placeholder="व्यवसाय">
</div>
<div class="form-group">
<input class="form-control required" name="contact_owner_marathi" id="contact_owner_marathi" placeholder="मालकाचे नाव">
</div>
<div class="form-group">
<textarea class="form-control required" name="contact_address_marathi" id="contact_address_marathi" rows="3" placeholder="पत्ता"></textarea>
</div>
<div class="pro" style="display:none">
<div class="form-group">
<textarea class="form-control required" name="description_marathi" id="description_marathi" rows="3" placeholder="सविस्तर माहिती"></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="service_marathi" id="service_marathi" placeholder="सुविधा"></textarea>
</div>
</div>
</div>
</div>
<!-- /.row -->
<button type="submit" class="btn btn-success">Submit</button>
<button type="reset" class="btn btn-warring">Reset</button>
</form>
</div>

This might be your answer, ShowHideDiv() function because it is a little bit double to make a javascript function and using jQuery to do the same thing.
Also be careful with this
$("input[name='isprocontact']").change(function () {
if(this.value == 'Yes'){
$('.pro').show();
}else{
$('.pro').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<form id="add_form" method="post" enctype="multipart/form-data" action="<?php echo site_url('contacts/save'); ?>">
<div class="row">
<div class="col-lg-6">
<h4>English</h4>
<div class="form-group">
<label>Category:</label>
<select id="contact_type" class="chosen-select required" multiple tabindex="6" name="contact_type[]">
<option value=""></option>
<?php foreach ($getSubCat as $key => $value) {?>
<option value="<?php echo $value['Sub_Category_Name'] ?>"><?php echo $value['Sub_Category_Name'] ?></option>
<? } ?>
</select>
</div>
<div class="form-group">
<input class="form-control required" name="name" id="name" placeholder="Business Name">
</div>
<div class="form-group">
<input class="form-control required" name="number1" id="number1" placeholder="Contact Number 1">
</div>
<div class="form-group">
<input class="form-control required" name="number2" id="number2" placeholder="Contact Number 2">
</div>
<div class="form-group">
<input class="form-control required" name="owner" id="owner" placeholder="Owner Name">
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="address" id="address" placeholder="Address"></textarea>
</div>
<div>
<div class="form-group ">
<select id="location" class="form-control required" name="location" >
<option value="">Select Location</option>
<?php
foreach ($getLoc as $key => $value) {
$location = $value['location_name']; ?>
<option value="<?php echo $location; ?>"> <?php echo $location; ?> </option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<div class="typediv">
<label><input type="radio" name="type" value="1"> Free</label>
<label><input type="radio" name="type" value="2"> Paid</label>
<label><input type="radio" name="type" value="3"> Emergancy</label>
</div>
</div>
<div class="2 box"></div>
<div class="3 box"></div>
<div class="form-group 2 box" style="display:none">
<input type="date" class="required" name='durability' id="datepicker" value="" >
</div>
<div class="form-group isprocontactdiv">
<label>Is Pro Contact </label>
Yes<input type="radio" id="chkYes" name="isprocontact" value="Yes" >
No<input type="radio" id="chkNo" name="isprocontact" value="No" checked="">
</div>
<div class="pro" style="display: none;" >
<div class="form-group">
<input class="form-control required" name="email" placeholder="Email" >
</div>
<div class="form-group" >
<input type="file" name="userfile">
</div>
<div class="form-group">
<textarea class="form-control required" id="description" name="description" rows="3" placeholder="Description" ></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" id="services" rows="3" name="services" placeholder="Services" ></textarea>
</div>
</div>
</div>
<div class="col-lg-6">
<h4>Marathi</h4>
<div class="form-group">
<input class="form-control required" name="name_marathi" id="name_marathi" placeholder="व्यवसाय">
</div>
<div class="form-group">
<input class="form-control required" name="contact_owner_marathi" id="contact_owner_marathi" placeholder="मालकाचे नाव">
</div>
<div class="form-group">
<textarea class="form-control required" name="contact_address_marathi" id="contact_address_marathi" rows="3" placeholder="पत्ता"></textarea>
</div>
<div class="pro" style="display:none">
<div class="form-group">
<textarea class="form-control required" name="description_marathi" id="description_marathi" rows="3" placeholder="सविस्तर माहिती"></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="service_marathi" id="service_marathi" placeholder="सुविधा"></textarea>
</div>
</div>
</div>
</div>
<!-- /.row -->
<button type="submit" class="btn btn-success">Submit</button>
<button type="reset" class="btn btn-warring">Reset</button>
</form>
</div>

your question isn't really clear but if you want ide form when you click no you can process like that e.g:
var $chkNo = $('#chkNo');
var $chkYes = $('#chkYes');
var $proform = $('.pro');
$chkNo.on('click',function(){
$proform.css('display','none') // or you can play with visibility property
});
$chkYes.on('click',function(){
$proform.css('display','block') // or you can play with visibility property
});

show/hide search Div angular UI

I'm using angular UI buttons to make users select search criteria when user select buttons Patient or id it will show searchByText div if select date it will hide searchByText and show SearchBydateRange. my problem my is the angular show and hide is not working. and I use this codepen as example
http://codepen.io/SusanneLundblad/pen/iBhoJ
<div class="panel-body">
<form role="form">
<div class="col-md-7">
<div id="searchByText" class="form-group form-group-search" ng-hide=" searchOption == 'date'">
<label class="sr-only" for="search">Enter Search</label>
<input type="text" class="form-control" id="search" placeholder="Enter {{searchOption}} ..." data-ng-model="searchText">
</div>
<div id="SearchBydateRange" class="form-group form-group-search col-md-4" data-ng-show=" searchOption == 'date' ">
<label class=" sr-only" for="search">
Enter Search
</label>
<input type="text" class="form-control col-md-2" id="search" placeholder="From Date" data-ng-model="fromDate">
<input type="text" class="form-control col-md-2" id="search" placeholder="To Date" data-ng-model="toDate">
</div>
</div>
<div class="col-md-4 text-center">
<div class="btn-group btn-group-sm" data-ng-hide="userIsManager">
<label class="btn btn-searchsel" ng-model="searchOption" btn-radio="'patient'">Patient</label>
<label class="btn btn-searchsel" ng-model="searchOption" btn-radio="'id'">ID</label>
<label class="btn btn-searchsel" ng-model="searchOption" btn-radio="'Date'" va>Date</label>
</div>
</div>
<div class="col-md-1">
<button type="submit" class="btn btn-sm btn-info btn-search full-width" data-ng-click="doSearch()">Search</button>
</div>
</form>
</div>

Change the button part to this: (label or radio does not matter, but the important part is ng-click)
<div class="col-md-4 text-center">
<div class="btn-group btn-group-sm" data-ng-hide="userIsManager">
<input type="radio" ng-model="searchOption" value="patient" ng-click="searchOption = 'patient'">Patient</label>
<input type="radio" ng-model="searchOption" value="id" ng-click="searchOption = 'id'">ID</label>
<input type="radio" ng-model="searchOption" value="Date" ng-click="searchOption = 'date'">Date</label>
</div>
</div>
Then for your search div's:
<div class="col-md-7">
<div id="searchByText" class="form-group form-group-search" ng-hide=" searchOption == 'date'">
<label class="sr-only" for="search">Enter Search</label>
<input type="text" class="form-control" id="search" placeholder="Enter {{searchOption}} ..." ng-model="searchText">
</div>
<div id="SearchBydateRange" class="form-group form-group-search col-md-4" ng-show=" searchOption == 'date' ">
<label class=" sr-only" for="search">
Enter Search
</label>
<input type="date" class="form-control col-md-2" id="search" placeholder="From Date" ng-model="fromDate">
<input type="date" class="form-control col-md-2" id="search" placeholder="To Date" ng-model="toDate">
</div>
</div>

Wordpress + Ajax update record not working

I am having trouble in updating record using Ajax.
HTML & JS
<div class="row">
<form role="form" action="" type="post" id="abcdform">
<div class="col-md-3">
<div class="form-group">
<label for="date">Date</label>
<input type="date" class="form-control" id="date" name="date" placeholder="mm/dd/yyy" tabindex="1" value="<?php echo $dr->date; ?>">
</div>
<div class="form-group">
<label for="chats_init_customer">Chat Initiated by Customer</label>
<input type="number" class="form-control" id="chats_init_customer" name="chats_init_customer" placeholder="eg:5" tabindex="2" value="<?php echo $dr->chats_init_customer; ?>">
</div>
<div class="form-group">
<label for="emails_in">Emails Incomming</label>
<input type="number" class="form-control" id="emails_in" name="emails_in" placeholder="eg:5" tabindex="3" value="<?php echo $dr->emails_in; ?>">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="emails_out">Emails Outgoing</label>
<input type="number" class="form-control" id="emails_out" name="emails_out" placeholder="eg:5" tabindex="4">
</div>
<div class="form-group">
<label for="tickets_open">Tickets at Opening</label>
<input type="number" class="form-control" id="tickets_open" name="tickets_open" placeholder="eg:5" tabindex="5">
</div>
<div class="form-group">
<label for="tickets_closed">Tickets Closed</label>
<input type="number" class="form-control" id="tickets_closed" name="tickets_closed" placeholder="eg:5" tabindex="6">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="tickets_remain">Tickets Remaining Open</label>
<input type="number" class="form-control" id="tickets_remain" name="tickets_remain" placeholder="eg:5" tabindex="7">
</div>
<div class="form-group">
<label for="calls_taken">Calls Taken</label>
<input type="number" class="form-control" id="calls_taken" name="calls_taken" placeholder="eg:5" tabindex="8">
</div>
<div class="form-group">
<label for="calls_abandon">Calls Abandon</label>
<input type="number" class="form-control" id="calls_abandon" name="calls_abandon" placeholder="eg:5" tabindex="9">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="calls_avg_length">Calls Average Length</label>
<input type="number" class="form-control" id="calls_avg_length" name="calls_avg_length" placeholder="eg:5" tabindex="10">
</div>
<div class="form-group">
<label for="chats_total">Total Chats</label>
<input type="number" class="form-control" id="chats_total" name="chats_total" placeholder="eg:5" tabindex="11">
</div>
<div class="form-group">
<label for="sales">Sales</label>
<input type="number" class="form-control" id="sales" name="sales" placeholder="eg:5" tabindex="12">
</div>
<div class="feedback hidden-md hidden-lg"></div>
<input type="hidden" name="action" value="edit_daily_report">
<input type="submit" value="Update" id="abcdsubmit" class="btn btn-primary pull-right" tabindex="13">
<div id="process" class="loader pull-right"><img src="<?php echo abcd_root_url('css/images/loader.gif');?>" alt="loader" /></div>
</div>
</form>
</div>
<script type="text/javascript">
jQuery('#abcdform').submit(ajaxSubmit);
function ajaxSubmit() {
var abcdform = jQuery(this).serialize();
jQuery('#abcdsubmit').attr('disabled', true);
jQuery('#process').show();
jQuery.ajax({
type: "POST",
url: "<?php echo site_url(); ?>/wp-admin/admin-ajax.php",
data: abcdform,
success: function(data) {
jQuery(".feedback").html('<span class="glyphicon glyphicon-saved"></span> ' + data).addClass('alert alert-success');
jQuery('#process').hide();
jQuery('#abcdsubmit').attr('disabled', false);
}
});
return false;
}
</script>
Function
function edit_daily_report()
{
global $wpdb;
$date = $_POST['date'];
$conditionValue = array('id' => 19);
if ($wpdb->update('hf_abcd_daily_report', array('date' => $date), array('id' => 19)) === FALSE){
echo "Error";
} else {
echo "Record successfully added to the database. Record id is <strong>$wpdb->insert_id</strong>";
}
die();
}
When I hit Update button, it does nothing after form submit. Please ignore all fields in the form and only consider date field.

you should have ajax actions to work it with wordpress
add_action( 'wp_ajax_my_action', 'edit_daily_report' );
add_action( 'wp_ajax_nopriv_my_action', 'edit_daily_report' );

AngularJS ajax form submit with submit input

I have a form which having stepy wizard.For working stepy wizard,it is must to use input submit button not a button.So I am using submit button,but while clicking submit button it is redirecting to main page.
My code
<form action="#" id="wizard" class="form-horizontal" ng-submit="abc($event)">
<!-- Step 1 -->
<fieldset title="Step 1">
<legend>Registration</legend>
<div class="form-group">
<label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_house_number'); ?></label>
<div class="col-md-3"><input type="text" class="form-control" required="required" ng-model="newItem.housenumber"/></div>
<label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_house_name'); ?></label>
<div class="col-md-3"><input type="text" class="form-control" required="required" ng-model="newItem.housename"/></div>
</div>
</fieldset>
<fieldset title="Step 2">
<legend>Registration</legend>
<div class="form-group">
<label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_place'); ?></label>
<div class="col-md-3"><input type="text" class="form-control" required="required" ng-model="newItem.place"/></div>
<label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_land_mark'); ?></label>
<div class="col-md-3"><input type="text" class="form-control" ng-model="newItem.language"/></div>
</fieldset>
<fieldset title="Step 3">
<legend><?php echo $this->lang->line('label_fac'); ?></legend>
<div class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-6">
<label class="radio-inline">
<input type="checkbox" ng-model="newItem.electricity" value="electricity" /><?php echo $this->lang->line('label_electricty'); ?>
</label>
</div>
</div>
</fieldset>
<fieldset title="Step 4">
<legend>Agriculture</legend>
<div class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-6">
<label class="radio-inline">
<input type="checkbox" ng-model="newItem.cocunut" value="cocunut" /><?php echo $this->lang->line('label_cocunut'); ?>
</label>
</div>
</div>
</fieldset>
<fieldset title="Step 5">
<legend> Other</legend>
<div class="form-group">
<label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_get_any_help'); ?></label>
<div class="col-md-3"><input type="text" class="form-control" ng-model="newItem.help"/></div>
<label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_source'); ?></label>
<div class="col-md-3"><input type="text" class="form-control" ng-model="newItem.source"/></div>
</div>
</fieldset>
<input type="submit" class="finish btn-success btn" value="Submit"/>
</form>
and this is my controller
mahalPlus.controller('familyRegistrationController', function($scope) {
$scope.abc = function(event){
event.preventDefault();
alert('submitted');
};
});

The preventDefault is redundant, see the docs. You'll just need to remove the action attribute.
Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page) but only if the form does not contain an action attribute.
Instead, add ng-app to the appropriate HTML Element and ensure that your controller is properly loaded.
I've created a working example here, where you can see the changes I've suggested.

1- remove action
2- remove $event from ng-submit="abc($event)"
3- You better think about your using of PHP in your tags , this is not a good Idea:(

Believe you can just remove the action on the form.

Did you add the controller reference to your form tag?
<form id="wizard" class="form-horizontal" ng-submit="abc($event)"
ng-controller="familyRegistrationController">