how to properly use else if in javascript

Question

i have this script for submitting a form using jquery ajax, everything works fine except i can only get two responses, the loading part is implemented but the rest of them i can only get the else statement. the else if, none is working.

the json statement works just fine. and the data is passed to php successfully but the responses are not according.

 (function($) {

        'use strict';

        const FormFunction = function(){

            const checkSelectorExistence = function(selectorName) {
                if(jQuery(selectorName).length > 0){return true;}else{return false;}
            };



            let  registerForm = function()  {
                if(!checkSelectorExistence('.registration-form')){return;}
                jQuery('.registration-form').on('submit', function( event ) {
                    event.preventDefault();
                    let response        = $('.loading').addClass('show').show();
                    jQuery(this).find(".message").addClass('active').show('slow');

                    const formData      =   new FormData(this);
                    const formAction        =   jQuery(this).attr('action');

                    jQuery.ajax({
                        type: 'POST',
                        url: formAction,
                        data: formData,
                        contentType: false,
                        cache: false,
                        processData:false,
                        dataType: 'json',

                        beforeSend : function(){
                            $('.info').addClass('show').show('slow');
                        },

                        complete : function(){
                             $('.registration-form .message').html(response).delay(5000).hide('slow');
                             $('.registration-form')[0].reset();
                        },

                        success : function(data)
                        {
                            if(data.status === 1){
                                response = $('.success').addClass('show').show('slow');
                            }

                            else if(data.status === 2) {
                                response = $('.taken').addClass('show').show('slow');
                            }

                            else if(data.status === 0){
                               response =  $('.empty').addClass('show').show('slow');
                            }

                            else {
                                response = $('.error').addClass('show').show('slow');
                            }


                            $('.registration-form .message').html(response).delay(5000).hide('slow');
                            $('.registration-form')[0].reset();
                        },
                        error : function(data){
                            $('.error').addClass('show').show('slow');
                            $('.registration-form')[0].reset();
                        },

                    });

                });


            }

            /* Functions Calling */
            return {
                afterLoadThePage:function(){
                    registerForm();
                },
            }

        }(jQuery);

        /* jQuery Window Load */
        jQuery(window).on("load", function (e) {FormFunction.afterLoadThePage();});

    })(jQuery);

Everything seems fine, except maybe the usage of `===`. You would have to check that yourself as we don't know what data are returned in `success : function(data)` but your variable `data.status` might return a string representation of number, which is of different type. Using `===` compares value as well as data type of this value. — KayaNatsumi, Aug 09 '20 at 09:13
Try putting `console.log("data.status: type " + typeof data.status + ", value " + data.status);` at the beginning of `success : function(data)` and observe what will be written into console. If it is not "number", then all your `IF` and `ELSE IF` will be false. If it is "number", then value is not among the `IF` and `ELSE IF`. — KayaNatsumi, Aug 09 '20 at 09:22
what am doing is actually, echoing the json_encode from php instead of redirecting $feed = '{"status":1}'; echo json_encode($feed); — Godfrey Kangwa, Aug 09 '20 at 10:18

score 0 · Answer 1 · answered Aug 09 '20 at 15:26

Based on some comments that we traded I managed to test it out and found out, what is the root of your problem. Even thought you are setting dataType as JSON, what you actually pass from PHP is a string of value "{\"status\":1}". This is currently the content of your data variable in Success function of your AJAX call.

Adding following line of code at begging of your Success function will do what you want it to do: data = JSON.parse(data);. This will parse string returned by PHP into an JSON object in JS which will create data.status instance holding desired value of number type.

I did some test on my end and it worked as expected with IF and ELSE IF as well.

how to properly use else if in javascript

1 Answers1