How do you compare values from AngularJS form data and MySQL database (PHP)?

Question

I can display the entire table of my database on my partial view, but what I want is to filter that and compare one of them with the output from my form. This is how I display my entire table.

server/fetch.php

<?php 

  $connect = mysqli_connect("localhost", "root", "ralph2012", "mipadsignup");
  $result = mysqli_query($connect, "SELECT * FROM tbl_codes");

  $data = array();

  while ($row = mysqli_fetch_array($result)) {
    $data[] = $row;
  }

  print json_encode($data);
?>

app.js (where my controller is)

http.get("server/fetch.php").success(function(response){
  scope.response = response;
}).error(function() {
  scope.response = "error in fetching data";
});

registration.php

<ul ng-repeat="codes in response">
  <li>{{codes.id}} {{codes.code}} {{codes.branch}} {{ formData.branches.alias }}</li>
</ul>

The formData.branches.alias is taken from the output produced by one of my form elements. I want its value to be compared to codes.branch , which is from the database. I do not want to list everything. I just want a portion of my codes.branch to run a check within its similar row values.

After comparing the two, I want to run again through its columns and check if any of them are available. If they are, I will randomly select one of the values to be inserted to my other table in the database.

[UPDATE]: As requested, this is my form

<div class="wrapper">
    <div class="form-group">
        <input class="form-control" ng-class="{'has-error': $submitted && signup.name.$invalid}" type="text" name="name" ng-model="formData.name" required minlength="2" placeholder="Full Name">
    </div>

  <div class="form-group">
    <input class="form-control" ng-class="{'has-error': $submitted && signup.igname.$invalid}" type="text" name="igname" ng-model="formData.igname" minlength="2" placeholder="Instagram Name (Optional)">
  </div>

    <div class="form-group">
    <input type="email" class="form-control" name="email" ng-class="{'has-error': $submitted && signup.email.$invalid}" ng-model="formData.email" ng-pattern="/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/" placeholder="E-mail Address" required>
  </div>

  <div class="form-group">
    <input type="number" name="mobile" ng-class="{'has-error': $submitted && signup.mobile.$invalid}" ng-model="formData.mobile" required class="form-control" minlength="11" maxlength="11" placeholder="Mobile Number">
  </div>

  <div class="form-group form-inline">
    <span class="nullable">
      <select id="regions" class="form-control" ng-model="formData.location" required ng-options="rg as rg.type for rg in region">
        <option value="">Choose Location</option>
      </select>
    </span>
    <span class="nullable">
      <select id="branches" class="form-control" ng-model="formData.branches" required ng-options="c as c[formData.location.displayName] for c in formData.location.data | orderBy:'branch'">
        <option value="">Choose Branch</option>
      </select>   
    </span>
  </div>
  <div class="form-group row">
    <button type="submit" class="submit btn">Submit</button>
  </div>
</div>

I run my checks here (registration.php):

<form id="signup-form" name="signup" ng-submit="processForm(signup.$valid)" novalidate>
  <!-- our nested state views will be injected here -->
  <div id="form-views" ui-view></div>
</form>

<pre style="margin-top: 2em;">
  <h3 style="margin:0 0 0 12px; padding: 0; line-height: 0;">Form Validation Test</h3>
  <span>If it displays, it's valid.</span>
  {{ formData.name }}
  {{ formData.igname }}
  {{ formData.email }}
  {{ formData.mobile }}
  {{ formData.location.type }}
  {{ formData.branches.branch }}
  {{ formData.branches.alias }}
</pre>

I want to assign just one codes.code to the registered user and mark the taken column with 1 as the code can never be reused by other registered users, until it rans out and gives a message that no more codes are available for registration.

This is where I insert all the inputs to the other table in my database.

http.post("server/insert.php",{'code': $code, 'fullname': scope.formData.name, 'instagram': scope.formData.igname, 'email': scope.formData.email, 'mobile': scope.formData.mobile, 'location': scope.formData.location.type, 'branch': scope.formData.branches.branch}).success(function(data, status, headers, config){
      console.log("inserted successfully");
    });

and the server/insert.php

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
@$code = $request->code;
@$fullname = $request->fullname;
@$instagram = $request->instagram;
@$email = $request->email;
@$mobile = $request->mobile;
@$location = $request->location;
@$branch = $request->branch;
$date = date('Y-m-d H:i:s');

$query = "INSERT INTO tbl_registration (code,fullname,instagram,email,mobile,location,branch,date_registered) VALUES ('" . $code . "', '" . $fullname . "', '" . $instagram . "', '" . $email . "','" . $mobile . "','" . $location . "','" . $branch . "','" . $date . "')";

Answer 1

You can check them against themselves and display them if they are equal see below code as per seeing your form. i'm wondering wouldn't this suffice your needs? add the code as an input in your form like below:

    <div class="wrapper">
    <div class="form-group">
        <input class="form-control" ng-class="{'has-error': $submitted && signup.name.$invalid}" type="text" name="name" ng-model="formData.name" required minlength="2" placeholder="Full Name">
    </div>

  <div class="form-group" ng-repeat="codes in response | orderBy:random | limitTo:1" ng-if="codes.branch == formData.branches.alias && codes.taken == 0">
      <input class="form-control" type="text" name="code" ng-model="formData.code" ng-value="codes.id">
  </ul>

  <div class="form-group">
    <input class="form-control" ng-class="{'has-error': $submitted && signup.igname.$invalid}" type="text" name="igname" ng-model="formData.igname" minlength="2" placeholder="Instagram Name (Optional)">
  </div>

    <div class="form-group">
    <input type="email" class="form-control" name="email" ng-class="{'has-error': $submitted && signup.email.$invalid}" ng-model="formData.email" ng-pattern="/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/" placeholder="E-mail Address" required>
  </div>

  <div class="form-group">
    <input type="number" name="mobile" ng-class="{'has-error': $submitted && signup.mobile.$invalid}" ng-model="formData.mobile" required class="form-control" minlength="11" maxlength="11" placeholder="Mobile Number">
  </div>

  <div class="form-group form-inline">
    <span class="nullable">
      <select id="regions" class="form-control" ng-model="formData.location" required ng-options="rg as rg.type for rg in region">
        <option value="">Choose Location</option>
      </select>
    </span>
    <span class="nullable">
      <select id="branches" class="form-control" ng-model="formData.branches" required ng-options="c as c[formData.location.displayName] for c in formData.location.data | orderBy:'branch'">
        <option value="">Choose Branch</option>
      </select>   
    </span>
  </div>
  <div class="form-group row">
    <button type="submit" class="submit btn">Submit</button>
  </div>
</div>

Javascript for random order :

$scope.random = function(){
    return 0.5 - Math.random();
};