Question

I asked this question <input type="hidden" functionality issue a couple of days ago and was basically told its a mess your doing it wrong and style it properly. Thing is i dont know how so ill ask the same question a different way. I ask again cause im about 10hrs into this now, and no closer to a solution.

I want to add a form function that gets the information. Say

<form action="" method="get">

My belief is i have to add an input tab somewhere to actually get the info

<input type="....

And round it off with

<input type="submit" value="submit">
</form>

to submit it.

How do i incorporate this into the below code to add the functionality without losing the style. I havent add style/css section as i didnt think it would it matter to the question at hand.

<script type="text/javascript">
    $(document).ready(function() {
        $(".dropdown  a").click(function() {
            $(".dropdown ul").toggle();
        });

        });                                
        $(".dropdown ul li a").click(function() {
            var text = $(this).html();
            $(".dropdown a span").html(text);
            $(".dropdown ul").hide();
            $("#result").html("Selected value is: " + getSelectedValue("sample"));
        });

        function getSelectedValue(id) {
            return $("#" + id).find("li a span.value").html();
        }

        $(document).bind('click', function(e) {
            var $clicked = $(e.target);
            if (! $clicked.parents().hasClass("dropdown"))
                $(".dropdown ul").hide();
        });

    });
 <form action="" method="get"> 
 <div class="sort">
<ul> 
  <li id="sample" class="dropdown">
    <a href="#">Gender |<span>Both sexes</span></a>

    <ul><li><a href="#">Male<span class="value">Male</span></a>
            <a href="#">Female<span class="value">Female</span></a>
            <a href="#">Both Sexes<span class="value">Both Sexes</span></a>

    </li></ul>
  </li>
</ul>
 <input type="submit">
 </form>

Answer 1

I would have a form on the page with a single hidden field. Then I would have this menu with three choices. I would attach a javascript event handler to each item’s onclick event and in the event handler I would set the hidden field to a specific value. say, 1, 2, or 3. this field would be submitted when the user clicks the submit button.

here is the code: http://jsbin.com/izaruv/2