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