Question

这是我的HTML代码

<form id="searchForm">
<input name="search" type="text"/> 

<a href="search.php" id="searchLink"><img src="images/search-btn.jpg"  alt="search-btn" /></a>
</form>

如何在点击链接时将此文本框值发送到search.php页面？

Answer 1

您可以在表单中指定action指向要调用的PHP脚本，并使用图像提交按钮而不是锚点：

<form id="searchForm" action="search.php" method="post">
    <input name="search" type="text"/> 
    <input type="image" src="images/search-btn.jpg" alt="search-btn" />
</form>

Answer 2

请注意，作为替代附录，您还可以使用<button>元素，它允许比笨重的<input>元素更漂亮且可能更棒的样式。

来自MDN specification：

<button>元素比<input>元素更容易设计样式。你可以添加内部HTML内容（想想<em>，<strong>甚至<img>），以及利用:after和:before伪元素来实现复杂在<input>仅接受文本值属性时进行渲染。

它有几个属性HTML5，因此如果您没有使用该DOCTYPE，请务必仔细检查属性的要求，以及MDN页面上的浏览器供应商兼容性图表。实际上，所有浏览器都支持您现在需要的所有浏览器。

<强>演示：

<form id="form" action="search.php">
    <button type="submit" id="button">
        <p><input name="search" type="text"/></p>
        <img src="http://goo.gl/UohAz" alt="search-btn" id="img" />
    </button>
</form>

http://jsfiddle.net/userdude/RBUCw/1/

Answer 3

使用提交按钮将提交表单发送到search.php，您可以通过$ _POST []变量获取搜索框值。如果要在URL中显示搜索关键字，请使用GET方法并通过$ _GET访问search.php。

Answer 4

试试这个

<form id="searchForm" action="search.php" method="post">
    <input name="search" type="text"/> 
    <input type="submit" style="background:images/search-btn.jpg"  />
</form>

Answer 5

您可以在锚标记内使用onClick方法提交表单。 href需要设置为'＃'。此外，需要将表单操作设置为search.php。

<form id="searchForm" action="search.php">
  <input name="search" type="text" />
  <a href="#" onClick="document.getElementById('searchForm').submit();" id="searchLink"><img src="images/search-btn.jpg"  alt="search-btn" /></a>
</form>

如何在单击指向该页面的链接时将文本框值传递给php页面

5 个答案: