<script>
$(document).ready(function(){
$("#search-jobs").click(function(e){
e.preventDefault();
key = $('#myInput').val();
location = $('#location').val();
alert(key);
alert(location);
});
});
</script>
<form autocomplete="off" action="javascript:void(0);" method="post">
<div class="row">
<input type="text" id="myInput" name="company" placeholder="Job title, keywords or company name">
<input type="text" id="location" name="location" placeholder="Location">
<button name="search-jobs" id="search-jobs" type="submit"><i class="la la-search"></i></button>
</div>
In this question I have create an autocomplete which is working fine. Now, what am I doing here? When I click on search-jobs it alert myInput value then alert url path like http://localhost/jobportal/index.php then redirect me on other page and url of other page is like localhost/jobportal/noida where noida is location. I don’t know what is the problem is this? Please help me.
Thank You
Answer
It is because you did not declare your variables properly.
$(document).ready(function(){
$("#search-jobs").click(function(e){
e.preventDefault();
let key = $('#myInput').val();
let location = $('#location').val();
alert(key);
alert(location);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form autocomplete="off" action="javascript:void(0);" method="post">
<div class="row">
<input type="text" id="myInput" name="company" placeholder="Job title, keywords or company name">
<input type="text" id="location" name="location" placeholder="Location">
<button name="search-jobs" id="search-jobs" type="submit"><i class="la la-search"></i>test</button>
</div>
</form>