Question

如何使用onchange复选框或按下按钮来提交此功能？

我想提交表单和通话功能当onchange复选框或按下按钮时，

我该怎么做？

<form method="post" id="f1">
    <input type="checkbox" id="one" name="one" value="1">1<br>
    <input type="checkbox" id="two" name="two" value="2">2<br>
    <input type="submit" id="submit" name="submit" value="OK"/>
</form>



<script>
$(document).ready(function(){
    $('#submit').click(function() {
        $('#overlay').show();
        $.ajax({
            url: 'test.php',
            type: 'POST',
            data: $('#f1').serialize(),
            success: function(data){
                $('#overlay').hide();
                $('#result').html(data);
            }
        });
        return false;
    });
})
</script>

Answer 1

DEMO ....点击submit按钮或任意checkboxes时，查看控制台输出或网络输出。

您希望让submit按钮完成其工作 - 提交表单作为开始。点击submit按钮始终会触发提交表单事件。您希望checkbox更改事件触发相同的事件提交表单事件，相应的事件处理程序将负责其余事件。

$(document).ready(function(){
    $('#f1 :checkbox').on('change',function() {
        $(this.form).submit();
    });
    $('#f1').on('submit', function(e) {
        e.preventDefault();
        $('#overlay').show();
        $.ajax({
            url: 'test.php',
            type: 'POST',
            data: $(this).serialize(),
            success: function(data){
                $('#overlay').hide();
                $('#result').html(data);
            }
        });
    });
});

Answer 2

我的代码工作，有问题吗？

<form method="post" id="f1">
    <input type="checkbox" id="one" name="one" value="1" onclick="xxx()">1<br>
    <input type="checkbox" id="two" name="two" value="2" onclick="xxx()">2<br>
    <input type="submit" id="submit" name="submit" value="OK" onclick="return xxx();"/>
</form>

    <script>
    function xxx(){
        $('#overlay').show();
        $.ajax({
            url: 'test.php',
            type: 'POST',
            data: $('#f1').serialize(),
            success: function(data){
                $('#overlay').hide();
                $('#result').html(data);
                }
            });
        return false;
    }
    </script>

Answer 3

你可以这样做：

<form method="post" id="f1">
    <input type="checkbox" id="one" name="one" value="1" />1<br/>
    <input type="checkbox" id="two" name="two" value="2" />2<br/>
    <input type="submit" id="submit" name="submit" value="OK"/>
</form>
<script>
$(document).ready(function(){
$('#f1').submit(function() {
    $('#overlay').show();
    $.ajax({
        url: 'test.php',
        type: 'POST',
        data: $('#f1').serialize(),
        success: function(data){
            $('#overlay').hide();
            $('#result').html(data);
        }
    });
    return false;
});
$('#f1').change(function(){
    $(this).submit();
});
})
</script>

如何使用onchange复选框或按下按钮提交此功能？

3 个答案: