オプション値を取得し、追加キーワードとして検索に追加しますか？

Question

私は選択フィールドと検索ボックスがあります。ユーザーがレシピを選択し、検索ボックスでキーワードで成分を検索するようにします。私は以下の作成されたコードは、しかし唯一のキーワードをRECIPE値を追加していないようhttps://www.domain.com?s=RECIPE+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> 

私は、検索URLの結果は次のようになりたい：オプションの値が自動的に検索キーワードとして追加されhttps://www.domain.com?s=Cakes+keyword

。以下は動作しないようです。

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

ありがとうございました！解決済み！ :)

Answer 1

コードだけがこのようになるはずです

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

...あなたの検索機能では、このようなレシピやキーワードを追加...
http://codepen.io/shramee/pen/xEvrWZ

お役に立てば幸いです。）

Answer 2

フォームを送信するまで、PHPが実行されないので、あなたは、JavaScriptでレシピの種類ではなく、PHPを取得する必要があります。また、レシピ選択ボックスは、フォームではなく、（その名前が<option>の上にあるが、それは何もしません）name="selectedRecipe"を持っていません。

function search() { 
    alert("View all results?"); 
    var recipeType = document.getElementById("recipe-select").value; 
    var keyword = document.getElementById("searchbox").value; 
    a = "https://www.domain.com/?s=" + encodeURIComponent(recipeType) + " " + encodeURIComponent(keyword); 
    a = a.replace(" ","+"); 
    alert(a); 
    document.location = a; 
} 

Answer 3

これを試してください。あなたがそれらを取得しない値を送る必要があるので、PHP $ _POSTを使用しないでください。 $ _POSTは空です。

<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" id="exampleForm" 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"> 
    document.getElementById('exampleForm').addEventListener('submit', function(evt){ 
      evt.preventDefault(); 
      var a = document.getElementById("searchbox").value; 
      a = "https://www.domain.com/?s="+encodeURIComponent(document.getElementById('recipe-select').value)+ "+" + a; 
      alert(a); 
      document.location.href = a; 
    }); 
    </script>