Add inputs in jquery, but without deleting existing ones

Asked

Viewed 689 times

4

I now have the following code in jquery to add inputs according to the existing number in a text box,

However, if the form already exists for some field when clicking to add another one, all fields and their contents are deleted and new blank field is inserted,

It is possible when for example, the text box is in 5 and with the content filled I by clicking to add only one more or is a total 6 it just add and not delete those that already exist, and if you want to remove one it just delete the last entry?

Follow the code I have at the moment

$(document).ready(function() {
    var $txtQuantidade = $('#txtQuantidade');
    var $btnAdicionar = $('#btnAdicionar');
    var $divForm = $('#divForm');

    $btnAdicionar.on('click', function() {
        var qtde = $txtQuantidade.val();
        console.log(qtde);
        var html = '';

        for (var i = 0; i < qtde; i++) {
            html += '<div>';
            html += '<input type="date" id="txtData_' + i + '" name="data[]">';
            html += '<input type="time" id="txtHoraIni_' + i + '" name="hinicio[]">'
            html += '<input type="time" id="txtHoraFim_' + i + '" name="hfim[]">';
            html += '<div>';
        }

        $divForm.html(html);
    });
});

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtQuantidade" />
<input type="button" id="btnAdicionar" value="Adicionar" />
<div id="divForm"></div>
jquery codeigniter form
  • 2

    The method .html() overwrite everything in the object context. Use the method .append().

  • 2

    Recommended reading http://www.linhadecodigo.com.br/artigo/3499/trabando-insercao-de-conteudo-com-jquery.aspx

2 answers

5


Utilize append instead of html

$divForm.append(html);

The append is used to add elements or text at the end of the target content.

If you want to do otherwise, that is, put at the beginning of the target element, use the function prepend.

  • now I only have one problem, let’s imagine that I have a box already filled, but when I add one more it will add me two text boxes, but I actually wanted in total only 2 (the one that already existed and a new one), I probably need to know how many inputs already exist and in my cycle just add this relation, you can tell me how I know the number of inputs that exist?

  • Ask another question in this case. I’ll help you

  • I just added, thank you

4

Good morning Friend, in jQuery has the following functions

html() - $divForm.html('......'): this function overwrites all content inside the element and inserts the content passed in the parameter.

append() - $divForm.append('......'): this function adds the content passed as parameter after the element that is present inside the div or other element captured in the selector.

prepend() - $divForm.prepend('......'): this function adds the content passed as parameter at the beginning of the div or other element captured in the selector.

Has the function appendTo() also inserting elements inside a selector, but in a reverse way to the append(), example $('........').appendTo($divForm);

Browser other questions tagged jquery codeigniter form

You are not signed in. Login or sign up in order to post.