CODEWITHSUNDEEP
jqueryhtml
Jeremy
Jeremy

Reputation: 1972

Issue getting selected radio value on dynamically built radios

I am dynamically building radio buttons (recipeItem's) from data returned with JSON. I then append the recipeItem to the recipe cage. This part works perfectly.

I also add a div to the vendorCage to assign vendors to the recipeItem. So far so good. No issue.

I have a button that adds a vendor to the selected recipe's vendorCage. This is where the issue is. The first time I select a recipeItem and then click the button, it works as expected. It adds a vendor to the proper vendorCage. The issue is every time after that, when I check the recipe, it's always the first recipe's value.

So my question is: Am I having this problem because I am creating these on the fly or am I just simply missing something?

The code for getting the selected recipeItem

var recipe = $('input:radio[name="recipe_item"]').val();

The code used to build the recipeItems

var $recipeItemsCage = $('#recipe-items-cage');
$.each(response.data['items'], function (key, value) {
    var recipeItem = $("<label />", {
        html: $('<input />', {
            type: "radio",
            name: "recipe_item",
            class: "recipe-item",
            value: key
        })
    }).append(key + ' - ' + value);
    $recipeItemsCage.append($('<li></li>', {
        html: recipeItem
    }));
    // Add recipe item vendor cage
    $vendorCage.append(
    $('<div></div>', {
        id: 'recipe-vendors-cage-' + key
    }));
});

Upvotes: 0

Views: 74

Answers (1)

Jeremy
Jeremy

Reputation: 1972

The fix was to do this:

var recipe = $('input:radio[name="recipe_item"]:checked').val();

Upvotes: 1

Related Questions