How to send multiple checkbox value using Angular post method to PHP?

Question

I'm new to Angular and I don't know to send multiple checkbox value to PHP (Server-side).

Code: https://jsfiddle.net/7uLxhnaj/1/

HTML

<form name="EnqFrm" ng-app="EnqFrm" ng-controller="EnqController" ng-submit="save()">
<label>Class Days:</label>
<input name="chkweek" ng-model="formData.chkweek.Mo" type="checkbox">Mo
<input name="chkweek" ng-model="formData.chkweek.Tu" type="checkbox">Tu
<input name="chkweek" ng-model="formData.chkweek.We" type="checkbox">We
<input name="chkweek" ng-model="formData.chkweek.Th" type="checkbox">Th
<input name="chkweek" ng-model="formData.chkweek.Fr" type="checkbox">Fr
<input name="chkweek" ng-model="formData.chkweek.Sa" type="checkbox">Sa
<button id="btnSubmit" class="btn btn-default">SUBMIT</button>

AngularJS:

/* ANGULAR JS */
var weeksknm;
var app = angular.module('EnqFrm', []);
app.controller('EnqController', function ($scope, $http) {

    $scope.formData = {};

    $scope.save = function () {
        var url = "Controller/enq_postadmin.php";
        $http.post(url, $scope.formData).success(function (da) {
            alert(da);
            $scope.formData = "";
        });
    };

});

PHP:

<?php if ($_SERVER['REQUEST_METHOD']=='POST') {
    $data=file_get_contents("php://input");
    $inp=json_decode($data);
    echo $txtWeek=$inp->chkweek;
}
else {
    echo'try agian';
}
?>

you can sent multiple check box by creating check boxes array of element — Manish Shukla, Apr 30 '15 at 06:55

Alaksandar Jesus Gene · Answer 1 · 2015-05-04T16:47:56.033

0

I have updated your code here

var app = angular.module('EnqFrm', []);

app.controller('EnqController', function ($scope, $http) {

$scope.formData = {};

$scope.save = function (da) {
    var url = "Controller/enq_postadmin.php";
    $http.post(url, da).success(function (response) {

         // Your action after getting response from server

    });     
    console.log(da);
};

});

HTML

<form name="EnqFrm" ng-app="EnqFrm" ng-controller="EnqController" ng-submit="save(formData.chkweek)">

Console.log Output

Object {Mo: true, Tu: true, We: true}

Pass this and get the key across.

Other way around is you need to use ng-true-value

 <input name="chkweek" ng-true-value="Monday" ng-model="formData.chkweek.mo" type="checkbox">Mo

And your output will be

Object {mo: "Monday"}

edited May 04 '15 at 16:47

answered Apr 30 '15 at 07:15

Alaksandar Jesus Gene

6,523
12
52
83

Happy to help. If you find my answer useful, please check right answer so it will be useful for future readers. – Alaksandar Jesus Gene Apr 30 '15 at 08:38
hi Alaksandar Jesus Gene i just want to save Object {We: "Wednesday", Th: "Thursday", Mo: "Monday"} array value to page and parameter for insert query – Sujeet Jaiswara May 02 '15 at 05:50
Hi..Sorry for the late reply. I dont understand your question. My assumption is my second suggestion. I have updated the jsFiddle. https://jsfiddle.net/alaksandarjesus/7uLxhnaj/4/ – Alaksandar Jesus Gene May 03 '15 at 14:37
i just want to this value to php page where this value saving in database. – Sujeet Jaiswara May 04 '15 at 13:13
update $http.post. Please look into it. this will pass the value. success will get the response of the server. – Alaksandar Jesus Gene May 04 '15 at 16:48
actually its pass array value of weeks and I don't know how to save array value to server using php – Sujeet Jaiswara May 05 '15 at 06:31

score 0 · Answer 2 · answered May 06 '15 at 02:20

Tested working code on my local server. You could later use the $selectedweek to store it in your database.

PHP

<?php
/*Receive Files*/
$data=file_get_contents("php://input");
$inp=json_decode($data);
/*Convert Object to array*/
foreach($inp as $weekcode => $weekname){
$selectedweek[$weekcode] = $weekname; 
};
/*Pass the selected week array back to angularjs for confirmation*/
print_r($selectedweek);

HTML

<form name="EnqFrm" ng-app="EnqFrm" ng-controller="EnqController" ng-submit="save(formData.chkweek)">
        <label>Class Days:</label>
        <input name="chkweek"  type="checkbox" ng-true-value="'Monday'"  ng-model="formData.chkweek.Mo">Mo
        <input name="chkweek"  type="checkbox" ng-true-value="'Tuesday'" ng-model="formData.chkweek.Tu">Tu
        <input name="chkweek" type="checkbox" ng-true-value="'Wednesday'" ng-model="formData.chkweek.We">We
        <input name="chkweek" type="checkbox" ng-true-value="'Thursday'" ng-model="formData.chkweek.Th">Th
        <input name="chkweek" type="checkbox" ng-true-value="'Friday'" ng-model="formData.chkweek.Fr"> Fr
        <input name="chkweek" type="checkbox" ng-true-value="'Saturday'" ng-model="formData.chkweek.Sa">Sa
        <button id="btnSubmit" class="btn btn-default">SUBMIT</button>
    </form>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
    <script>

        var app = angular.module('EnqFrm', []);

        app.controller('EnqController', function ($scope, $http) {

        $scope.formData = {};

        $scope.save = function (da) {
        var url = "Controller/enq_postadmin.php";
        $http.post(url, da).success(function (response) {
        console.log(response); // outputs your response from the server
        });     
        console.log(da); // outputs your selection passed from html to controller
        };

        });

    </script>

public function InsertEnqueryByAdmin($txtWeek) { try { $this->sql = "INSERT INTO enquirybyadmin(" ClassWeek) " . "VALUES(?)"; $stmt = $this->conn->prepare($this->sql); $stmt->bindParam(1, $txtWeek, PDO::PARAM_STR); $stmt->execute(); return "Form Successfully Submited!"; } catch (PDOException $ex) { echo $ex->getMessage(); } } — Sujeet Jaiswara, May 07 '15 at 06:40
http://stackoverflow.com/questions/4587988/how-to-pass-an-array-of-rows-to-pdo-to-insert-them — Alaksandar Jesus Gene, May 08 '15 at 16:02

How to send multiple checkbox value using Angular post method to PHP?

2 Answers2