动态添加表单字段，直到在表单字段中输入特定值

时间：2015-07-15 00:09:21

标签： javascript jquery html css

如果用户未输入所需的最低值，我需要动态添加一组表单字段。

所以我需要3年的住宿地址。当用户输入他们住在房子里多久的信息时，如果他们没有住在这里至少3年。将复制相同的字段组并在下面输入，允许此人输入其先前的地址。这将持续到最少3年的历史记录。

html看起来像这样

<!-- 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>

当前处理动态添加和删除表单组的javascript如下所示

$(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');
            }
        }
    });
 });

非常感谢你。

1 个答案:

答案 0 :(得分：0)

对于初学者来说，你身上有[]，例如＆＃39; about_you_address-duration []＆＃39;。你不能这样做。这不是唯一的

添加一些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? - 这将获得2个日期之间的日期

相关问题
最新问题