Insert multiple selected checkbox value in database using php and angularjs

Question

I have an html form with checkbox, textbox and radio buttons. When the save button is clicked the form data is to be inserted into to database. I am using an angularjs controller to get the form data and PHP to insert into mysql.

Question: How do I insert selected checkbox value in controller and PHP? Explain to me with code examples.

Below is my code:

html code :

 <form class=rform align="center">
 <b>Product Name:<input type="text" name="name" ng-model="newProduct.name" required=""/><br>
 Product Category: <select name="catg" ng-model="newProduct.catg" ng-options="x for x in catg" ></select><br>
 TAGS : <br>
<ul>
<li ng-repeat="tag in tags">
  <input type="checkbox" name="tags" ng-model="newProduct.tags" value="tag" ng-true-value="tag"> {{tag}}
</li>
</ul>
<Status :<br><br>
<input type="radio"  ng-model="newProduct.stat" value="Active">Active
<input type="radio"  ng-model="newProduct.stat" value="Deactive">Deactive<br><br>
<input type="hidden" ng-model="newProduct.id" /></b>
<div class="btn"> <button type="submit"  ng-disabled="rform.$invalid" ng-click="saveRecord(newProduct)">Save</button></div>
</form>

app.js

   app.controller('ProductCtrl',function($scope,$http){
   $scope.tags = ["Appliances","Electronics","Men&Women","Others"] ;

   $scope.catg = ["mobile","Air Conditioner","Kitchen appliances","Footwear","SportsWear","clothes",
              "watches","Lptops","Televisions","Camera","Furniture","Kitchen Dining","Music","Stationery"];

  $scope.saveRecord = function (newProduct) {
  $http.post("php/pinsert.php",{
                     'name' : $scope.newProduct.name,
                     'catg' : $scope.newProduct.catg,
                     'tags' : $scope.newProduct.tags,
                     'stat' : $scope.newProduct.stat
                   })

                    // data:$scope.products,

                      .success(function(data){  
                               alert(data);  
                      })

                 angular.forEach($scope.tags, function(tag){
                 if (tag.selected) $scope.albumNameArray.push(tag.name);
                 tag.selected= false ;
                  });

                 tag.selected= false ;
    }

    $http.get("php/pselect.php").then(function (response) {
  $scope.myproducts = response.data.records;
 });


});

PHP :

     <?php 

    $connect = mysqli_connect("localhost", "root", "","user");
    $data = json_decode(file_get_contents("php://input"));


$p_name = mysqli_real_escape_string($connect, $data->name);
$p_catg = mysqli_real_escape_string($connect, $data->catg);
$tags = mysqli_real_escape_string($connect, $data->tags);
$status = mysqli_real_escape_string($connect, $data->stat);

$query = "INSERT INTO products(pname,pcatg,tag,status)  VALUES ('$p_name','$p_catg','$tags','$status')";
$result = mysqli_query($connect, $query) ;
if($result == TRUE) 
  {  
       echo "Data Inserted...";  
  }  
  else  
  {  
       echo 'Error';  
  }  

 ?>

Answer 1

I would restructure your tags array likewise. The selected property will be set to true if the checkbox is selected. The name is simply for display.

$scope.tags = [
    {"selected":false, "name":"Appliances"},
    {"selected": false, "name":"Electronics"},
    {"selected":false, "name":"Men&Women"},
    {"selected":false, "name":"Others"}
]; 

The markup for the checkboxes should also be restructured. Notice the ng-model is using the .selected property of $scope.newProduct.tags. This will set allow you to see which tags properties are selected when saving to the DB.

<li ng-repeat="tag.name for tag in tags"> 
    <input type="checkbox" name="tags" ng-model="tag.selected" value="tag" ng-true-value="tag"> {{tag.name}} 
</li>

When assigning newProduct to scope it is not necessary to pass it as a parameter in $scope.saveRecord(). You can also pass the entire object in the post body. The ajax call is written without the shorthand $http.post either way is fine but I find this easier to read.

$scope.saveRecord = function(){
    $http({
        url: "php/pinsert.php",
        method: "POST",
        data: $scope.newProduct
    }).success(function(data){
        // process returned data     
    });
}

On the backend the data will be structured the same your the $scope.newProduct object was structured. You will need to:

1. Loop through this data
2. Find the selected tags
3. Save the checked (selected.true) tag values into the table

I don't know the exact structure of your products table but the 3 steps above are a guide for saving complex data into the DB.

$connect = mysqli_connect("localhost", "root", "","user");
$data = json_decode(file_get_contents("php://input"));

foreach($data['tags'] as $tag){
    // Save only selected tags to products table
    if($tag->selected){
        $query = "
            INSERT INTO products(tag) 
            VALUES('$p_name','$p_catg','$tags','$status')
        ";
        $result = mysqli_query($connect, $query);
    }
}

Hopefully this gets your started, cheers!