Create input field dynamically using javascript

Question

I am using yii2 framkework and on based of input provided by user I want to create input fields. Using some online documents like this I tried to do it but the problem is my button click event is not picking up the jquery

Here is a jsfiddle for it. Not able to replicate my problem exactly but what i want is if user enters 3 in the input field than 3 field should be generated on button click.

Here is my view code

<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(); ?>

Here is the javascript i am using

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

});

So I have to generate input fields for the dates times.

Could you provide us with a minmal, failing example on jsfiddle.net? — Linus Oleander
– Linus Oleander, Commented Nov 20, 2015 at 5:03
@Oleander i have added the jsfiddle and its not exactly what problem i am having but if someone can solve that than i will do the rest — Mike Ross
– Mike Ross, Commented Nov 20, 2015 at 5:15
I'm only getting Uncaught SyntaxError: Unexpected token {. — Linus Oleander
– Linus Oleander, Commented Nov 20, 2015 at 5:26
@oleander look at this and can you please tell me how to change the label dynamically as well? like option 1 option 2 ,option 3 etc — Mike Ross
– Mike Ross, Commented Nov 20, 2015 at 5:49

Waqas Shahid · Accepted Answer · 2015-11-20 05:05:23Z

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

        });

answered Nov 20, 2015 at 5:05

Waqas Shahid

1,0501 gold badge7 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Ross Over a year ago

i want it to be created based on the inputs provided by user.

Santosh · Accepted Answer · 2015-11-20 05:16:42Z

1

might be you document is not ready when your js file will laod. replace "#form-event" with "document" make sure ".setdates" this class you will not use for other dom if you use this class this click will occur for every dom which has ".setdates" class and #setdates

$(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[]"]');

    })

answered Nov 20, 2015 at 5:16

Santosh

3812 silver badges11 bronze badges

Comments

Suyog · Accepted Answer · 2015-11-20 05:20:04Z

1

I am posting sample code which may help you. You might have to modify it according to your need to use.

The HTML

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

</div>

The 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

answered Nov 20, 2015 at 5:20

Suyog

2,4811 gold badge16 silver badges27 bronze badges

2 Comments

Mike Ross Over a year ago

that is really helpful and makes it easy but i also wants to validate those fields and for that i have to make bootstrap forms so that i can use its .formvalidation method

Suyog Over a year ago

that's why in the beginning I told 'You might have to modify it according to your need'.. :-)

Collectives™ on Stack Overflow

Create input field dynamically using javascript

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related