ul in form not sending data to $_POST

Question

I have a form with ul as a dropdown menu:

<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

Doctor Patient

How do I send what I select in it to a PHP $_POST variable?

I tried this post didn't work. Then, I got this form from this bootsrap templates signup form but I don't realy know javascript.

Here is the full form code:

<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>

Answer 1

Try this :

<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 Code :

$(".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;
}
?>

I'm assuming that your HTML and PHP files are in same folder.And you've included jQuery library in your HTML.

Answer 2

<ul> and <li> are not form tags that send value, you need to use <select> instead.

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

Answer 3

In <ul> <li> tags you cannot select a value. If you are using any pre-defined jquery library then you can pass by post data. Else change the ul li tags to "radio buttons or checkboxes or select" according to your requirement.

Answer 4

Using the below code i fixed the problem

            <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>

Answer 5

In the li tag add an attribute. Example:

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

and I assume you have an event for clicking the the li . If not, you can add a class. When you click that li with the respective class take the attribute. In this exemple you will take the "Doctor" from name_pressed attribute and with an if redirect on the page you want.

Like this:

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

and the javascript:

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

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

Or you can add onClick event. Check this