使用单选按钮显示/隐藏div的多重力形式验证

时间:2012-09-06 20:01:46

标签: jquery forms wordpress

我在同一页面上使用2种重力表格时遇到问题。首先,每个表单都在一个隐藏的“div”中,用户必须从3个单选按钮中选择,这些按钮显示/隐藏另一个表单。这部分有效,然而如果验证失败,页面刷新并隐藏表单。用户必须重新单击相同的无线电以查看验证失败的原因。我还设置了重力形式以使用ajax模式,但这并不能解决问题。

这就是我的JavaScript:

<script type="text/javascript">

    jQuery(document).ready(function(){ 

        jQuery(".cdiv").hide();

        jQuery("input[name=contact_type]").change(function() {
            var _div_id = jQuery(this).val();
            jQuery(".cdiv").hide('slow');
            jQuery("#"+_div_id).show('slow');
        }); 
    });

</script>

HTML看起来像这样(我删除了表单以保持html简短)

<input type="radio" name="contact_type" value="c1" /> Careers <br />
<input type="radio" name="contact_type" value="c2" /> Partner with us <br />
<input type="radio" name="contact_type" value="c3" /> Media Inquiries <br />

<div class="cdiv" id="c1">
[career info here]
</div>

<div class="cdiv" id="c2">
form 1 loads here
</div>


<div class="cdiv" id="c3">
form 2 loads here
</div>

非常感谢您的帮助和建议。谢谢!

1 个答案:

答案 0 :(得分:0)

网页是无状态的 - 当它们加载(或重新加载)时,他们不知道他们以前的状态是什么。

由您来恢复状态,因此您必须在某处记录此状态。这通常存储在URL哈希或cookie中。

这应该如何处理URL哈希(您需要编写代码来执行此操作):

当用户点击其中一个单选按钮时,您将document.location.hash设置为已知值,例如“b1”。

然后当页面重新加载时,你会看到document.location.hash的当前值(使用JS),如果值是“b1”,你知道用户按下单选按钮#1。然后您的脚本会显示相应的面板。