Question

i’m trying to add input dynamicly for this I take the actual HTML of a div then add a HTML code at the end like this :

Javascript document :

        jQuery(document).ready(function() {
          if (jQuery("#services_offerts div").length <= 0) { add_services_offerts(); }
        });
        function rem_services_offerts(DOMid) {
            var flag = jQuery("#services_offerts div").length;
            if (flag != 1) { 
                jQuery('#item-' + DOMid).remove();  
            } else { 
                jQuery('#services_offerts div').prepend('<p class="error_box">Suppression impossible.</p>');
                setTimeout(function() { jQuery(".error_box").fadeOut(500); }, 1500);
            }

            jQuery("#services_offerts div").each(function(index){
                jQuery(this).attr("id","item-"+index);
            });
        }
        function add_services_offerts(service_item) {
            if (service_item == undefined) { var service_item = ""; }

            var flag = jQuery("#services_offerts div").length;
            var new_element = jQuery("#services_offerts").html() +
                    '<div id="item-'+flag+'"><label for="courriel_usager">Service :</label>' +
                        '<input type="text" name="service_item[]" id="service_item" value="'+ service_item +'" /> ' +
                    '<ul class="list_ajout_retrait_services">' +
                        '<li><a href="javascript:void(0)" title="Ajouter un service" onclick="add_services_offerts()">+</a></li>' +
                        '<li><a href="javascript:void(0)" title="Enlever un service" onclick="rem_services_offerts('+flag+')">-</a></li>' +
                    '</ul></div>';

            jQuery("#services_offerts").html(new_element);
            return false;
        }

Html document :

<div id="services_offerts">
    <?php
        echo $service_liste; 
        /*That list the service already saved 
        with the same html dom has add_services_offerts()*/
    ?>
</div>

My problem is that when people fill the form them decide to add more input that reset the information inside of the already existing input.

Did someone have a solution for that ? Or maybe a better way of addind dynamic input ?

Thank you very much for your help !

Answer 1

Are you looking something like this http://jsfiddle.net/Nmbda/ ? I’ve reused same element to add row and reset the values on the newly created ones.