Update DB value using switch element

Question

I have an html switch to toggle between on and off:

<label class="switch">
    <input type="checkbox" id="togBtn" name="active" checked="checked">
    <div class="slider round">
        <span class="on">ON</span>
        <span class="off">OFF</span>
    </div>
</label>

You can check it live here: http://jsfiddle.net/tc4byzo8

It's checked by default onand it's inside a form:

<form method="post">
    ..
    <input type="submit" name="submit" value="Submit" >
<form>

When the Submit button is clicked, I insert the data into the DB:

//Check if submit button is clicked.
if( isset($_POST['submit']) ){

     //Insert the data into the DB.
    $stmt = $conn->prepare( /* Insert query */ );
    $stmt->execute();

}

The DB has column which values could be 1 or 0, So if the checkbox is checked, the value would be 1.

How to check if the checkbox is checked or not to insert the values 1 or 2?

I added the attribute checked="checked", So that it's checked by default, But when I switch it off, The checked attribute still there.

How to check if the checkbox is checked: https://stackoverflow.com/questions/4554758/how-to-read-if-a-checkbox-is-checked-in-php — hotfix, Aug 16 '18 at 11:51

score 1 · Answer 1 · answered Aug 16 '18 at 13:02

You can check value and assign it in if condition. Your code will look like below.

if( isset($_POST['submit']) ){
  if(isset($_POST['active'])){
    $_POST['active'] = 1;
  }else{
    $_POST['active'] = 0;
  }
  //Insert the data into the DB.
  $stmt = $conn->prepare( /* Insert query */ );
  $stmt->execute();
}

If you are facing any problem. let me know

score 0 · Answer 2 · edited Aug 16 '18 at 12:35

0

Hope this will help do it same for toggle.

$('input[type="checkbox"]').click(function(){ 
     if($(this).prop("checked")){ 
         $(this).val(1); 
      }else{ 
         $(this).val(0); 
     }
});

edited Aug 16 '18 at 12:35

michaelitoh

2,317
14
26

answered Aug 16 '18 at 12:19

Prakash Pandey

75
1
8

also by default you have to add default checkbox value to 1 – Vishnu Bhadoriya Aug 16 '18 at 12:40

mickmackusa · Accepted Answer · 2018-08-22T20:43:49.120

You can use php to conditionally declare the POSTed data like Anshul demonstrates.

You can modify the form with jquery before it is POSTed like Prakash Pandey demonstrates.

If you are happy to employ a simple html solution, then you can merely add <input type="hidden" name="active" value=1> before your checkbox line and add value=2 to your checkbox input.

The magic is in the shared name attribute. The hidden input field will act as a default setting which will be POSTed when the slider is set to OFF (the checkbox will not POST a value if set to OFF). When the checkbox slider is set to ON, the hidden field's value will be overwritten.

*note, I am interpreting your question requirements to mean that you want 1 for OFF and 2 for ON.

Here is the full form that I tested my solution with:

<form method="post">
 <label class="switch">
  <input type="hidden" name="active" value=1>
  <input type="checkbox" id="togBtn" name="active" checked="checked" value=2>
  <div class="slider round">
    <span class="on">ON</span>
    <span class="off">OFF</span>
  </div>
</label>
<input type="submit" name="submit" value="Submit" >
<form>

<?php
var_export($_POST);

Output for ON:

array ( 'active' => '2', 'submit' => 'Submit', )

Output for OFF:

array ( 'active' => '1', 'submit' => 'Submit', )

Update DB value using switch element

3 Answers3