<input type="hidden" functionality issue

Question

Iv'e got a split menu system using javascript. Because im requesting information, im using the input tags.

I dont want checkboxes, textboxes, radio butons etc interfering with the design. So i tried the hidden input type. Keeps the design, but keeps reverting back to female, or the first one on the list, if nothing was selected. For example. I select male and submit. Male selection enters my code. Now, i do something else and click submit, and the below code reverts back to female with out me say so. It dosent do thise with check or radio, so why does it do this with "hidden".

Also, what input type should i use if i dont want to upset function or design, or how else can i go about this.

<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>{{ gender }}</span></a> <ul><li><a href="#"><input id="radio1" name="Gender" value="Female"/>Female</a> <a href="#"><input id="radio2" name="Gender" value="Male"/>Male</a> <a href="#"><input id="radio3" name="Gender" value="Both Sexes"/>Both Sexes</a> </li></ul> </li> </ul>

Revert back. Is there any other way to revert? - Grammar Nazi — j08691
– j08691, Commented Jan 18, 2012 at 1:32

Andrew Barber · Accepted Answer · 2012-01-18 01:30:20Z

3

You are using these completely wrong. Clicking the A tags is changing nothing at all here. Why would you expect it to?

You should use the radio button, but apply styles to it properly. Or reduce your hidden fields to just one, and use Javascript to change its value. That's a bad design, though, because the user is given no indication what they have selected.

answered Jan 18, 2012 at 1:30

Andrew Barber

40.3k20 gold badges97 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jared Farrish Over a year ago

I don't see why just showing the radios is "interfering with design" (OPs description). What's a link indicate? Not a "selection". Maybe there's more than shown in the question, but it's seemingly a bad approach. I agree.

Andrew Barber Over a year ago

What a convoluted mess. My answer stands. Your additional code is actually making it worse by adding yet another instance of the already duplicated hidden field.

Kenaniah · Accepted Answer · 2012-01-18 01:29:38Z

That's because your hidden input fields are all named the same thing~~, therefore the last one defined will always take effect~~.

Edit: depending on the server language handling the request, the first, last, or entire list may be effective. PHP, for example, will only recognize the last value submitted.

Niet the Dark Absol · Accepted Answer · 2012-01-18 01:21:52Z

1

You need to use radio type inputs, but you can use style="display:none" to remove them from view.

answered Jan 18, 2012 at 1:21

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

2 Comments

JT. Over a year ago

Nope adding the style="display:none" stuffs it up

Andrew Barber Over a year ago

Styling them that way prevents their selection, perhaps except by scripting.

Collectives™ on Stack Overflow

<input type="hidden" functionality issue

3 Answers 3

2 Comments

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Linked

Related