Whenever I click on the search-box <a>, the JavaScript is triggered but doesn't execute the ajax method filter_data_guide_specs(). Instead, the page automatically reloads and fails to read the JS code.
HTML
<div class="form-group">
<input id="search_text_guide_specs" class="typeahead form-control" placeholder="Search" type="text" value="">
<a href="" id="srchTxt_btn1"><span class="srch-btn fa fa-search"></span></a>
</div>
Script
$(document).ready(function(){
var searchTxt1 = '';
$('#srchTxt_btn1').on('click',function(e){
searchTxt1 = $('#search_text_guide_specs').val();
e.preventDefault();
filter_data_guide_specs();
$('#search_text_guide_specs').val(searchTxt1);
});
function get_filter_guide_specs(class_name) {
var filter = [];
searchTxt1 = $('#search_text_guide_specs').val();
});
return filter
}
function filter_data_guide_specs() {
$.ajax({
url: "{{url('guide-specs1')}}",
method: 'POST',
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
},
data:{searchTxt1:searchTxt1} ,
success:function(data){
console.log(data);
}
});
}
});
Route
Route::post('guide-specs1', 'GuestController@specShare2');
filter_data_guide_specs(); method does not run. Clicking on the guide-specs1 route should trigger it