Andrew Vanusi Andrew Vanusi - 24 days ago 9
jQuery Question

Looping select box

I've form with date field and select box and there's and add row, once i clicked add row it'll add a new row with the same field.

the problem is , the select box doesn't working.

here's my view code :

<div class="panel panel-inverse" data-sortable-id="ui-general-1">
<div class="panel-heading">
<div class="panel-heading-btn">
<a id="add-row-btn" class="btn btn-xs btn-default"> Add new row</a>
</div>
<h4 class="panel-title">Interview Track | Form</h4>
</div>
<div class="panel-body">
<div class="interviewTrack-boxes">
<div class="row interviewTrack-content">
<?php $index = 0; ?>
{!! Form::hidden('interviewTracks['.$index.'][id]', null)!!}
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Track Date</label>
{!! Form::text('interviewTracks['.$index.'][track_date]', null, ['id' => 'remarks', 'class' => 'form-control'])!!}
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Status</label>
{!! Form::select('interviewTracks['.$index.'][status]', $interviewTrackList, null, ['id' => 'status', 'class' => 'form-control'])!!}
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Outcome</label>
{!! Form::select('interviewTracks['.$index.'][outcome]', $outcomeList, null, ['id' => 'outcome', 'class' => 'form-control'])!!}
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Remarks</label>
{!! Form::text('interviewTracks['.$index.'][remarks]', null, ['id' => 'remarks', 'class' => 'form-control'])!!}
</div>
</div>
</div>
<?php $index++; ?>
</div>
</div>
</div>
</div>


and here's my jquery to add new row so far :

var $index = parseInt($('.interviewTrack-content').last().attr('id')) + 1;
$('#add-row-btn').on('click', function(e) {

var hrEle = $('<hr>');
$('.interviewTrack-boxes').append(hrEle);
$('.interviewTrack-content:last .form-group input[type="text"]').each(function(index) {
var eleName = $(this)[0].name;
var id = parseInt($('.interviewTrack-content').last().attr('id'));
eleName.replace('['+id+']', '[1]');
$(this).attr('name', eleName.replace('['+id+']', '['+$index+']'));
});
var clone = $('.interviewTrack-content').last().clone();
clone.appendTo($('.interviewTrack-boxes'));
$('.interviewTrack-content').last().attr('id', $index);
$index++;
});


any idea ?

Answer
<div class="panel panel-inverse" data-sortable-id="ui-general-1">
<div class="panel-heading">
    <div class="panel-heading-btn">
        <a id="add-row-btn" class="btn btn-xs btn-default"> Add new row</a>
    </div>
    <h4 class="panel-title">Interview Track | Form</h4> 
</div>
<div class="panel-body">
    <div class="interviewTrack-boxes">
       <?php $index = 0; ?> 
        <div class="row interviewTrack-content" id="<?php echo $index ?>"> 
            {!! Form::hidden('interviewTracks['.$index.'][id]', null)!!}    
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="control-label">Track Date</label>
                            {!! Form::text('interviewTracks['.$index.'][track_date]', null, ['id' => 'remarks', 'class' => 'form-control'])!!}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="control-label">Status</label>
                            {!! Form::select('interviewTracks['.$index.'][status]', $interviewTrackList, null, ['id' => 'status', 'class' => 'form-control'])!!}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="control-label">Outcome</label>
                            {!! Form::select('interviewTracks['.$index.'][outcome]', $outcomeList, null, ['id' => 'outcome', 'class' => 'form-control'])!!}
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label">Remarks</label>
                            {!! Form::text('interviewTracks['.$index.'][remarks]', null, ['id' => 'remarks', 'class' => 'form-control'])!!}
                        </div>
                    </div>
                </div>
            <?php $index++; ?>
        </div>
    </div>
</div>
</div>

jquery

var $index = parseInt($('.interviewTrack-content').last().attr('id')) + 1;
$('#add-row-btn').on('click', function(e) {

    var hrEle = $('<hr>');
    $('.interviewTrack-boxes').append(hrEle);
    $('.interviewTrack-content:last .form-group input[type="text"]').each(function(index) {
        var eleName = $(this)[0].name;

        var id = parseInt($('.interviewTrack-content').last().attr('id'));
        eleName.replace('['+id+']', '[1]');
        console.log(id);
        $(this).attr('name', eleName.replace('['+id+']', '['+$index+']'));
    });
    $('.interviewTrack-content:last .form-group select[class="form-control"]').each(function(select) {
        var eleName = $(this)[0].name;
        console.log(eleName);
        var id = parseInt($('.interviewTrack-content').last().attr('id'));
        eleName.replace('['+id+']', '[1]');
        console.log(id);
        $(this).attr('name', eleName.replace('['+id+']', '['+$index+']'));
    });
    var clone = $('.interviewTrack-content').last().clone();
    clone.appendTo($('.interviewTrack-boxes'));
    $('.interviewTrack-content').last().attr('id', $index);
    $index++;
});