<输入类型=“隐藏”功能问题 [英] <input type="hidden" functionality issue

问题描述

我们有一个使用javascript的分割菜单系统。因为即时消息请求信息，即时使用输入标签。

我不希望复选框，文本框，收音机按钮等干扰设计。所以我尝试了隐藏的输入类型。保持设计，但如果没有选择任何东西，则保持恢复到女性或列表中的第一个。例如。我选择男性并提交。男性选择输入我的代码。现在，我做了其他的事情，然后点击提交，下面的代码恢复到女性与我说的这样。它可以通过支票或收音机来做到这一点，那为什么要用隐藏来做到这一点。

另外，我应该使用什么输入类型，如果我不想扰乱功能或设计，或者我该怎么办。

 < 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）） ）; 
}）; 
 $ b $ function getSelectedValue（id）{
 return $（＃+ id）.find（li a span.value）。html（）; 
 
 $ b $（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 =sampleclass =dropdown> 
< a href =＃>性别|< span> {{gender}}< / span>< / a> 
 
< ul>< li>< a href =＃>< input id =radio1name =Gendervalue =Female/>一个> 
< a href =＃>< input id =radio2name =Gendervalue =Male/> Male< / a> 
< a href =＃>< input id =radio3name =Gendervalue =Both Sexes/> Two Sexes< / a> 
 
< / li>< / ul> 
< / li> 
< / ul> 
  

解决方案

您正在使用这些完全错误的。点击A标签完全没有改变。你为什么期望它？

你应该使用单选按钮，但正确地应用样式。或者将您的隐藏字段减少为一个，然后使用Javascript更改其值。不过，这是一个糟糕的设计，因为用户被给予 no 指示他们选择了什么。

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>

解决方案

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.

这篇关于<输入类型=“隐藏”功能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！