提交按钮,根据用户表单输入PHP转到url


Submit button that goes to a url based on user form input PHP

我有一个下拉搜索框,我想让它,当用户点击"检查",它会去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>

你可以发布用户输入,然后如果它不是空的,就用你的前缀链接。简单的代码

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

这可以通过HTML本身完成。

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

action属性指定当表单发生故障时将表单数据发送到哪里提交。

作为一个例子,请参见这个链接

因此,要使提交按钮重定向到页面,您应该为表单标记 指定一个操作。

那么,替换你的表单如下

<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是要重定向到的页面。

阅读更多关于HTML表单的文档

<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>

你不需要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>

我不确定您希望它看起来是什么样子,但这里有一个简单的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>