1

About a year ago I created a script (with help from StackOverflow) that duplicates a form using clone. The script does what it needs to do, but after using it for a while i found some things that should be different. The problem is, that with my very limited knowledge of both javascript and jQuery, it seems too hard.

The script:

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('.startdatum').removeClass('hasDatepicker').datepicker({
    dateFormat: 'dd-mm-yy',
    constrainInput: false
});


$("input[type='button'].AddRow").live('click',
function() {
    var index = $(this).closest('div').index();
    if (index > 0) {
        $(this).closest('div').remove();
    } else {


        var $tr = $(this).closest('div').clone(true);
        $tr.find('input.AddRow').val("Delete");
        var $input = $tr.find('input.startdatum');
        var index = $('input#counter').val();
        var id = 'datepicker' + index;
        index++;
        $('input#counter').val(index);
        $input.attr('id', id).data('index', index);
        //console.log(index);
        $(this).closest('span').append($tr);
        $('.startdatum').each(function() {
            $(this).datepicker('destroy');
            $(this).datepicker({
                dateFormat: 'dd-mm-yy',
                constrainInput: false
            });
        });

    }

});
});//]]>  

</script>

Questions

  1. The script now clones the form including all filled fields. I read http://api.jquery.com/clone/ but i can't figure out how to copy the empty fields.

  2. The initial form has a form button to add another form. Each cloned form has a button to delete the specific form. I would like to have both in each and every form (except for delete in the initial form, that should stay as it is).

  3. Most important, I am using a script to check if all fields are filled and valid. A clone button shouldn't appear untill all fields are filled.

    $(document).ready(function() { 
    // Wanneer het formulier verstuurd wordt
$("#theform").submit(function(){    
isValid = true;

// Valideer Aanhef
var aanhef = $('input[name=aanhef]:checked').val();
if(aanhef != 'v' && aanhef != 'm')
{
    isValid = false;
    $('#msg_aanhef').html('Vul uw aanhef in.').show();
    $('#aanhef').addClass("fout");
}
else
{
    $('#msg_aanhef').html('').hide();
}
    // Etc.
mat
  • 1,619
  • 1
  • 15
  • 25
  • 1
    I reccomend you have a look at Knockout.JS if you have the option... it will allow you to create just as many forms as you need from a template, and even has a binding that will ensure unique names for your elements. – beyond-code Nov 29 '12 at 15:01
  • If it's possible it would be great using the scripts i have, but i appreciate your help and I am going to check Knockout.JS out! – mat Nov 29 '12 at 15:12
  • I am playing with the script. It looks pretty good, however i already ran into a small problem: http://stackoverflow.com/questions/13629910/jquery-ui-datepicker-with-knockout-js – mat Nov 29 '12 at 16:12

0 Answers0