Javascript If Else skipping to end

Question

I need an extra pair of eyes from you guys to look at the following: I have two files: index.php and test_import.php

On the index.php I have a form for the user to select to upload a CSV file. When the user submits the form I use ajax to send the file to test_import.php

The script in the test_import.php file will detect if the user submitted a file and if it is in CSV format. If the user submitted a file in CSV format it will proceed to upload the data into a database and upon completion, it will send a success message back to index.php. If the user didn't submit a file or sent the incorrect format file the codes catches that, skips the data insert, and sends back an error message back to index.php

The above works well. The problem I'm having is in the index.php where it catches the response from the test_import.php file

data == "Error1" - wrong file format

data == "Error2" - no file submitted

data == "Success" - Data loaded

This is the code in index.php that catches the response from test_import.php

 <script>  
  $(document).ready(function(){  
       $('#upload_csv').on("submit", function(e){  
            e.preventDefault(); //form will not submitted  
            var err1 = document.getElementById("wrongfile_table");
            var err2 = document.getElementById("nofile_table");
            var x = document.getElementById("pleasewait");
            var y = document.getElementById("employee_table");
            //Show pleasewait image if blocked
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
            //Show success div if blocked
            if (y.style.display === "block") {
                y.style.display = "none";
            }

            $.ajax({  
                 url:"test_import.php",  
                 method:"POST",  
                 data:new FormData(this),  
                 contentType:false,          // The content type used when sending data to the server.  
                 cache:false,                // To unable request pages to be cached  
                 processData:false,          // To send DOMDocument or non processed data file it is set to false  
                 success: function(data){  
                      if(data == "Error1")  
                      {  
                            if (x.style.display === "block") {
                                x.style.display = "none";
                            } else {
                                x.style.display = "block";
                            }
                            //Show wrongfile div if blocked
                            if (err1.style.display === "none") {
                                err1.style.display = "block";
                            } else {
                                err1.style.display = "none";
                            }  
                            console.log(data);
                            return;
                      }  
                      else if(data == "Error2")  
                      {  
                            if (x.style.display === "none") {
                                x.style.display = "block";
                            } else {
                                x.style.display = "none";
                            }
                            //Show nowfile div if blocked
                            if (err2.style.display === "none") {
                                err2.style.display = "block";
                            }
                            console.log(data);
                            return;
                      }  
                      else
                      {  
                            if (x.style.display === "none") {
                                x.style.display = "block";
                            } else {
                                x.style.display = "none";
                            }


                            //Show success div if blocked
                            if (y.style.display === "none") {
                                y.style.display = "block";
                            } else {
                                y.style.display = "none";
                            }
                            console.log(data);
                      }  
                 }  
            })  
       });  
  });  

The problem I'm having is that if I get a response "Error1" or "Error2" it will jump to the "Success" "Else" statement to display the message "Data has been loaded". When in reality no data was loaded because in the file test_import.php it correctly caught the wrong file format or no file submitted action. Then obvioulsy if I submit a file in the correct format it uploads the data and correctly displays the success message.

Thanks in advance for your help.

Answer 1

Well have you tried to console.log(data) at the beginning of your success function ? If data is really a string and values are correct, there's no reason for the else statement to fire

Answer 2

So there is nothing wrong with my if else statement in my index.php. It is working as expected. Instead of trying to set the message depending on the error versus the success within the code in the index.php file I need to set the message in the if else statement in the test_import.php file and assign the message to the output as a string variable.

Code in my test_import.php

     if(!empty($_FILES["employee_file"]["name"]))  
    {  
      $connect = mysqli_connect("localhost", "user", "pass", "db");  
      $output = '';  
     $allowed_ext = array("csv");  
     $extension = end(explode(".", $_FILES["employee_file"]["name"]));  
     if(in_array($extension, $allowed_ext))  
     {  
      //do all my data insert here
  //insert code goes here

       $output .= 'Success';
       echo $output;  
  }  
  else  
  {  
       echo 'The file must be in csv format.';  
  }  
    }  
    else  
    {  
  echo "Please select a file.";  
    }