Reputation:
I have two div on index page that contains a datatable i need to hide two div by default when I select an option in dropdown then i need to show that corresponding div based on selection.
I am using this page for searching a div contains a drop downmenu contains two options to select.when i select indents it should return that corresponding div
Index File
@include('theme.header')
<br>
<div class="row" id="dropsearch">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body ">
<h4 class="mt-0 header-title">Search Indent</h4>
<label class="pull-left">
<select class="pull-left form-control input-lg" id="dropsearch" name="dropsearch">
<option>Select Search</option>
<option>Indents</option>
<option>Jobcards</option>
</select>
</label>
</div>
</div>
</div>
</div>
<div class="row" id="indents">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body ">
<h4 class="mt-0 header-title">Search Indent</h4>
<input type="text" id="searchid" name="searchid" class="pull-right form-control-sm">
<label class="pull-right">search</label>
<br>
<br><br>
<table id="datatable" class="table table-bordered table-responsive-lg">
<thead>
<tr>
<th>Slno</th>
<th>Customer Name</th>
<th>Customer Phone Number</th>
<th>DateOfDelivery</th>
<th>Delivery At</th>
<th>Redistraion Mode</th>
<th>Chassis No</th>
<th>Engine No</th>
<th>Show</th>
</tr>
</thead>
<tbody id="searchinfo">
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br>
<br>
<div class="row" id="jobcardd">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body bg-secondary text-white">
<h4 class="mt-0 header-title">Search Jobcard</h4>
<input type="text" id="searchjob" name="searchjob" class="pull-right form-control-sm">
<label class="pull-right">search</label>
<br>
<br><br>
<table id="datatable" class="table table-bordered table-responsive-lg">
<thead>
<tr>
<th>Slno</th>
<th>Jobcard No</th>
<th>Customer Order No</th>
<th>Ticket No</th>
<th>Bill No</th>
<th>Show</th>
</tr>
</thead>
<tbody id="searchjobcard">
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
$('#indents').hide();
$('#jobcardd').hide();
$(function () {
$("#dropsearch").change(function () {
if ($(this).val() == "indents") {
$("#indents").show();
}
else if ($(this).val() == "jobcard") {
$("#jobcardd").show();
}
});
});
$(document).ready(function () {
$('#searchid').on('keypress', function () {
$value = $(this).val();
$.ajax({
type: 'GET',
url: '{{\Illuminate\Support\Facades\URL::to('searchindents')}}',
data: {'searchid': $value},
success: function (data) {
$('#searchinfo').html(data);
// console.log(data);
}
})
})
});
$(document).ready(function () {
$('#searchjob').on('keypress', function () {
$value = $(this).val();
$.ajax({
type: 'GET',
url: '{{\Illuminate\Support\Facades\URL::to('searchjobacard')}}',
data: {'searchjob': $value},
success: function (data) {
$('#searchjobcard').html(data);
// console.log(data);
}
})
})
});
</script>
<script>
$.ajaxSetup({headers: {'csrftoken': '{{ csrf_token() }}'}});
</script>
@include('theme.footer')
Upvotes: 1
Views: 1609
Reputation: 3496
Change this
<option>Select Search</option>
<option>Indents</option>
<option>Jobcards</option>
To this
<option value="">Select Search</option>
<option value="indents">Indents</option>
<option value="jobcard">Jobcards</option>
You have given same ID to the DIV and DropDown!! Use this
<select class="pull-left form-control input-lg" id="dropsearchselect" name="dropsearch">
<option value="">Select Search</option>
<option value="indents">Indents</option>
<option value="jobcard">Jobcards</option>
</select>
$(function () {
$("#dropsearchselect").change(function () {
if ($(this).val() == "indents") {
$("#indents").show();
}
else if ($(this).val() == "jobcard") {
$("#jobcardd").show();
}
});
});
Here is a fiddle
$('#indents').hide(); $('#jobcardd').hide();
$(function () {
$("#dropsearchselect").change(function () {
if ($(this).val() == "indents") {
$('#jobcardd').hide();
$("#indents").show();
}
else if ($(this).val() == "jobcard") {
$('#indents').hide();
$("#jobcardd").show();
}else{
$('#indents').hide();
$('#jobcardd').hide();
}
});
});
Upvotes: 2