Question

我有5个单选按钮，想要在选择特定的收音机时显示不同的div 按钮，但其他div作为联系表格应显示在提交表格上。

还有一件事我希望下一个div在第一个div的相同位置（第一个div节目和第二个div隐藏在同一个地方）

<p>Tell us more about Yourself</p>
    <form class="request-demo-form" action="" method="post" onSubmit="e();" name="form1">
        <div class="input-block">
            <input name="info" class="input-radio" type="radio" value="Restaurant" /> Restaurant Chain with more than 3 Locations. ( Looking for more information )
        </div>
        <div class="input-block">
            <input name="info" class="input-radio" type="radio"  value="IndRestaurant"/> Independent Restaurant with 1-3 Locations ( Looking for more information )
        </div>
        <div class="input-block">
            <input name="info" class="input-radio" type="radio" /> Existing Punchh Customers ( Looking For Support)
        </div>
        <div class="input-block">
            <input name="info" class="input-radio" type="radio" /> User of Punchh Developed App ( Looking For Support)
        </div>
        <div class="input-block">
            <input name="info" class="input-radio" type="radio" /> Others ( Marketing , Partership etc.)
        </div>
        <br/>
        <div class="submit-btn-area">
            <button type="submit" class="button button-dark">SUBMIT<span class="arrow1"></span></button>
        </div>
    </form>

我对javascript的经验不多，所以请查看我的代码

<script type="text/javascript">
    $('input:radio[value="Restaurant"]').change(
        $('form').submit(function (e) {

            if ($(this).is(':checked')) {
                $('#main').hide();
                $('#Restaurant').show();
                e.preventDefault();
            }

        });
</script>

Answer 1

在上面的代码中，$（this）引用表单元素，而不是无线电输入字段。

我建议，在表单的提交事件中，我们检查无线电输入字段并隐藏并相应地显示div。

<script type="text/javascript">
$().ready(function() {
  $('form').submit(function (e) { 
    $('input:radio[value="Restaurant"]').is(':checked')) {
                $('#main').hide();
                $('#Restaurant').show();
                e.preventDefault();    
            }  
   });
  });
</script>

在选中的单选按钮上显示和隐藏div并提交表单

1 个答案: