Ajax receiving the incorrect error from PHP

Question

I am attempting to set up modal for a project in which a client would be able to update their favorite team, city of birth and their size. Upon not entering some of the information I would like an error message to be returned to them but the only error message being echoed is "City was not updated as there was not new information submitted."

the modal code is as follows:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-  labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
      </button>
     <h4 class="modal-title" id="myModalLabel">Modal title</h4>
    </div>
     <div class="modal-body">
    <form>
  <div class="form-group">
    <label for="city">You were born in:</label>
   <input type="text" class="form-control" id="city"  placeholder="city">

   </div>
   <div class="form-group">
   <label for="favorite_team">Favorite team:</label>
    <input type="text" class="form-control" id="favoriteTeam"  placeholder="favorite team">

   </div>
   <div class="form-group">
   <label for="size">size:</label>
    <input type="text" class="form-control" id="size"  placeholder="size">

   </div>

    <div class="alert alert-success" id="successAlert" role="alert"  style="display: none"></div>
   <div class="alert alert-danger" id="updateFail" style="display:none" >          </div>

    </form>
    </div>
     <div class="modal-footer">
     <button type="button" class="btn btn-secondary" data-dismiss="modal"  >Close</button>
     <button type="button" class="btn btn-primary" id="saveBtn"  onClick="Changes()">Save changes</button>
   </div>
   </div>
   </div>
   </div>

my ajax code is:

  function Changes(){
   $.ajax({
           type: "POST",
          url: "../php_parsers/update_parse.php",
          data: "city=" + $("#city").val() + "&favoriteTeam=" +    $("#favoriteTeam").val() + "&size=" + $("#size").val(),
            success: function(result) {
              if (result == "success") {

                $("#successAlert").html(result).show();

                } else {

                $("#updateFail").html(result).show();

                }
             }

           })

           }

my php code is update_parse.php:

<?php
// AJAX CALLS THIS UPDATE CODE TO EXECUTE
$error = "";
$success = "";
if(!$_POST['city']){
$error .= "City was not updated as there was not new information submitted.";
} else if(!$_POST['team']){
$error .= "Team was not updated as there was not new information submitted.";
} else if(!$_POST['size']){
    $error.= "size was not updated as there was not new information submitted.";
    } 

    if($error == ""){
        echo $error;
        }else {
            $success = "update successful so far";
        echo $success;


            }


 ?>

All feed back is welcomed.

Answer 1

try to put your parameter like this

var param= {
    "city" : $("#city").val(),
    "favoriteTeam" : $("#favoriteTeam").val(),
    "size" : $("#size").val()
 };

then in your ajax property data make it like this:

$.ajax({
    type: "POST",
    url: "../php_parsers/update_parse.php",
    data: param,
    success: function(result) {
      if (result == "success") {
        $("#successAlert").html(result).show();
        } else {
        $("#updateFail").html(result).show();
        }
     }
})

Answer 2

Try building your AJAX like this

$.ajax({
    url: "../php_parsers/update_parse.php",
    type: "POST",
    data: { 
       city:         $("#city").val(), 
       favoriteTeam: $("#favoriteTeam").val(), 
       size:         $("#size").val() 
    }
  }).done(function(result) {
     if (result == "success") {
        $("#successAlert").html(result).show();
     } else {
        $("#updateFail").html(result).show();
     }
})

Also isn't your return a little funky

if($error != ""){  <------------- Change
  echo $error;
}else {
  $success = "update successful so far";
  echo $success;
}

Answer 3

You are using if else if construct for you checks which will only report at most one error. Change it to independent if statements

if(!$_POST['city']){
    $error .= "City was not updated as there was not new information submitted.";
} 
if(!$_POST['team']){
    $error .= "Team was not updated as there was not new information submitted.";
} 
if(!$_POST['size']){
    $error.= "size was not updated as there was not new information submitted.";
}