如何将2个搜索表单合并在一起？

Question

我正在Wordpress上执行my website。我有2个搜索表单分别显示在我的网站上，我想知道如何将它们合并为一个。

第一个搜索表单搜索产品First search form第二个搜索产品的位置Second search form

很抱歉问这个愚蠢的问题，谢谢您的帮助：D

Answer 1

Javascript是您开始学习使用方法所需要的。使用Javascript，您可以从页面上的任何内容中获取价值。这是从两个不同形式的输入中提取值并将其发布到您的PHP文件的基本代码。

<!--first form-->
<form>
    <input type="text" id="product" name="product">
</form>

<!--second form-->
<form>
    <input type="text" id="city" name="city">
</form>

<div id="result"></div>

<script>
function continuePost() {

    var product = encodeURIComponent(document.getElementById("product").value);
    var city = encodeURIComponent(document.getElementById("city").value);
    var params = "product="+product+"&city="+city;

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

        var myResponse = JSON.parse(this.responseText);  //send a JSON response back from your PHP file

        if(myResponse.hasOwnProperty('error')){
            document.getElementById("result").innerHTML = myResponse.error;
        }else{
            var result1 = myResponse.myResult1;
            var result2 = myResponse.myResult2;   //or whatever key and value pairs that you used in the JSON response that you sent back from you PHP file
            document.getElementById("result").innerHTML = result1;
        }

    }else{
      window.setTimeout(failed(), 3000);
    }
  };
  xhttp.open("POST", "yourPHPfile.php", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send(params);
}

function failed(){
      document.getElementById("result").innerHTML = 'Failed to connect to server.';
}
</script>