Using jQuery to dynamically add to a list

Question

I have a list which has a picture of a piece of food and then the name, would it be possible using javascript / jquery to allow the user to upload a picture and name and add that the list? I can dynamically add text to form elements but havent worked this out. Here is my code

HTML

<ul id="list">
        <p>
        <li><img src="products/apple.png" width="30" height="30" align="absmiddle"/> <a href="#/Apple/">Apple</a></li>
        <li><img src="products/Banana.png" width="30" height="30" align="absmiddle"/> <a href="#/Squash/">Banana</a></li>
        <li><img src="products/BlackBerry.png" width="30" height="30" align="absmiddle"/> <a href="#/Broccoli/">BlackBerry</a></li>
        <li><img src="products/cherries.png" width="30" height="30" align="absmiddle"/> <a href="#/Carrot/">Cherries</a></li>
        <li><img src="products/coconut.png" width="30" height="30" align="absmiddle"/> <a href="#/Celery/">Coconut</a></li>
        <li><img src="products/grapes.png" width="30" height="30" align="absmiddle"/> <a href="#/Lettuce/">Grapes</a></li>
        <li><img src="products/kiwi.png" width="30" height="30" align="absmiddle"/> <a href="#/Mushroom/">Kiwi</a></li>
        <li><img src="products/lemon.png" width="30" height="30" align="absmiddle"/> <a href="#/Onion/">Lemon</a></li>
        <li><img src="products/lime.png" width="30" height="30" align="absmiddle"/> <a href="#/Potato/">Lime</a></li>
        <li><img src="products/Orange.png" width="30" height="30" align="absmiddle"/> <a href="#/Pumpkin/">Orange</a></li>
        <li><img src="products/peach.png" width="30" height="30" align="absmiddle"/> <a href="#/Radish/">Peach</a></li>
        <li><img src="products/Strawberry.png" width="30" height="30" align="absmiddle"/> <a href="#/strawberry/">Strawberry</a></li>
        <li><img src="products/Watermelon.png" width="30" height="30" align="absmiddle"/> <a href="#/SugarSnaps/">Watermelon</a></li>

        <input type="text" id="New_ingredient_1" name="New_ingredient[]" value="" placeholder="add Ingredient"/>

        </p>
    </ul>

I use this jquery for my other form elements but obviously it doesnt work on my list and picture.

$(document).ready(function() {
    var addDiv2 = $('#list');
    var i = $('#list p').size() + 1;

   $('#list').on('click', function () {
    $('<p> <input id="New_ingredient_' + i + '" size="40" name="New_ingredient[]' + '" type=text" value="" placeholder="Ingredient" /><input id="quantity_' + i + '" size="40" name="quantity[]' + '" type=text" value="" placeholder="Quantity" /><a href=#" class="remNew2"> Remove </a> </p> ').appendTo(addDiv2);
    i++;
    return false;

    });

    $(document).on('click', '.remNew2', function () {
        if (i > 1) {

            $(this).parents('p').remove();
            i--;
        }
        return false;
    });

});

Uploading an image to your server will require some server side code. — Gaurav, Dec 10 '13 at 20:24
use input type file for browse functionality. That should return a url that you can work with. — Matt Bodily, Dec 10 '13 at 20:39

score 1 · Accepted Answer · edited May 23 '17 at 11:57

As Matt points out you need serverside code for uploading images, that said, if possible you can use a form that implements the enctype="multipart/form-data" and the use a ajax call to upload the image

more information about the upload can be found here: jQuery Ajax File Upload

I have implemented it successfuly with this (AJAX IFRAME METHOD (AIM)): http://www.webtoolkit.info/ajax-file-upload.html

when the upload is done you will add the information to your list.

Using jQuery to dynamically add to a list

1 Answers1