CODEWITHSUNDEEP
javascriptjqueryhtml
alex3025
alex3025

Reputation: 139

How to number items of jQuery dynamic textboxes

I'm making a dynamic text boxes form. This is the code:

$(document).ready(function() {
        counter = 1;
    }).on('click', '.btn-add', function(e) {
        e.preventDefault();
        counter = counter + 1;

        var controlForm = $('.controls'),
            currentEntry = $(this).parents('.entry:last'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);

        newEntry.find('input').val('');
        controlForm.find('.entry:not(:first) .btn-add')
            .removeClass('btn-add').addClass('btn-remove')
            .removeClass('text-success').addClass('text-danger')
            .html('-');
        currentEntry.find('.input-box')
            .attr('name', 'subject')
            .attr('placeholder', 'Materia ' + String(counter));
    }).on('click', '.btn-remove', function(e) {
        $(this).parents('.entry:last').remove();
        counter = counter - 1
        $(this).parents('.entry').each(function() {
            $(this).parents('.entry:last').attr('placeholder', 'Materia ' + String(counter));
        })

        e.preventDefault();
        return false;
    });
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="type-elements" class="controls">
    <div class="form-row entry">
        <div class="form-inline mb-3">
            <a role="button" class="btn btn-link text-success btn-add mr-1" href="">+</a>
            <input type="text" class="form-control mr-1 input-box" placeholder="Materia 1" required name="subject">
        </div>
        <div class="col">
            <select class="custom-select mb-3" required multiple size="3" name="classes">
                <option disabled>Seleziona una o più classi</option>
                <option>2DM</option>
                <option>2AM</option>
                <option>2DM</option>
                <option>2AM</option>
            </select>
        </div>
    </div>
</div>

How I can give for each text box, a dynamic number and, when I click on the plus button, add the new text box directly under the first main text box?

Upvotes: 0

Views: 34

Answers (1)

Deepu Reghunath
Deepu Reghunath

Reputation: 9663

Use prepentTo instead of appendTo

$(document).ready(function() {
        counter = 1;
    }).on('click', '.btn-add', function(e) {
        e.preventDefault();
        counter = counter + 1;

        var controlForm = $('.controls'),
            currentEntry = $(this).parents('.entry:last'),
            newEntry = $(currentEntry.clone()).prependTo(controlForm);

        newEntry.find('input').val('');
        controlForm.find('.entry:not(:first) .btn-add')
            .removeClass('btn-add').addClass('btn-remove')
            .removeClass('text-success').addClass('text-danger')
            .html('-');
        currentEntry.find('.input-box')
            .attr('name', 'subject')
            .attr('placeholder', 'Materia ' + String(counter));
    }).on('click', '.btn-remove', function(e) {
        $(this).parents('.entry:last').remove();
        counter = counter - 1
        $(this).parents('.entry').each(function() {
            $(this).parents('.entry:last').attr('placeholder', 'Materia ' + String(counter));
        })

        e.preventDefault();
        return false;
    });
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="type-elements" class="controls">
    <div class="form-row entry">
        <div class="form-inline mb-3">
            <a role="button" class="btn btn-link text-success btn-add mr-1" href="">+</a>
            <input type="text" class="form-control mr-1 input-box" placeholder="Materia 1" required name="subject">
        </div>
        <div class="col">
            <select class="custom-select mb-3" required multiple size="3" name="classes">
                <option disabled>Seleziona una o più classi</option>
                <option>2DM</option>
                <option>2AM</option>
                <option>2DM</option>
                <option>2AM</option>
            </select>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions