3

实际上，我正在使用一个列表，我正在尝试将我的<li>元素用作表单的一部分。我正在做如下所示的事情：-

<form action="index.php" method="post">
  <input type="hidden" name="search-type" value="commercial">
    <ul>
    <li name="search-option" id="buy" value="buy">inputBUY</li>
    <li name="search-option" id="rent" value="rent">RENT/LEASE</li>
    <li name="search-option" id="pg" value="pg">PG</li>
    </ul>
  <input type="submit" value="Submit" name="submit">
</form>

但是，当我提交此表单时，url 中没有出现“搜索选项”意味着我没有为我的 php 脚本获得“搜索选项”的任何值。

有没有办法在不使用任何<input >元素的情况下做到这一点。

4

4 回答 4

2

为此，您需要将事件处理程序添加到 li 或父容器，保存单击的项目并将结果 Ajax 到服务器，或者在内存中构建一个表单对象，或者使用选择创建一个 URL。

这是一个示例，它期望搜索在页面所在的同一服务器上完成 - 我使用的是 jQuery，因为它对您尝试做的事情最方便

我没有在现场演示中连接 Ajax。

Live Demo

建议的 HTML

<ul id="search-option">
    <li data-option="buy" class="sel">inputBUY</li>
    <li data-option="rent">RENT/LEASE</li>
    <li data-option="pg">PG</li>
</ul>
<a href="#" id="searchLink">Search</a>
<div id="result"></div>

推荐的 jQuery

$(function() { // when page loads
    $("#searchLink").on("click",function(e) { // when link clicked
        e.preventDefault(); // stop the click from any further action
        var option = $("#search-option li.sel").data("option"); // get the selected option
        $.post("search.php",{"option":option},function(data) { // post the option
            $("#result").html(data); // show the result
        });
    });
    $("#search-option li").on("click",function() { // when LI is clicked
        $(this)
         .addClass("sel")
         .siblings().removeClass("sel"); // Swap class
    });
});
于 2013-10-04T04:14:07.420 回答
2

不，您必须使用表单控件（输入，选择）才能将数据发送到服务器或您想要的任何地方，而不是 HTML 标记

于 2013-10-04T04:07:38.767 回答
2

简短而直接的答案是否定的。然而....

通常，您会发现一些 javascript 附加到列表项。单击时，javasctipt 将使用单击的值更新隐藏的表单字段。

另请注意，这value不是li

这是一个如何使用jQuery执行此操作的示例。

使用以下内容更新您的 html：

<input type="hidden" id="search-type" name="search-type" value="commercial">
<ul id="selType">
   <li name="search-option" id="buy" value="buy">inputBUY</li>
   <li name="search-option" id="rent" value="rent">RENT/LEASE</li>
   <li name="search-option" id="pg" value="pg">PG</li>
</ul>

并使用以下内容（您将需要 jQuery 并了解 $(document).ready

//Assign the value
$("#selType li").click(function(){
    $("#search-type").val($(this).attr("value"));
});

在此处查看实际操作：http: //jsfiddle.net/Xcgw4/

您也可以使用普通的 javasript，但对于这个演示，我将使用 jquery 库，因为它让生活变得轻松。

您还需要做一些事情来指示已单击的内容等。

于 2013-10-04T04:27:09.390 回答
0

您需要使用适当的表单控件。li用这样的替换select：

<form action="index.php" method="post">
 <select name="search-option">
  <option value="buy">BUY</option>
  <option value="rent">RENT/LEASE</option>
  <option value="pg">PG</option>
 </select>
 <input type="submit" value="Submit" name="submit">
</form>

或radio这样的：

    <form action="index.php" method="post">
     <input type="purchaseType" name="buy" value="buy">BUY<br>
     <input type="purchaseType" name="rent" value="rent">RENT/LEASE<br>
     <input type="purchaseType" name="pg" value="buy">PG<br>
     <input type="submit" value="Submit" name="submit">
    </form>
于 2013-10-04T06:39:06.170 回答