Question

我想创建一个只有输入文本框和搜索按钮的简单表单。

一个人会在框中输入搜索词并按搜索。

所有这一切都是采用他们的搜索词并将其添加到网址的末尾。

因此，如果搜索字词是“意大利美食”，则提交按钮会将用户发送到http://domain/find/good意大利食品

最简单的方法是什么？

谢谢！

Answer 1

<html>
  <head>
    <script type='text/javascript'> 
      function Search() {
        var keyword = document.getElementById("keyword").value; 
        var url = "http://yourwebsite.com/find/"+keyword; 
        window.location = url; 
        return false;
      }
    </script>
  </head>
  <body>
    <form name="search">
      <input type="text" name="keyword" id="keyword" />
      <input type="button" name="btnser" onclick="Search()" value="Search" />
    </form>
  </body>
</html>

Answer 2

使用javascript和html表单

使用按钮和文本框创建表单在表单的帖子中调用javascript函数来创建带有用户输入文本的URL

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
  function redirect(){  
    var s = document.getElementbyID("txt").value;
    var url="http://url.com/" + s;
    window.location = url;
  }
</script>
</head>
<body>
  <form>
    <input type=''></input>
  </form>
</body>
</html>

Answer 3

我还建议使用encodeURI（）使其“安全”。

http://www.w3schools.com/jsref/jsref_encodeuri.asp

Answer 4

您可以覆盖onsubmit事件中的action属性： Example

HTML

<form action="#" onsubmit="send(this)" method="post" target="_blank" >
    <input id="text"/>
    <input type="submit" value="submit"/>
</form>

的JavaScript

function send( form){
    form.action = location.href + '/'+encodeURI(document.getElementById('text').value);
}

此外，在onsubmit事件中覆盖表单操作或重定向用户将允许您使用真正的submit按钮。

这使用户能够在完成输入后点击enter key提交搜索，而无需编写额外的逻辑来监听文本框中的回车键以提交搜索。

简单表格提交代码

4 个答案: