Question

我有一个下拉搜索框，我想要它，以便当用户点击“检查”时，它会转到http://example.com/check/UserInput。这可能与php / html有关吗？

<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">
     <i class="glyphicon glyphicon-search"></i>
   </a>
   <ul class="dropdown-menu" style="padding:12px;">
      <form class="form-inline">
          <input type="text" 
                 class="searchAddress2 form-control pull-left" 
                 placeholder="Address">
          <button type="submit" 
                  class="searchAddress btn btn-default pull-right">Check</button>
      </form>
   </ul>
</li>

例如，用户单击搜索图标，出现下拉列表，他们在输入表单中输入“alksndlkasn”，然后单击检查。它们现已发送至http://example.com/check/alksndlkasn。

我尝试了这个，但它没有用。

 <form class="form-inline" action="https://example.com/check/text">
    <input id="text" 
           type="text" 
           class="searchAddress2 form-control pull-left" 
           placeholder="Address">
       <button type="submit" 
              class="searchAddress btn btn-default pull-right">Check</button>
 </form>

Answer 1

你可以发布用户输入，如果它不是空的，请转到带有你的前缀的链接。简单的代码

$add = !empty( $_POST['address']) ? $_POST['address'] : "--";
if($add !== "--" ) {
    $go = "http://example.com/check/$add";
    header("Location: $go");
}

Answer 2

这可以通过HTML本身来完成。

表单标记有一个名为action的属性。

action属性指定表单发送表单数据的位置提交。

例如，请参阅此link

因此，对于重定向到页面的提交按钮，您应该为表单标记

指定一个操作

所以，将表格替换为如下

<form class="form-inline" action="your_file.php">
     <input type="text" class="searchAddress2 form-control pull-left" placeholder="Address">
     <button type="submit" class="searchAddress btn btn-default pull-right">Check</button>
</form>

其中your_file.php是必须重定向到的页面。

在docs

中详细了解HTML表单

Answer 3

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="glyphicon glyphicon-search"></span>
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" style="padding:12px;">
                <input type="text" class="searchAddress2 form-control pull-left" placeholder="Address" id="text">
                <input type="hidden" name="url" id="url" value="http://example.com/check/">
                <button type="submit" class="searchAddress btn btn-default pull-right" 
                onclick="window.location.replace($('#url').val()+$('#text').val())">Check</button>
           
          </ul>
</div>

＆＃13;

你不需要php来做到这一点，看看这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="glyphicon glyphicon-search"></span>
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" style="padding:12px;">
                <input type="text" class="searchAddress2 form-control pull-left" placeholder="Address" id="text">
                <input type="hidden" name="url" id="url" value="http://example.com/check/">
                <button type="submit" class="searchAddress btn btn-default pull-right" 
                onclick="window.location.replace($('#url').val()+$('#text').val())">Check</button>

          </ul>
</div>

Answer 4

我不确定您希望它看起来如何，但这里有一个简单的HTML和Javascript示例，它允许用户选择表单中的内容然后将用户重定向到选择。另一个让用户输入内容，然后单击一个按钮进行重定向。

它可能不完全符合您的描述，但javascript演示了如何根据表单中的选择重定向用户。您可以根据需要更改表单控件，但概念仍然相同。

<HTML>
<HEAD>

<script language="javascript" type="text/javascript">

function changeFunc()
{
   var tmp =  document.getElementById("myList").value;
   window.location = tmp;
}


function goFunc()
{
   var tmp1 = "http://www.example.com/check/";  
   tmp1 +=  document.getElementById("myinput").value;

   window.location =  tmp1;
}


</SCRIPT>

</HEAD>

<BODY>

<form>
<select id='myList' onchange='changeFunc()'>
  <option value="default">Default</option>
  <option value="http://cnn.com">CNN</option>
  <option value="http://www.foxnews.com">Fox News</option>  
</select>
</form>


<form>

<input type="text" id="myinput"></input>
</form>
<button onclick="goFunc()">Go!</button>


</BODY>
</HTML>

根据用户表单输入PHP提交转到URL的按钮

4 个答案: