将搜索框的输入追加到按钮链接中

问题描述 投票:0回答:2

我将简短扼要。 :)

我正在尝试在我的网站上实现一个按钮,该按钮将我重定向到我指定的URL +用户正在寻找的内容。

我在这里有这小段代码:

<html>
  <div class="search">
    <form role="search" method="get" id="search">
        <div>
            <input type="text" value="" name="tag_search" id="tag_search" />
            <input type="button" value="Cerca" onclick="window.location.href='https://mywebsite.com/'" />
        </div>
    </form>
  </div>
</html>

几乎工作。

唯一的问题是,如果用户在搜索框中输入“ Hello”,则一旦按下“提交”按钮,它将始终搜索以下URL:https://mywebsite.com/

我如何将用户已写的内容附加到搜索框中,以便按钮将我重定向到:https://mywebsite.com/Hello

谢谢大家!

php html wordpress button hyperlink
2个回答
1
投票

将输入的值添加到链接中

<html>
  <div class="search">
    <form role="search" method="get" id="search">
      <div>
        <input type="text" value="" name="tag_search" id="tag_search" />
        <input type="button" value="Cerca" 
          onclick="window.location.href='https://mywebsite.com/' + 
          document.getElementById('tag_search').value" />
      </div>
    </form>
  </div>
</html>

1
投票

添加以下Java脚本以提供帮助

<script>
function goToSearch() {
    window.location.href= 'https://mywebsite.com/' + encodeURI(document.getElementById("tag_search").value)
}

</script>

然后您的HTML应该看起来像这样

<html>
  <div class="search">
    <form role="search" method="get" id="search">
        <div>
            <input type="text" value="" name="tag_search" id="tag_search" />
            <input type="button" value="Cerca" onclick="goToSearch()" />
        </div>
    </form>
  </div>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.