Insert input only if it does not yet exist

Question

Insert input only if it does not yet exist

Asked 9 years, 11 months ago

Viewed 255 times

2

I am working on a form with dynamically inserted fields. But I want the fields to be inserted only if they don’t exist yet. My html:

<!DOCTYPE html>
<html lang="pt-br">
<head>
   <meta charset="utf-8">
   <title>Testando</title>
</head>

<body>
    <p>Milho <input type="checkbox" class="check"> </p>
    <p>Sorgo <input type="checkbox" class="check"> </p>
    <p>Monenzina <input type="checkbox" class="check"> </p>
    <p>Calcário Calcítico <input type="checkbox" class="check"> </p>
    <p>Farelo de Soja <input type="checkbox" class="check"> </p>
    <p>Farelo de Algodão <input type="checkbox" class="check"> </p>
    <p>Aromatizante <input type="checkbox" class="check"> </p>
    <p>Farelo de Arroz <input type="checkbox" class="check"> </p>

    <button id="add-button" type="submit">Adicionar</button>

    <div id="receiver">
        <form id="form-receiver">
            <fieldset>

            </fieldset>
        </form>
    </div>
</body>

My javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $('#add-button').click(function(){
        $('.check').each(function(){
            if($(this).is(':checked')){
                $('#form-receiver fieldset').append("<p>" +$(this).parent().text()+ "<input name='" + $(this).parent().text().toLowerCase() + "'></p>")
            }
        })
    });
</script>

So the insertion works perfectly. However, it is possible for repeated fields to be added if the user decides to mark more checkboxes and click the add button. Should be added only if there are no.

I tried it this way:

$('#add-button').click(function(){
        $('.check').each(function(){
            if($(this).is(':checked')){
                if(!$('#form-receiver').has("input[name='" $(this).parent().text().toLowerCase() "']"){
                    $('#form-receiver fieldset').append("<p>" +$(this).parent().text()+ "<input name='" + $(this).parent().text().toLowerCase() + "'></p>")
                }
            }
        })
    });

But it hasn’t worked yet. Could someone help here? : D

3 answers

2

I solved your problem as follows, although I think to solve it differently.

I added to the checkbox an attibute data-add which will ensure whether the field has been inserted or not, stayed this way.

Jquery

$(function(){
    $('#add-button').click(function(){
            $('.check').each(function(){
                if($(this).is(':checked'))
                    if(!$(this).data('add')) {
                        $('#form-receiver fieldset').append("<p>" +$(this).parent().text()+ "<input name='" + $(this).parent().text().toLowerCase() + "'></p>");
                        $(this).attr('data-add', true);
                    }
            });
        });
});

You can follow the result in this DEMO

If you do not want to use attributes data- can do this way using a variable to control it.

var checked = [];

$(function(){
    $('#add-button').click(function(){
            $('.check').each(function(index){
                if($(this).is(':checked'))
                    if(!checked[index]) {
                        $('#form-receiver fieldset').append("<p>" +$(this).parent().text()+ "<input name='" + $(this).parent().text().toLowerCase() + "'></p>");
                        checked[index] = true;
                    }
            });
        });
});

You can follow the result also in this DEMO

Man!! Thanks a lot! I had not even considered this possibility! Solved my problem. Thank you very, very much! ;-)

– Pedro Vinícius

2014/07/14 at 14:12
1

Have @Pedrovinícius implement also the solution of the friend there referring to the names of the field, a great hug and good luck with the projects.

– Diego Vieira

2014/07/14 at 14:14

Browser other questions tagged javascript jquery

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

by Sergio • **133,294** points · Answer 1 · 2014-07-14T14:10:05+00:00

I would avoid using space names.
So I suggest a function to make Camelcase ^{source here}:

function camelCase(input) {
    return input.toLowerCase().replace(/[-\s](.)/g, function (match, group1) {
        return group1.toUpperCase();
    });
}

Then I could use this code:

$('#add-button').click(function () {
    $('.check').each(function () {
        if (this.checked) {
            var nome = $(this).parent().text();
            if (!$('#form-receiver').find("input[name='" + camelCase(nome) + "']").length) {
                $('#form-receiver fieldset').append("<p>" + nome + "<input name='" + camelCase(nome) + "'></p>")
            }
        }
    })
});

Example: http://jsfiddle.net/ULLD9/2/

Somehow the only relevant difference between my code and yours is that I used if (!$('#form-receiver').find( .... ).length. The length is only for precaution but the find is to search for the element inside the form. I also changed to this.checked because you don’t need jQuery to do that check.

by Fernando Leal • **9,770** points · Answer 2 · 2014-07-14T14:21:01+00:00

In fact, although there is already a good answer, the error in its solution and lack of concatenation in the check selector:

// adicionei os operadores de concatenação de string '+'
if(!$('#form-receiver').has("input[name='" + $(this).parent().text().toLowerCase() + "']")

And also the method .has() jQuery does not return a boolean, and yes the result of a selection, then you would have to check if someone returned in the selector:

$('#form-receiver fieldset').has("input[name='" + $(this).parent().text().toLowerCase().trim() + "']").length == 0

And I wouldn’t recommend creating tags name with white spaces, I would make a trim():

$(this).parent().text().toLowerCase().trim();

Track your solution in operation here.

But I still recommend using the @Diego Vieira, for being cleaner.