Sam Sam - 1 month ago 4
HTML Question

Get option value and append to search as additional keyword?

I have selection fields and a search box. I want users to select a recipe, then search ingredients by keyword in the search box. The search result domain should look like: https://www.domain.com?s=RECIPE+KEYWORD

The code I created below doesn't seem to append the RECIPE value though, only the keyword.

<select id="recipe-select" class="form-style" name="recipeType">
<option selected disabled>Select Your Recipe</option>
<option value="Cakes" name="selectedRecipe">I want to make Cakes</option>
<option value="Pies" name="selectedRecipe">I want to make Pies</option>
</select>
<div class="widget box" id="search-box">
<div class="widget-search">
<form action=" https://www.domain.com" method="post" onSubmit="search();return false;">
<input name="s" class="form-style" type="text" placeholder="Search" id="searchbox">
<button><i class="fa fa-search"></i></button>
</form>
</div>
</div>

<script type="text/javascript">
function search() {
alert("View all results?");
var a = document.getElementById("searchbox").value;
a = "https://www.domain.com/?s=<?php echo $_POST['selectedRecipe']; ?>+" + a;
a = a.replace(" ","+");
alert(a);
document.location = a;
}
</script>


I want the result of the search URL to look like this: https://www.domain.com?s=Cakes+keyword

Where the option value is automatically appended as a search keyword. The below doesn't seem to work.

<?php echo $_POST['selectedRecipe']; ?>


Thank you everyone for your input! Resolved! :)

Answer

Just add recipe and keywords like this in your search function...

var keyword = document.getElementById("searchbox").value;
var recipe = document.getElementById("recipe-select").value;
a = "https://www.example.com/?s=" + recipe + ' ' + keyword;

Code should look something like this...
http://codepen.io/shramee/pen/xEvrWZ

Hope that helps ;)

Comments