简体   繁体   English

如何使用单选选项提交表单

[英]How to submit form using radio option

I'm doing my website in Safari. 我正在使用Safari浏览我的网站。 It works well in Safari, Firefox and Chrome. 它在Safari,Firefox和Chrome中运行良好。 But in Explorer it's not working properly. 但是在资源管理器中,它无法正常工作。 Here I want to submit a form and direct to another page when a radio option is clicked. 单击单选按钮时,我想在此处提交表单并定向到另一个页面。 I have used onChange="this.form.submit(); in the input. But it does not work in Explorer. Please suggest me a solution. I have tried query too. But that's also not working. I have attached the code below. 我在输入中使用了onChange="this.form.submit();但是它在资源管理器中不起作用。请为我提供一个解决方案。我也尝试过查询。但这也不起作用。我在下面附加了代码。

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" language="javascript">

    (function(document, window, $, undefined) {
        var form = $('#form-id');
        $('.radio-class').each(function(i, element) {
            var radio = $(element);
            radio.on('change', function() {
                // selected value
                var radioValue = $(this).val();
               form.submit();
            });
        });
    }(document, window, jQuery, undefined));

</script>

<body>
    <form action="go.php" method="post" id="form-id">
        <label for="radio-select"><input type="radio" name="radio-select" value="Mango" class="radio-class">Mango</label>
        <label for="radio-select"><input type="radio" name="radio-select" value="Apple" class="radio-class">Apple</label>
        <label for="radio-select"><input type="radio" name="radio-select" value="Pinaple" class="radio-class">Pinaple</label>
    </form>
</body>

Try this way: 尝试这种方式:

<script> 
    $(document).ready(function(){
        var form = $('#form-id');
        $('.radio-class').each(function(i, element){
            var radio = $(element);
            radio.on('change', function(){
                // selected value
                var radioValue = $(this).val();
                form.submit();
            });
        });
    });
</script>

The code inside $(document).ready() will be executed after the DOM is fully loaded. $(document).ready()中的代码将在DOM完全加载后执行。 This way, the .radio-class elements will exist when the listener for the change event is added. 这样,当添加change事件的侦听器时, .radio-class元素将存在。

It's explained better here . 这里有更好的解释。

This is another example with a simplified loop: 这是另一个带有简化循环的示例:

$(document).ready(function(){
    var form = $('#form-id');
    $('.radio-class').on('change', function(){
        form.submit();
    });
});

And this is with the shorthand for $(document).ready() 这是$(document).ready()的简写

$(function(){
    var form = $('#form-id');
    $('.radio-class').on('change', function(){
        form.submit();
    });
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM