使用javascript動態創建輸入字段

Question

我正在使用yii2 framkework並基於用戶提供的輸入我想創建input字段。使用一些在線文檔我試圖做到這一點，但問題是我button單擊事件不拿起jquery

這裏是它的一個jsfiddle。不能完全複製我的問題，但我想要的是，如果用戶在輸入字段中輸入3時，應該在按鈕單擊時生成3字段。

這裏是我的view代碼

<div class="event-form"> 

<?php $form = ActiveForm::begin(['id'=>'form-event']); ?> 

<?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?> 

<div class="row"> 
    <div class="col-lg-4 col-sm-4 col-xs-4"> 
     <?= $form->field($model, 'start_date')->widget(
      DatePicker::className(), [ 
      'name' => 'start_date', 
      'options' => ['placeholder' => 'Select Event start date ...'], 
      'convertFormat' => true, 
      'pluginOptions' => [ 
       'orientation' => 'bottom left', 
       'format' => 'MM/dd/yyyy', 
       'startDate' => date('dd-MM-yyyy'), 
       'autoclose' => true, 
       'todayHighlight' => true 
      ] 
     ]) 
     ?> 
    </div> 
    <div class="col-lg-4 col-sm-4 col-xs-4"> 
     <?= $form->field($model, 'end_date')->widget(
      DatePicker::className(), [ 
      'name' => 'end_date', 
      'options' => ['placeholder' => 'Select Event end date...'], 
      'convertFormat' => true, 
      'pluginOptions' => [ 
       'orientation' => 'bottom left', 
       'format' => 'MM/dd/yyyy', 
       'startDate' => date('dd-MM-yyyy'), 
       'autoclose' => true, 
       'todayHighlight' => true 
      ] 
     ]) 
     ?> 
    </div> 
    <div class="col-lg-4 col-sm-4 col-xs-4"> 
     <button type="button" id="setdates" class="btn btn-default btn-set-dates">Set Dates</button> 
    </div> 
</div> 

<p></p> 

<p></p> 
<div class="form-group hide" id="optionTemplate"> 
    <div class="col-xs-offset-3 col-xs-5"> 
     <input class="form-control" type="text" name="option[]" /> 
    </div> 
</div> 

<div class="form-group"> 
    <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-danger' : 'btn btn-primary']) ?> 
</div> 

<?php ActiveForm::end(); ?> 

這裏是javascript我使用

$('#setdates').click(function() { 
startDate = new Date(document.getElementById('event-start_date').value); 
endDate = new Date(document.getElementById('event-end_date').value); 
var dates = [], 
    currentDate = startDate, 
    addDays = function(days) { 
     var date = new Date(this.valueOf()); 
     date.setDate(date.getDate() + days); 
     return date; 
    }; 
while (currentDate <= endDate) { 
    dates.push(currentDate); 
    currentDate = addDays.call(currentDate, 1); 
    } 
}); 

$(document).ready(function() { 
    var MAX_OPTIONS = 5; 
    $('#form-event') 

    .on('click', '.setdates', function() { 
     var $template = $('#optionTemplate'), 
      $clone = $template 
       .clone() 
       .removeClass('hide') 
       .removeAttr('id') 
       .insertBefore($template), 
      $option = $clone.find('[name="option[]"]'); 

    }) 
    // Called after adding new field 
    .on('added.field.fv', function(e, data) { 
     if (data.field === 'option[]') { 
      if ($('#event-form').find(':visible[name="option[]"]').length >= MAX_OPTIONS) { 
      } 
     } 
    }) 

}); 

所以我不得不產生了dates次輸入字段。

Answer 1

HTML：

<a id="add">Add More</a> 

的JavaScript：

var i = 1; 
$("#add").click(function(){ 
       var appendFields = '<tr>'; 
       appendFields += '<td><select id="dropdown_'+i+'" name="dropdown_name[]"><option value="1">One</option></select></td>'; 
       appendFields += '<td><a style="color: red; cursor: pointer;" class="remCF">Remove</a></td>'; 
       appendFields += '</tr>'; 
       $("#table_id").append(appendFields); 
       i++; 
      }); 
      $("#table_id").on('click','.remCF',function(){ 
       $(this).parent().parent().remove(); 
      }); 

     }); 

Answer 2

可能是你的文件還沒有準備好當你的js文件將LAOD。 將「＃form-event」替換爲「document」 請確保「.setdates」這個類別不會用於其他dom，如果您使用此類別，則此點擊將出現在每個有「.setdates」class和#setdates的dom

$(document).on('click','#setdates',(function() {}); 


$(document) 
    .on('click', '.setdates', function() { 
     var $template = $('#optionTemplate'), 
      $clone = $template 
       .clone() 
       .removeClass('hide') 
       .removeAttr('id') 
       .insertBefore($template), 
      $option = $clone.find('[name="option[]"]'); 

    }) 

Answer 3

我張貼示例代碼可能會幫助你。您可能需要根據自己的需要進行修改。

的HTML

<input type="text" id="numPpl" name="numPpl"> 
<br><br> 
<div id="demo"> 

</div> 

的JQuery的

<script> 
    $('#numPpl').blur(function() 
    { 
     for(i=1; i<=$('#numPpl').val(); i++) 
     { 
      $('#demo').append('<input type="text"><br><input type="text"><br><br>'); 
     } 
    }); 
</script> 

Fiddle