Add input and check input for the next few times

2008 views jquery
0

Add input and check input for the next few times for emptiness, and if one of them is empty then do not add a new input. How can you add input when you first click and check them for emptiness on the next and if one of the added inputs is empty then do not add the next one?

<label class="button">New</label>
  <div class="table-title">
    <div class="table_narrow">Name</div>
    <div class="table_narrow">Amount</div>
    <div class="table_narrow">Time</div>
</div>
<div class="table-list">
</div>

Function itself

$(".button").click(function () {
    $(".table-list").prepend('<div class="table-row">' +
        '<input class="table-list" name="Name[]" type="text">' +
        '<input class="table-list" name="Amount[]" type="number">' +
        '<input class="table-list" name="Date[]" type="date">' +
        '<label class="table-btn></label>' +
        '</div>');
});

answered question

1 Answer

0

Search all the existing inputs before prepending.

$(".button").click(function () {
    var empty_found = false;
    $(".table-list input").each(function() {
        if (this.value == "") {
            empty_found = true;
            return false;
        }
    });
    if (empty_found) {
        alert("Fill in all rows before adding another row");
    } else {
        $(".table-list").prepend('<div class="table-row">' +
            '<input class="table-list" name="Name[]" type="text">' +
            '<input class="table-list" name="Amount[]" type="number">' +
            '<input class="table-list" name="Date[]" type="date">' +
            '<label class="table-btn></label>' +
            '</div>');
    }
});

posted this

Have an answer?

JD

Please login first before posting an answer.