如何通过Java将Bootstrap Toggle的值传递给PHP Form Action [英] How To Pass Value of Bootstrap Toggle With Javascript to PHP Form Action

问题描述

我有一个带有Bootstrap的表，该表从MySQL表中获取了一些数据，并且添加了ON&每行末尾的OFF:

I have a table with Bootstrap which gets some data from MySQL table and I have added a toggle of ON & OFF at the end of each row:

现在，我想进行一次表单操作，每次用户想要将切换从ON切换到OFF，然后从OFF切换到ON时，它都会像这样更新数据库表字段 menu_status :

Now I want to make a form action that every time user wants to switch the toggle from ON to OFF and OFF to ON, it updates the database table field menu_status like this:

if ON = 1, if OFF = 0

这是MySQL 菜单表:

因此，此表后面的形式是:

So the form behind this table is:

<form action='' method='POST'>
    <tr>
        <input type='hidden' value='".$menu['table_id']."' name='table_id'>
        <td>".++$menuCounter."</td>
        <td><a name='' href='viewmenu.php?menu_name=".$menu['menu_name']."'>".$menu['menu_name']."</a></td>
        <td>".$menu['menu_items']."</td>
        <td>".$menu['date_created']."</td>
        <td>".$menu['last_updated']."</td>
        <td>";if($menu['menu_status'] == '1'){echo "ON"; }else{echo "OFF"; } echo "</td>
        <td>".$menu['updated_by']."</td>
        <td>
            <div class='col-sm-5'>
                <button type='button' name='toggle' class='btn btn-sm btn-secondary btn-toggle active' data-toggle='button' aria-pressed='true' autocomplete='off'>
                    <div class='handle'></div>
                </button>
            </div>
        </td>
    </tr>
</form> 

我将其编码为PHP操作:

And I coded this as PHP action:

if(isset($_POST['submit'])){
    if ($_POST['toggle'] == 'off') {
        $toggle = '0';
    }else {
        $toggle = '1';
    }
    $id = $_POST["table_id"];
    $statuschange = new Menu();
    $statuschange->UpdateStatus($toggle,$id);   
}

而 Menu 类中的方法 UpdateStatus 包含:

public function UpdateStatus($toggle,$id)
    {
        if(!empty($toggle)&&!empty($id))
        {
            $reg = $this->_db->prepare("UPDATE menus SET menu_status = ?, WHERE table_id = ?");
            $reg->bindParam(1,$toggle);
            $reg->bindParam(2,$id);
            $reg->execute();
        }
    }

现在唯一的问题是我不知道如何在Javascript中获取切换按钮的值.因此，我可以在PHP表单操作中调用它.

Now the only problem is that I don't know how to get the value of toggle button within Javascript. So I can call it at the PHP form action.

推荐答案

我没有表格的 CSS 样式，但是基本上您可以使用 jQuery

I don't have the CSS styles of your table but basically you can do it with jQuery

  $('button[name=toggle]').on('click',function(){ //handle click event
    console.log($(this).hasClass('active')); //get active status
  });

如下面的代码片段所示，

您将获得按钮状态的布尔值.(按钮只是一个灰色区域，我没有添加 CSS 或btn样式的外部库的bcs)

as you can see in below snippet, you get a boolean value for the buttons status. (button is just a grey area bcs i didn't add CSS or external libary for btn style)

$( document ).ready(function() {
  $('button[name=toggle]').on('click',function(){
    console.log($(this).hasClass('active'));
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<table class="table">
<form action='' method='POST'>
    <tr>
        
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>

        <td>
            <div class='col-sm-5'>
                <button type='button' name='toggle' class='btn btn-sm btn-secondary btn-toggle' data-toggle='button' aria-pressed='true' autocomplete='off'>
                    <div class='handle'></div>
                </button>
            </div>
        </td>
    </tr>
</form>
</table>

这篇关于如何通过Java将Bootstrap Toggle的值传递给PHP Form Action的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！