Array of check boxes ignoring the AJAX call if only one is checked

Question

Sorry I am posting again so soon but I really have tried a lot of different option hoping it would work.

I have an jQuery/AJAX form that will create the array based on the users input. The AJAX will then send the values over to my PHP script to pull and place the data from my db.

The problem I am getting is when I check only one box, then the AJAX creates a blank result

It works 100% okay if you select 2 or more values. I was thinking maybe its caused by an array starting with 0 or some other odd factor. I also checked in my console and it is submitting the right values to my PHP page.

Single Value

XHR finished loading: "http://healthbenefitsohio.com/expertise.php?expertise%5B%5D=Ancillary".

Two and up Values

XHR finished loading: "http://healthbenefitsohio.com/expertise.php?expertise%5B%5D=Ancillary&expertise%5B%5D=SmallGroup".

I then decided maybe I can achieve this by using an if statement and this didn't seem to work as well. I tried using the statement in the data section of the AJAX call, an if/else statement that each had their own AJAX calls in it, and I tried to make the if statement into an variable to pass into the data.

If statement

if(myArray.size() > 0) {
    //Function goes here
else {
    //Function goes here
}

AJAX call that currently works for two and up values

// Agent search ajax/jQuery
function agentAJAX() {
    $('input').on('click', function() { //Pulls data based on radial input
        var myArray = [];
        var value = $(this).val();

        $(".formC input:checkbox:checked").each(function(){ 
            myArray.push($(this).val()); 
        });
        $.ajax({
            type: "POST",
            datatype: "html",
            data: {
                expertise: myArray
            },
            url: "expertise.php",
            success: function (data) {
                $("#bodyA").html(data);
            }
        });
    });
}

agentAJAX();

IF/else AJAX call

// Agent search ajax/jQuery
function agentAJAX() {
    $('input').on('click', function() { //Pulls data based on radial input
        var myArray = [];
        var value = $(this).val();

        $(".formC input:checkbox:checked").each(function(){ 
            myArray.push($(this).val()); 
        });
        if(myArray.size() > 1) {
            $.ajax({
                type: "POST",
                datatype: "html",
                data: {
                    expertise: myArray
                },
                url: "expertise.php",
                success: function (data) {
                    $("#bodyA").html(data);
                }
            });
        }
        else {
            $.ajax({
                type: "POST",
                datatype: "html",
                data: {
                    expertise: value
                },
                url: "expertise.php",
                success: function (data) {
                    $("#bodyA").html(data);
                }
            });
        }
    });
}

agentAJAX();

If you need more info or code then just let me know and I'll upload it after lunch.

ANSWER

// Agent search ajax/jQuery
function agentAJAX() {
    $('input').on('click', function() { //Pulls data based on radial input
        var myArray = [];
        var value = $(this).val();

        $(".formC input:checkbox:checked").each(function(){ 
            myArray.push($(this).val()); 
        });
        if(myArray.length === 1) {
            $.ajax({
                type: "POST",
                datatype: "html",
                data: {
                    expertise: value
                },
                url: "expertise.php",
                success: function (data) {
                    $("#bodyA").html(data);
                }
            });
        }
        else {
            $.ajax({
                type: "POST",
                datatype: "html",
                data: {
                    expertise: myArray
                },
                url: "expertise.php",
                success: function (data) {
                    $("#bodyA").html(data);
                }
            });
        }
    });
}

agentAJAX();

Kishore · Accepted Answer · 2013-10-09T17:54:16.433

1

There is nothing like

myArray.size()

instead you have to use

myArray.length

so your if statement should be

if(myArray.length > 1) {


}

/correction/

since you are checking if array value === 1 your condition should be .length === 1

so something like this

 if( myArray.length === 1) {


    } else {

}

You must also consider cleaning up your code. just use a function and pass data as a param and you can just use one $.ajax method instead of duplicating.

edited Oct 09 '13 at 17:54

answered Oct 09 '13 at 17:47

Kishore

1,914
1
15
22

Should it be myArray.length > 0 or myArray.length > 1? I know of the .length but in another stackoverflow the correct answer was pertaining to a .size so I figured I would give it a try. I'll let you know if it works! – Josh Powell Oct 09 '13 at 17:49
it should actually be ==1 because if it is 1 then you are passing different data – Kishore Oct 09 '13 at 17:51
Fantastic! Thank you so much, if you don't mind, when would you use http://api.jquery.com/size/? – Josh Powell Oct 09 '13 at 18:00
`.size()` and `.length` are equivalent - but remember that the former is a jQuery method, while the latter is native to JavaScript. [More discussion here](http://stackoverflow.com/questions/14202601/array-size-vs-array-length). – Terry Oct 09 '13 at 18:04
if you want to use size() you can do something like this $(myArray).size(). you will have to wrap it with $(). this internally uses .length aswell so you are better of just using .length because .size() will be slower. – Kishore Oct 09 '13 at 18:08

Array of check boxes ignoring the AJAX call if only one is checked

1 Answers1