javascript - 选中复选框时提交表单并使用 POST 获取数据

Question

这是我的表格:

 <form class="form-horizontal" method="post" action=""  id="user_profile_private" name="user_profile_private">         
 <div class="onoffswitch">      
     <input type="checkbox" name="onoffswitch"  class="onoffswitch-checkbox" id="myonoffswitch" checked>
     <label class="onoffswitch-label" for="myonoffswitch">
     <div class="onoffswitch-inner"></div>
     <div class="onoffswitch-switch"></div>
    </label>
 </div>

我尝试过onChange="this.form.submit()" 和Onchange="document.getElementById('formName').submit()"。在某些时候，我什至成功提交了我的表单，但我无法成功获取数据。我想要的是在 $_POST 的同一页面中提交表单并获取数据(如果复选框(开关)打开或关闭)。

PS:我用 http://proto.io/freebies/onoff/ 进行了此切换也许有帮助。

重要的是通过 post 获取数据，因为当我尝试这样做时，我总是得到一个空数组 var_dump($_POST);

Answer 1

您可以在此使用 jquery $('selector').on('click'); 或 $.click() 。考虑这个例子:

<?php
// PHP form handling:

if($_SERVER['REQUEST_METHOD'] == 'POST') {
    $checkbox_value = $_POST['onoffswitch'];
    echo '<script>alert("'.$checkbox_value.'");</script>';
}
?>

<!-- change the action="" to the name of this php file -->
<form class="form-horizontal" method="POST" action="index.php"  id="user_profile_private" name="user_profile_private">           
    <div class="onoffswitch">      
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" value="1">
        <label class="onoffswitch-label" for="myonoffswitch">
            <div class="onoffswitch-inner"></div>
            <div class="onoffswitch-switch"></div>
        </label>
    </div>
</form>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $('#myonoffswitch').on('click', function(){
        if($(this).is(':checked')) {
            // if your checkbox is checked, submit the form
            $('#user_profile_private').submit();
        }
    });

});
</script>