Question

实际上，我正在使用一个列表，我尝试使用我的<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中没有“search-option”的出现意味着我没有为我的php脚本获得“search-option”的任何值。

有没有办法在不使用任何<input >元素的情况下执行此操作。

Answer 1

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

Answer 2

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

以下是一个示例，希望在页面打开时在SAME服务器上完成搜索 - 我正在使用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
    });
});

Answer 3

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

通常，你会发现一些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并依赖于$（文档）.ready

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

在此处查看此行动：http://jsfiddle.net/Xcgw4/

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

您还需要做一些事情来表明点击的内容等。

Answer 4

您需要使用正确的表单控件。将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>

我们可以在<html中使用<li>作为表单元素吗？</li>

4 个答案: