Reputation: 127
I have this search form in a different file called webpage_search.html.
<ul class="search">
<li>
<form action="webpage_srch_rslts.php" method="GET">
<select style="height:30px;" class="col-sm-3" name="selection_id" id="selection_id">
<option value="Movies">Search by title</option>
<option value="Actors">Search by actor</option>
<option value="Directors">Search by director</option>
</select>
</li>
<li>
<input style="width:272px; height:30px;" type="text" name="query" />
</li>
<li>
<input style="height:30px;" type="submit" value="Search"/>
</form>
</li>
</ul>
When I have this code directly added to my page it works, the search works when I hit the submit button.
But when I try to load this content separately from a different file using jquery.load function then it only displays the form on the page but nothing happens when I hit the submit button.
Code I'm using for loading the form content into my div search_menu:
<script>
/* global $ */
$(document).ready(function() {
$('#search_menu').load('webpage_search.html');
});
</script>
Upvotes: 1
Views: 1563
Reputation: 4365
I recommend you use ajax()
syntax cause load()
is actually deprecated:
$(document).ready(function() {
$.ajax({
url: "webpage_search.html",
success: function(result){
$("#search_menu").html(result);
}
})
})
Also change place where form
tag open and close:
<ul class="search">
<form action="webpage_srch_rslts.php" method="GET">
<li>
<select style="height:30px;" class="col-sm-3" name="selection_id" id="selection_id">
<option value="Movies">Search by title</option>
<option value="Actors">Search by actor</option>
<option value="Directors">Search by director</option>
</select>
</li>
<li>
<input style="width:272px; height:30px;" type="text" name="query" />
</li>
<li>
<input style="height:30px;" type="submit" value="Search"/>
</li>
</form>
</ul>
Upvotes: 2