如果用户未输入所需的最低值，我需要动态添加一组表单字段。
所以我需要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');
}
}
});
});
非常感谢你。
答案 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个日期之间的日期