Dynamically adding form fields until a certain value is entered in the form field

Question

I need a group of form fields to dynamically be added if a user does not enter the minimum required value.

So I need 3 years living history for a residential address. When a user enters the information on how long they have live in the house, if they have not lived in it for minimum 3 years. The same field group will be duplicated and entered below, allowing the person to enter their previous address. This will continue until minimum 3 years of history has been entered.

The html looks like this

<!-- Current address-->
<div class="form-group">
    <div class="row">
            <label class="col-md-4 control-label">Current Home Address</label>
            <div class="col-sm-2">We need 3 years living history. Keep adding previous home addresses until you reach a minimum of 3 years history.</div>
            <div class="col-sm-2"><input id="about_you_address-st[]" name="about_you_address-st[]" type="text" class="form-control input-md" placeholder="Street # and Name"></div>  
        <div class="col-sm-1"><input id="about_you_address-sub[]" name="about_you_address-sub[]" type="text" class="form-control input-md" placeholder="Suburb"></div>
        <div class="col-sm-1"><input id="about_you_address-city[]" name="about_you_address-city[]" type="text" class="form-control input-md" placeholder="City"></div>
    </div>
    <br>
    <div class="row">
        <label class="col-md-4 control-label"></label>
        <div class=" col-SM-offset-3 col-sm-1"><input id="about_you_address-state[]" name="about_you_address-state[]" type="text" class="form-control input-md" placeholder="State"></div>
        <div class="col-sm-1"><input id="about_you_address-post[]" name="about_you_address-post[]" type="text" class="form-control input-md" placeholder="Postcode"></div>
        <div class="col-sm-1">
            <input type="text" class="form-control" id="about_you_address-duration[]" name="about_you_address-duration[]" placeholder="DD/MM/YYYY"
            data-fv-date="true"
            data-fv-date-format="DD/MM/YYYY"
            data-fv-date-message="The value is not a valid date" /><div class="help">Date moved in</div>
        </div>
        <div class="col-sm-1">
            <button type="button" class="btn btn-default addButton1"><i class="fa fa-plus"></i></button>
        </div>
    </div>
</div>

<!-- The hidden Current address template containing the Current address fields and a Remove button, this gets added when a user clicks "add" on the form group above -->
<div class="form-group hide" id="homeTemplate">
    <div class="row">
        <label class="col-md-4 control-label">Previous Address</label>
        <div class=" col-SM-offset-2 col-sm-2"><input id="about_you_address-st[]" name="about_you_address-st[]" type="text" class="form-control input-md" placeholder="Street # and Name"></div>
        <div class="col-sm-1"><input id="about_you_address-sub[]" name="about_you_address-sub[]" type="text" class="form-control input-md" placeholder="Suburb"></div>
        <div class="col-sm-1"><input id="about_you_address-city[]" name="about_you_address-city[]" type="text" class="form-control input-md" placeholder="City"></div>
    </div>
    <br>
    <div class="row">
        <label class="col-md-4 control-label"></label>
        <div class=" col-SM-offset-3 col-sm-1"><input id="about_you_address-state[]" name="about_you_address-state[]" type="text" class="form-control input-md" placeholder="State"></div>
        <div class="col-sm-1"><input id="about_you_address-post[]" name="about_you_address-post[]" type="text" class="form-control input-md" placeholder="Postcode"></div>
        <div class="col-sm-1">
            <input type="text" class="form-control" id="about_you_address-duration[]" name="about_you_address-duration[]" placeholder="DD/MM/YYYY"
            data-fv-date="true"
            data-fv-date-format="DD/MM/YYYY"
            data-fv-date-message="The value is not a valid date" /><div class="help">Date moved in</div>
        </div>
        <div class="col-sm-1">
            <button type="button" class="btn btn-default removeButton1"><i class="fa fa-minus"></i></button>
        </div>
    </div>
</div>

The javascript which currently handles dynamically adding and removing the form group manually looks like this

$(document).ready(function() {
// The maximum number of options
var MAX_OPTIONS = 20;

$('#custom')
    .formValidation()

    // Add button click handler
    .on('click', '.addButton1', function() {
        var $template = $('#homeTemplate'),
            $clone    = $template
                            .clone()
                            .removeClass('hide')
                            .removeAttr('id')
                            .insertBefore($template),
            $about_st   = $clone.find('[name="about_you_address-st[]"]')
            $about_sub   = $clone.find('[name="about_you_address-sub[]"]')
            $about_city   = $clone.find('[name="about_you_address-city[]"]')
            $about_state   = $clone.find('[name="about_you_address-state[]"]')
            $about_post   = $clone.find('[name="about_you_address-post[]"]')
            $about_dur   = $clone.find('[name="about_you_address-duration[]"]');



        // Add new field
        $('#custom')
            .formValidation('addField', $about_st)
            .formValidation('addField', $about_sub)
            .formValidation('addField', $about_city)
            .formValidation('addField', $about_state)
            .formValidation('addField', $about_post)
            .formValidation('addField', $about_dur);

    })

    // Remove button click handler
    .on('click', '.removeButton1', function() {
        var $row    = $(this).parents('.form-group'),
            $about_st   = $row.find('[name="about_you_address-st[]"]')
            $about_sub   = $row.find('[name="about_you_address-sub[]"]')
            $about_city   = $row.find('[name="about_you_address-city[]"]')
            $about_state   = $row.find('[name="about_you_address-state[]"]')
            $about_post   = $row.find('[name="about_you_address-post[]"]')
            $about_dur   = $row.find('[name="about_you_address-duration[]"]');

        // Remove element containing the option
        $row.remove();

        // Remove field
        $('#custom')
            .formValidation('removeField', $about_st)
            .formValidation('removeField', $about_sub)
            .formValidation('removeField', $about_city)
            .formValidation('removeField', $about_state)
            .formValidation('removeField', $about_post)
            .formValidation('removeField', $about_dur);
    })

    // Called after adding new field
    .on('added.field.fv', function(e, data) {
        // data.field   --> The field name
        // data.element --> The new field element
        // data.options --> The new field options

        if (data.field === 'about_you_address-st[]') {
            if ($('#custom').find(':visible[name="about_you_address-st[]"]').length >= MAX_OPTIONS) {
                $('#custom').find('.addButton1').attr('disabled', 'disabled');
            }
        }
    })

    // Called after removing the field
    .on('removed.field.fv', function(e, data) {
       if (data.field === 'about_you_address-st[]') {
            if ($('#custom').find(':visible[name="about_you_address-st[]"]').length < MAX_OPTIONS) {
                $('#custom').find('.addButton1').removeAttr('disabled');
            }
        }
    });
 });

Thank you so much.

What's not working? What have you tried? Here's a handy link on asking questions on SO: http://stackoverflow.com/help/how-to-ask — disinfor, Jul 15 '15 at 01:08
Yes and do you have an actual question? You know those things that look like a statement except that they have a question mark on the end? — JK., Jul 15 '15 at 01:54
im sorry, yes my question is how do I code the following. When a user enters the information on how long they have live in the house, if they have not lived in it for minimum 3 years. The same field group will be duplicated and entered below, allowing the person to enter their previous address. This will continue until minimum 3 years of history has been entered. — Kosta Andonovski, Jul 16 '15 at 01:45

score 0 · Accepted Answer · edited May 23 '17 at 12:14

For starters you have id's with [] in them eg 'about_you_address-duration[]'. You can't do that. It's not unique

Add some javascript

function checkTimeTotal()
{
    // Calculate total times
    totalDays = 0;

    lastDate = new Date.now();
    $('[name="about_you_address-duration[]"]').each(function() {
        // get days between now and last date
        thisDate = $(this).val(); // Turn this into a date

        totalDays += (difference between 2 dates);

        lastDate = thisDate;
    });

    if (totalDays < (3 * 365)) {
        // Add more options using your other code
    }
}

// Need to call this again when you add the new form elements in the above code
$('[name="about_you_address-duration[]"]').off('change').on('change', checkTimeTotal());

Get difference between 2 dates in javascript? - this will get the days between 2 dates

Dynamically adding form fields until a certain value is entered in the form field

1 Answers1