删除jQuery时清除输入字段

时间:2018-04-17 12:17:06

标签: javascript jquery html html5

我正在使用表单,我有删除功能。它工作正常,但我希望删除功能触发时字段值清除。因为我也将输入值发送到我的PHP脚本。 这是html

<div class="form-group">
<div class="col-xs-12 col-sm-6 childname">
  <div class="field text-left">
      <label class="text-left">Child name</label>
      <input class="thevoornaam character" name="voorname[]" type="text" placeholder="Voornaam"/>
  </div>
</div>
<div class="col-xs-12 col-sm-6 dateofbirth">        
  <div class="field text-left">
      <label class="text-left">Date of birth</label>
      <input type="text" class="date" name="date[]" placeholder="DD / MM / JJJJ" onkeyup="showHint(this.value,'stepname')" />
      <!-- <input type="text" size="50" id="URL" onchange="getDoB(this.value)"/> -->
  </div>
</div>
</div>
<a class="delete removeButton" href="#" onmouseup="showHint('close','stepname');"><i class="fa fa-times"></i></a>

这是我的js代码

(document).ready(function(){

$('#taskForm')
    .bootstrapValidator({
        framework: 'bootstrap',
        fields: {
            'task[]': {
                // The task is placed inside a .col-xs-6 element
                row: '.col-xs-6',
                validators: {
                    notEmpty: {
                        message: 'The task is required'
                    }
                }
            },
            'date[]': {
                // The due date is placed inside a .col-xs-6 element
                row: '.col-xs-6',
                validators: {
                    date: {
                        format: 'DD/MM/YYYY'
                        // message: 'Fill valid date of birth'
                    }
                }
            }
        }
    })
    .on('added.field.fv', function(e, data) {
        if (data.field === 'date[]') {
            // The new due date field is just added
            // Create a new date picker
            data.element
                .parent()
                // .datepicker({
                //     format: 'dd/mm/yyyy'
                // })
                .on('changeDate', function(evt) {
                    // Revalidate the date field
                    $('#taskForm').bootstrapValidator('revalidateField', data.element);
                });
        }
    })

    // Add button click handler
    .on('click', '.addButton', function() {
        var $template = $('#taskTemplate'),
            $clone    = $template
                            .clone(true,true)
                            .removeClass('hide')
                            .removeAttr('id')
                            .insertBefore($template);
        $("#stepname").addClass("disabled")
        // Add new fields
        // Note that we DO NOT need to pass the set of validators
        // because the new field has the same name with the original one
        // which its validators are already set
        $('#taskForm')
            .bootstrapValidator('addField', $clone.find('[name="task[]"]'))
            .bootstrapValidator('addField', $clone.find('[name="date[]"]'))
    })

    // Remove button click handler
    .on('click', '.removeButton', function() {
        var $row = $(this).closest('.form-group');

        // Remove fields
        $('#taskForm')
            .bootstrapValidator('removeField', $row.find('[name="task[]"]').val(''))
            .bootstrapValidator('removeField', $row.find('[name="date[]"]').val(''));

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

});

这里我试图清除这些值,但它不起作用。任何人都可以在这帮助我正在做什么miskate?

谢谢是提前

2 个答案:

答案 0 :(得分:4)

如果您需要做的只是一个明确的领域...... 我正在用.each迭代每一个并将其值设置为空字符串

ES6

$('.delete.removeButton').click(() => {
  $('.form-group').find('input').each((i, el) => {
    $(el).val('')
  })
})

ES5

$('.delete.removeButton').click(function () {
  $('.form-group').find('input').each(function (i, el) {
    $(el).val('')
  })
})

答案 1 :(得分:2)

使用按钮代替锚标记,并在其中添加onclick =“clearInput()”:

 <input type="text" id = "clId" class="date" name="date[]" placeholder="DD / MM / JJJJ" onkeyup="showHint(this.value,'stepname')" />
 <button onclick= "clearInput()" >clear value</button>

然后在js尝试这样:

function clearInput(){
 $('#clId').val('');
}

按照这种方式行事。希望你的问题得到整理。