duankuixi1930 2015-11-25 19:16
浏览 129

将angularjs表单提交到数据库

hi i am totally new to angularjs and i have been exploring on form validation. i have managed to finish the validation part but now i am having troubles connecting to the database. i clicked on the submit button but nothing happens. I appreciate any forms of help, thank u.

<!DOCTYPE html>
<html>
<head>
<title>Add User Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="icon" href="spf-favicon.png" type="image" sizes="16x16"> 
<link href="testing.css" rel="stylesheet">
<div id="main">
<body style="background-color:white">
<header class="mainHeader">
<a href="home.php"><img src="policelogo.png"></a>

    <form align="right">
    <label class="logout">
        <table id="govlogo">
    <tbody>
        <tr="logo">
        <td>
            <a target="_blank" href="http://www.gov.sg">
            <img alt="Singapore Government" src="gov_logo.png"></img>
            </a>
        </td>
        </tr>
        <tr>
        <td style="float:right">
            <a target="_top" href="register.php">Register?</a>
            |
            <a target="_top" href="logout.php">Sign Out</a>
        </td>
        </tr>
    </tbody>
        </table>
    </label>
</form>

</header>
</body>
</head>

<body ng-app="myApp">
<div ng-controller="validateCtrl">

<h2 align="center">Add User Form</h2>

<form align="center" name="add_user" novalidate>
<ul>
                    <li class="err" ng-repeat="errorr in errors"> {{ errorr}} </li>
                </ul>
                <ul>
                    <li class="info" ng-repeat="msg in msgs"> {{ msg}} </li>
                </ul>

<p><b>Name:</b>
  <input type="text" placeholder="Enter your name" name="name" ng-model="name" style='margin-left:10px;' required>
  <span style="color:red" ng-show="add_user.name.$dirty && add_user.name.$invalid">
  <br>
  <span ng-show="add_user.name.$error.required">Name is required.</span>
  </span>
 </p>

<p><b>PDP :</b>
    <input type="text" placeholder="0----" name="PDP" ng-model="PDP" ng-minlength="5" ng-maxlength="5" ng-pattern="/^[0-9]+$/" style='margin-left:10px;' required>
    <span style="color:red" ng-show="add_user.PDP.$dirty && add_user.PDP.$invalid">
    <br>
    <span ng-show="add_user.PDP.$error.required">PDP is required.</span>
    <span ng-show="add_user.PDP.$error.pattern">PDP must be numeric.</span>
    <span ng-show="add_user.PDP.$error.minlength">Not less than 5 digits.</span>
    <span ng-show="add_user.PDP.$error.maxlength">Not more than 5 digits.</span>
    </span>
    </p>

<p><b>NRIC :</b>
    <input type="text" placeholder="S--------" name="nric" ng-model="nric" ng-minlength="9" ng-maxlength="9" ng-pattern="@/^[STFG]\d{7}[A-Z]+$/" style='margin-left:10px;' required>
    <span style="color:red" ng-show="add_user.nric.$dirty && add_user.nric.$invalid">
    <br>
    <span ng-show="add_user.nric.$error.required">NRIC is required.</span>
    <span ng-show="add_user.nric.$error.pattern">NRIC must be numeric.</span>
    <span ng-show="add_user.nric.$error.minlength">Not less than 9 digits.</span>
    <span ng-show="add_user.nric.$error.maxlength">Not more than 9 digits.</span>
   </span>
    </p>    

<p><b>Password:</b>
  <input type="password" placeholder="Enter a password" name="password" ng-model="password" style='margin-left:10px;' required>
  <span style="color:red" ng-show="add_user.password.$dirty && add_user.password.$invalid">
  <br>
  <span ng-show="add_user.password.$error.required">Password is required.</span>
  </span>
</p>

<p><b>Repeat Password:</b>
  <input type="password" placeholder="Repeat the password" name="password1" ng-model="password1" ng-pattern="password" style='margin-left:10px;' required>
  <span style="color:red" ng-show="add_user.password1.$dirty && add_user.password1.$invalid">
  <br>
  <span ng-show="add_user.password1.$error.required">Repeat Password is required.</span>
  <span ng-show="add_user.password1.$error.pattern">Password mixmatch.</span>
  </span>
</p>

<p><b>Email:</b> 
  <input type="email" placeholder="Enter your email" name="email" ng-model="email" style='margin-left:10px;' required>
  <span style="color:red" ng-show="add_user.email.$dirty && add_user.email.$invalid">
  <br>
  <span ng-show="add_user.email.$error.required">Email is required.</span>
  <span ng-show="add_user.email.$error.email">Invalid email address.</span>
  </span>
</p>

<p><b>Phone No. :</b>
    <input type="text" placeholder="9-------" name="tel_no" ng-model="tel_no" ng-minlength="8" ng-maxlength="8" ng-pattern="/^[0-9]+$/" style='margin-left:10px;' required>
    <span style="color:red" ng-show="add_user.tel_no.$dirty && add_user.tel_no.$invalid">
    <br>
    <span ng-show="add_user.tel_no.$error.required">Phone Number is required.</span>
    <span ng-show="add_user.tel_no.$error.pattern">Phone Number must be numeric.</span>
    <span ng-show="add_user.tel_no.$error.minlength">Not less than 8 digits.</span>
    <span ng-show="add_user.tel_no.$error.maxlength">Not more than 8 digits.</span>
    </span>
    </p>

  <p><label for="role"><b>Role :</b></label>
    <select name="role" id="role" required
  ng-options="option.name for option in data.availableOptions track by option.id"
  ng-model="data.selectedOption" style='margin-left:10px;' >
      <option value="">-Select Role-</option>
      </select>
      <br>
      <span class="error" style="color:red" ng-show="add_user.role.$dirty && add_user.role.$invalid">Role required.</span>
  </p>

  <p><label for="dept_id"><b>Department :</b></label>
    <select name="dept_id" id="dept_id" required
  ng-options="option.name for option in datas.availableOptions track by option.id"
  ng-model="datas.selectedOption" style='margin-left:10px;'>
      <option value="">-Select Dept ID-</option>
      </select>
      <br>
      <span class="error" style="color:red" ng-show="add_user.dept_id.$dirty && add_user.dept_id.$invalid">Dept ID required.</span>
  </p>

  <p><label for="license_class"><b>License Class :</b></label>
    <select name="license_class" id="license_class" required
  ng-options="option.name for option in datass.availableOptions track by option.id"
  ng-model="datass.selectedOption" style='margin-left:10px;'>
      <option value="">-Select License Class-</option>
      </select>
      <br>
      <span class="error" style="color:red" ng-show="add_user.license_class.$dirty && add_user.license_class.$invalid">License Class required.</span>
  </p>


<p>
  <button ng-click="save_user()" style='margin-left: 63px;margin-top:10px'
  ng-disabled="(add_user.name.$dirty && add_user.name.$invalid ||
  add_user.PDP.$dirty && add_user.PDP.$invalid ||
  add_user.nric.$dirty && add_user.nric.$invalid ||
  add_user.password.$dirty && add_user.password.$invalid ||
  add_user.password1.$dirty && add_user.password1.$invalid ||
  add_user.email.$dirty && add_user.email.$invalid ||
  add_user.tel_no.$dirty && add_user.tel_no.$invalid ||
  add_user.role.$dirty && add_user.role.$invalid ||
  add_user.dept_id.$dirty && add_user.dept_id.$invalid ||
  add_user.license_class.$dirty && add_user.license_class.$invalid)">Add User</button>

<input type="reset" data-icon="refresh" data-inline="true" data-mini="true" value="Reset" style='margin-left: 63px;margin-top:10px'>
</p>

</form>

    <script type="text/javascript">
(function(angular) {
  'use strict';
angular.module('myApp', [])
  .controller('validateCtrl', ['$scope', function($scope, $http) {
    $scope.data = {
     availableOptions: [
       {id: '1', name: 'Transport Officer'},
       {id: '2', name: 'Supervisor'},
       {id: '3', name: 'Subordinate'}
     ],
     };

     $scope.datas = {
     availableOptions: [
       {id: '1', name: 'A'},
       {id: '2', name: 'B'},
       {id: '3', name: 'C'}
     ],
     };

     $scope.datass = {
     availableOptions: [
       {id: '1', name: 'Class 2'},
       {id: '2', name: 'Class 3'},
       {id: '3', name: 'Class 4'},
       {id: '4', name: 'Class 5'}
     ],
 };

 $scope.errors = [];
 $scope.msgs = [];

 $scope.save_user = function() {
     $scope.errors.splice(0, $scope.errors.length);
     $scope.msgs.splice(0, $scope.msgs.length);

     $http.post('register.php', {'uname':$scope.name, 'updp': $scope.PDP, 'unric': $scope.nric, 'upassword': $scope.password, 'urpassword' : $scope.password1, 'urole' : $scope.role, 'uemail' : $scope.email, 'utelno' : $scope.tel_no, 'udept' : $scope.dept_id, 'ulicenseclass' : $scope.license_class}
     ).success(function(data, status, headers, config ) {
         if (data.msg != ' ')
         {
             $scope.msgs.push(data.msg);
         }
         else
         {
             $scope.errors.push(data.error);
         }
     }).errorr(function(data,status) {
         $scope.errors.push(status);
         });
     }
 }]);
})(window.angular);


<footer class="mainFooter">
        <p>
        Singapore Police Force &copy; 2015
        <br></br>
        <a target="_blank" href="http://www.mha.gov.sg">
        A Member of the Home Team</a>
        </p>
    </footer>
</body>


</div>
</html>
<?php

$con = mysqli_connect('localhost', 'username', 'password', 'databasename');

if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$names = mysqli_real_escape_string($con, $_POST['uname']);
$PDPs = mysqli_real_escape_string($con, $_POST['updp']);
$nrics = mysqli_real_escape_string($con, $_POST['unric']);
$passwords = mysqli_real_escape_string($con, $_POST['upassword']);
$roles = mysqli_real_escape_string($con, $_POST['urole']);
$emails = mysqli_real_escape_string($con, $_POST['uemail']);
$telnos = mysqli_real_escape_string($con, $_POST['utelno']);
$depts = mysqli_real_escape_string($con, $_POST['udept']);
$licenseclasss = mysqli_real_escape_string($con, $_POST['ulicenseclass']);

$qry_em = 'select count(*) as cnt from profiles where PDP ="' .$PDPs. '"';
$qry_res = mysqli_query($con, $qry_em);
$res = mysqli_fetch_assoc($con, $qry_res);

if ($res['cnt'] == 0) {
    $qry = 'INSERT INTO profiles (PDP, nric, name, password, role, email, tel_no, dept_id, license_class) VALUES ("$PDPs", "$nrics", "$names", "$passwords", "$roles", "$emails", "$tel_nos", "$dept_ids", "$license_classs")';
$qry_res = mysqli_query($con, $qry);
if ($qry_res) {
    $arr = array("msg" => "User Created Successfully!!!", "errorr" => "");
    $jsn = json_encode($arr);
    print_r($jsn);
    } else {
    $arr = array("msg" => "Error in adding user", "errorr" => "");
    $jsn = json_encode($arr);
    print_r($jsn);
    }
} else {
$arr = array("msg" =>  "User already exists with the same PDP", "errorr" => "");
$jsn = json_encode($arr);
print_r($jsn);

}
mysqli_close($con);     
?>
  • 写回答

1条回答 默认 最新

  • douqian6194 2015-11-25 19:24
    关注

    You don't have $scope.license_class initialized, before the POST request, define it:

    $scope.license_class = $scope.datass.selectedOption;

    Same gose for $scope.role and $scope.dept_id - The problems is with your selects ngModel

    评论

报告相同问题？

悬赏问题

  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 matlab求解平差
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料
  • ¥15 使用R语言marginaleffects包进行边际效应图绘制
  • ¥20 usb设备兼容性问题
  • ¥15 错误(10048): “调用exui内部功能”库命令的参数“参数4”不能接受空数据。怎么解决啊
  • ¥15 安装svn网络有问题怎么办