Fatal编程技术网
  • javascript/
  • Javascript 动态添加表单字段，直到在表单字段中输入某个值

Javascript 动态添加表单字段，直到在表单字段中输入某个值

javascript jquery html css

Javascript 动态添加表单字段，直到在表单字段中输入某个值,javascript,jquery,html,css,Javascript,Jquery,Html,Css,如果用户没有输入所需的最小值，我需要动态添加一组表单字段 所以我需要3年的居住历史才能找到一个住址。当用户输入他们在房子里住了多久的信息时，如果他们至少3年没有在房子里住过。相同的字段组将被复制并在下面输入，允许该人员输入其以前的地址。这将持续到至少3年的历史 html如下所示 <!-- Current address--> <div class="form-group"> <div class="row"> <label

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

所以我需要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>

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


当前家庭住址
我们需要3年的生活史。继续添加以前的家庭地址，直到您至少有3年的历史。


迁入日期
前地址


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

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

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

$（文档）.ready（函数（）{
//选项的最大数目
var MAX_OPTIONS=20；
$（“#自定义”）
.formValidation（）
//添加按钮单击处理程序
.on（'click'，'addButton1'，函数（）{
var$template=$（“#homeTemplate”），
$clone=$template
.clone（）
.removeClass（'hide'））
.removeAttr（'id'））
.insertBefore（$template），
$about\u st=$clone.find（'[name=“about\u you\u address-st[]”）
$about\u sub=$clone.find（'[name=“about\u you\u 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[]]”）；
//添加新字段
$（“#自定义”）
.formValidation（'addField'，$about_st）
.formValidation（'addField'，$about_sub）
.formValidation（'addField'，$about_city）
.formValidation（'addField'，$about_state）
.formValidation（'addField'，$about_post）
.formValidation（'addField'，$about_dur）；
})
//删除按钮单击处理程序
.on（'click'，'removeButton1'，函数（）{
var$row=$（this）.parents（'.form group'），
$about\u st=$row.find（'[name=“about\u you\u address-st[]”）
$about\u sub=$row.find（'[name=“about\u you\u 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[]]”）；
//删除包含选项的元素
$row.remove（）；
//删除字段
$（“#自定义”）
.formValidation（'removeField'，$about_st）
.formValidation（'removeField'，$about_sub）
.formValidation（'removeField'，$about_city）
.formValidation（'removeField'，$about_state）
.formValidation（'removeField'，$about_post）
.formValidation（'removeField'，$about_dur）；
})
//添加新字段后调用
.on（'added.field.fv'，函数（e，数据）{
//data.field-->字段名
//data.element-->新字段元素
//data.options-->新字段选项
if（data.field==='about_you_address-st[]'）{
if（$（'#custom'）.find（':visible[name=“about__address-st[]”）。length>=MAX_OPTIONS）{
$（'#custom'）.find（'.addButton1'）.attr（'disabled'，'disabled'）；
}
}
})
//删除字段后调用
.on（'removed.field.fv'，函数（e，数据）{
if（data.field==='about_you_address-st[]'）{
if（$（'#custom'）.find（':visible[name=“about__address-st[]”）。长度
非常感谢。

对于初学者，您的id中有[]，例如“about_you_address-duration[]”。你不能那样做。这不是独一无二的

添加一些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());

函数checkTimeTotal（）
{
//计算总次数
总天数=0；
lastDate=新日期。现在（）；
$（'[name=“about_you_address-duration[]]”）。每个（函数（）{
//从现在到最后一个日期之间的天数
thisDate=$（this.val（）；//将其转换为日期
总天数+=（两个日期之间的差异）；
lastDate=此日期；
});
如果（总天数<（3*365））{
//使用其他代码添加更多选项
}
}
//在上述代码中添加新表单元素时，需要再次调用此函数
$（'[name=“about_you_address-duration[]]”）。off（'change'）。on（'change'，checkTimeTotal（））；
-这将得到两个日期之间的天数

什么不起作用？你试过什么？这里有一个关于提问的便捷链接：是的，你有实际问题吗？你知道那些看起来像语句的东西，只是它们的结尾有一个问号吗？对不起，是的，我的问题是如何编写以下代码。当用户输入他们在房子里住了多久的信息时，如果他们至少3年没有在房子里住过。相同的字段组将被复制并在下面输入，允许该人员输入其以前的地址。这将持续到至少3年的历史。