ul 在表单中不向 $_POST 发送数据答案

【问题标题】：ul in form not sending data to $_POSTul 在表单中不向 $_POST 发送数据
【发布时间】：2016-05-26 04:35:03
【问题描述】：

我有一个带有 ul 作为下拉菜单的表单：

<div class="dropdown">
    <button id="dLabel" class="form-control form-white dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account Type

医生病人

如何将我在其中选择的内容发送到 PHP $_POST 变量？

我试过this post 没用。然后，我从this bootsrap templates 注册表格中得到了这个表格，但我真的不懂javascript。

这是完整的表单代码：

<form action="account.php" class="popup-form" method="post">
    <input type="text" name="fname" class="form-control form-white" placeholder="Full Name">
    <input type="text" name="email" class="form-control form-white" placeholder="Email Address">
    <input type="text" name="username"  class="form-control form-white" placeholder="User Name">
    <input type="password" name="passwrd" class="form-control form-white" placeholder="Password">
    <div class="dropdown">
        <button id="dLabel" class="form-control form-white dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Account Type
        </button>
        <ul class="dropdown-menu animated fadeIn" role="menu" aria-labelledby="dLabel">
            <li class="animated lightSpeedIn"><a class="cl" href="#">Doctor</a></li>
            <li class="animated lightSpeedIn"><a class="cl" href="#">Patient</a></li>
        </ul>
    </div>
    <div class="checkbox-holder text-left">
        <div class="checkbox">
            <input type="checkbox" value="None" id="squaredOne" name="check" />
            <label for="squaredOne"><span>I Agree to the <strong>Terms &amp; Conditions</strong></span></label>
        </div>
    </div>
    <input type="submit" class="btn btn-submit"></input>
</form>

【问题讨论】：

你能展示一下到目前为止你已经尝试过什么吗？
UL 不是表单元素。要么使用链接通过 GET 发送，要么创建一些 javascript 代码以通过 ajax post 发送值
我试过stackoverflow.com/questions/5871478/…这个但没成功
默认情况下，uls 不会发布。您需要 <select> 或通过 js 更新的隐藏输入
你应该使用form标签和method="post"。然后你可以使用列表值来使用option标签。

标签： javascript php html css post

【解决方案1】：

试试这个：

<div class="dropdown">
    <button id="dLabel" class="form-control form-white dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Account Type
    </button>
    <ul class="dropdown-menu animated fadeIn" role="menu" aria-labelledby="dLabel">
        <li class="animated lightSpeedIn"><a class="cl" href="#">Doctor</a></li>
        <li class="animated lightSpeedIn"><a class="cl" href="#">Patient</a></li>
    </ul>
</div>

JS代码：

$(".cl").click(function () {
     var val = $(this).html();
     $.post("test.php",{v:val},function (data){
       alert(data);
     });
 });

test.php

<?php
if(isset($_POST["v"]) && $_POST["v"] != "") {
   echo $_POST["v"];
   exit;
}
?>

我假设您的 HTML 和 PHP 文件在同一个文件夹中。并且您已在 HTML 中包含 jQuery 库。

【讨论】：

【解决方案2】：

<ul> 和<li> 不是发送值的表单标签，您需要使用<select> 代替。

<select name="type">
  <option value="doctor">Doctor</option>
  <option value="patient">Patient</option>
</select>

【讨论】：

我想保留引导模板
@SebinPJohnson 看看bootstrap select

【解决方案3】：

在<ul> <li> 标签中，您不能选择值。如果您使用任何预定义的 jquery 库，那么您可以通过 post 数据传递。否则，根据您的要求将 ul li 标签更改为“单选按钮或复选框或选择”。

【讨论】：

【解决方案4】：

使用下面的代码我解决了这个问题

            <form action="account.php" class="popup-form" method="post">
                <input type="text" name="fname" class="form-control form-white" placeholder="Full Name">
                <input type="text" name="email" class="form-control form-white" placeholder="Email Address">
                <input type="text" name="username" class="form-control form-white" placeholder="User Name">
                <input type="password" name="passwrd" class="form-control form-white" placeholder="Password">
                <input class="span2" id="a_type" name="a_type" type="hidden">
                <div class="dropdown">
                    <button id="dLabel" class="form-control form-white dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Account Type
                    </button>
                    <ul class="dropdown-menu animated fadeIn" role="menu" aria-labelledby="dLabel">
                        <li onclick="$('#a_type').val('Doctor'); $('#searchForm').submit()" class="animated lightSpeedIn"><a class="cl" href="#">Doctor</a></li>
                        <li onclick="$('#a_type').val('Patient'); $('#searchForm').submit()" class="animated lightSpeedIn"><a class="cl" href="#">Patient</a></li>
                    </ul>
                </div>
                <div class="checkbox-holder text-left">
                    <div class="checkbox">
                        <input type="checkbox" value="None" id="squaredOne" name="check" />
                        <label for="squaredOne"><span>I Agree to the <strong>Terms &amp; Conditions</strong></span></label>
                    </div>
                </div>
                <input type="submit" class="btn btn-submit"></input>
            </form>

【讨论】：

【解决方案5】：

在li 标签中添加一个属性。示例：

<li class="animated lightSpeedIn" name_pressed="Doctor"><a href="#">Doctor</a></li>

我假设您有一个点击li 的事件。如果没有，您可以添加一个类。当您单击具有相应类的 li 时，获取该属性。在此示例中，您将从name_pressed 属性中获取“Doctor”，并在您想要的页面上使用if 重定向。

像这样：

<li class="animated lightSpeedIn clickable_li" name_pressed="Doctor">Doctor</li>

和javascript：

$(".clickable_li").click(function (e) {
    var name = $(this).attr('name_pressed');

    if (name == 'Doctor') {
        //make something
    }
});

或者您可以添加onClick 事件。检查this

【讨论】：