jQuery each running multiple times on same element

Question

When the below is run, assuming that male is checked, I expect jsonObj to look like this

0: Object
    name: "sex"
    value: "male_value"

However, it ends up looking like this.

0: Object
    name: "sex" 
    value: "male_value"
1: Object
    name: "sex" 
    value: "male_value"
2: Object
    name: "sex" 
    value: "male_value"
3: Object
    name: "sex" 
    value: "female_value"

HTML

<div id="form">
    <div id="radio_buttons">
        <input type="radio" name="sex" id="male" value="male_value">Male<br>
        <input type="radio" name="sex" id="female" value="female_value">Female
    </div>
</div>

JAVASCRIPT

function jsonAdd(name, value)
{                   
    item = {};
    item ["name"] = name;
    item ["value"] = value;

    jsonObj.push(item);
}

jsonObj = [];

$("#form input").each(function() {
    //Get Input Type
    type = $(this).attr("type");
    switch(type)
    {
        case "radio":
            if($(this).prop("checked"))
            {
                var name = $(this).attr("name");
                var value = $(this).val();
                jsonAdd(name, value);
            }
        case "checkbox":
            if($(this).prop("checked"))
                {
                    var name = $(this).attr("name");
                    var value = $(this).val();
                    jsonAdd(name, value);
                }
        default:
            var name = $(this).attr("name");
            var value = $(this).val();
            jsonAdd(name, value);
    }
});

I can seem to get it working properly if I don't use a switch statement but I don't understand why a simple switch would be causing this issue?

It looks like you have two problems. 1) You're iterating all inputs, even though you want just one value. 2) You forgot to break in your switch. To solve the first problem, one solution is to use FormData — aebabis
– aebabis, Commented Sep 29, 2014 at 22:53

Paul Roub · Accepted Answer · 2014-09-29 22:51:56Z

1

Javascript, like many C-like languages, will fall through from one case to the next if you forget to include a break (as noted here)

So:

switch(type)
{
    case "radio":
        if($(this).prop("checked"))
        {
            var name = $(this).attr("name");
            var value = $(this).val();
            jsonAdd(name, value);
        }
        break;

    case "checkbox":
        if($(this).prop("checked"))
            {
                var name = $(this).attr("name");
                var value = $(this).val();
                jsonAdd(name, value);
            }
        break;

    default:
        var name = $(this).attr("name");
        var value = $(this).val();
        jsonAdd(name, value);
        break;
 }

should sort you out.

answered Sep 29, 2014 at 22:51

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt Over a year ago

Oh lordy, how embarassing. My simple switch statement didn't work because I didn't even switch properly -_- Thank-you.

antyrat · Accepted Answer · 2014-09-29 22:51:09Z

0

You have forget to add break statements to your switch and in this case default option will run always:

case "radio":
    if($(this).prop("checked"))
    {
        var name = $(this).attr("name");
        var value = $(this).val();
        jsonAdd(name, value);
    }
    break;
case "checkbox":
....

answered Sep 29, 2014 at 22:51

antyrat

27.7k9 gold badges78 silver badges77 bronze badges

Collectives™ on Stack Overflow

jQuery each running multiple times on same element

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related