如何使用Angular post方法向PHP发送多个复选框值?

时间:2015-04-30 06:35:16

标签: php angularjs

我是Angular的新手,我不知道向PHP发送多个复选框值(服务器端)。

  

代码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';
}
?>

2 个答案:

答案 0 :(得分:0)

我已更新您的代码here

empty string

<强> HTML

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);
};

});

Console.log输出

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

传递此信息并获取密钥。

其他方面是你需要使用ng-true-value

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

您的输出将是

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

答案 1 :(得分:0)

在我的本地服务器上测试了工作代码。您可以稍后使用$ selectedweek将其存储在数据库中。

<强> 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>