CODEWITHSUNDEEP
javascriptjqueryhtml
Ben Hathaway
Ben Hathaway

Reputation: 356

Attempting to print out user input using jQuery

I have a section in my system that allows users to enter ingredients and then when they click 'live preview' each ingredient is printed out in plain text so they can check spelling using jQuery. However it will only print out the first element and not the ones after. Can anyone see why? Here is the fiddle http://jsfiddle.net/X94At/

HTML

<div class="recipe-ingredients pure-u-1 pad8bottom clearfix">
                                    <span class="heading">Ingredients</span>

                                    <div class="ingredients pure-u-1 clearfix">
                                        <div class="ingredient pure-u-1 clearfix">
                                            <p>
                                            <input type="text" id="ingredient_1" name="ingredient[]" placeholder="Ingredient"  class="element pure-u-6-24" />
                                            <input type="text" id="quantity_1" name="quantity[]" value="" placeholder="Quantity"  class="element pure-u-4-24" />
                                            <select id="selectQuantity_1" name="quantityType[]"  class="element pure-u-3-24">
                                                <option value="grams">Grams</option>
                                                <option value="ounces">Ounces</option>
                                                <option value="Pounds">Pounds</option>
                                            </select>
                                            <input type="text" id="alternative_1" name="alternative[]" value="" placeholder="Alternative Ingredient"  class="element pure-u-6-24" />
                                            <input type="text" id="addedQuantiy_1" name="addedQuantity[]" value="" placeholder="Quantity per extra person"  class="element pure-u-4-24" />
                                            </p>
                                        </div>

                                    </div>
                                    <a href="javascript:void(0)" class="pure-button pure-u-1-6 pure-button-primary" id="addNewIngredient">Add Ingredient</a>

                                </div>

HTML For the Live Preview

 <div id="toPopup">
                <div class="close">&times;</div> <span class="ecs_tooltip">End Preview<span class="arrow"></span></span>
                <div id="live-preview-display">
                    <div id="lp-name"></div>
                    <div id="lp-ingredientslist">
                        <h3>Ingredients</h3>
                    </div>
                    <div id="lp-step">
                        <h3>Method</h3>
                    </div>
                </div>
            </div>
            <div class="loader"></div>
            <div id="backgroundPopup"></div>

jQuery

$(".ingredient").on('blur change focus', function () {
            $('.ingredient p').each(function () {
                var i = $('.ingredient p').size(),
                    el = $(this);
                if ($('#lp-ingredientslist .ingredient_' + i).length == 0) {
                    $("#lp-ingredientslist").append('<span class="ingredient_' + i + '"></span>');
                }
                var ingredient = el.find('input[name="ingredient[]"]').val(),
                    quantity = el.find('input[name="quantity[]"]').val(),
                    quantityType = el.find('select[name="quantityType[]"]').val(),
                    alternative = el.find('input[name="alternative[]"]').val();
                if (!quantity || !ingredient)
                    return;
                var alt = '';
                if (alternative.length >= 0) {
                    alt = ' (you can also use ' + alternative + ')';
                }
                $('#lp-ingredientslist .ingredient_' + i).html(i + '. ' + quantity + ' ' + quantityType + ' of ' + ingredient + alt + '</br></br> ');
            });
        });

jQuery to add an ingredient

$('.recipe-ingredients #addNewIngredient').on('click', function () {
            var i = $('.recipe-ingredients .ingredient').size() + 1;
            $('<div class="ingredient pure-u-1 clearfix"><input type="text" id="ingredient_' + i + '" name="ingredient[]" placeholder="Chocolate"  class="element pure-u-6-24" /><input type="text" id="quantity_' + i + '" name="quantity[]" value="" placeholder="Quantity"  class="element pure-u-4-24" /><select id="selectQuantity_1" name="quantityType[]"  class="element pure-u-3-24"><option value="grams">Grams</option><option value="ounces">Ounces</option><option value="Pounds">Pounds</option></select><input type="text" id="alternative_' + i + '" name="alternative[]" value="" placeholder="Alternative Ingredient"  class="element pure-u-6-24" /><input type="text" id="addedQuantiy_' + i + '" name="addedQuantity[]" value="" placeholder="Quantity per extra person"  class="element pure-u-4-24" /><a href="javascript:void(0)" class="remove" title="Remove">&times;</a></div>').appendTo($('.recipe-ingredients .ingredients'));

Thanks!

Upvotes: 0

Views: 134

Answers (1)

Bhavik
Bhavik

Reputation: 4904

Not perfect needs improvement Working Fiddle 

$(".ingredient").on('blur change focus', function () {

this line needs to be replaced by 

$('.ingredients').on('blur change focus', function () {

as you dynamically are adding the .ingredient class so the changes would appear at .ingredients....

Update
Fiddle with a new look Credit goes to @WASasquatch for pointing it out...

Hope it helps....!!

Upvotes: 2

Related Questions