Как обновить поле ввода из начальной загрузки, если поле не пустое?

Question

Я создал форму с динамической таблицей, и когда форма заполнена, при нажатии кнопки значения из всех полей будут вставлены в одно поле с разделением запятой. Проблема в том, что я не знаю, как проверить, является ли поле пустым, если он затем вставляет данные, иначе обновите данные в этом поле ввода.

Это мой HTML-код

<table>
        <tbody>
            <tr>
                <td><input type="text" name="name"></td>
                <td><button class="remove">-</button></td>
            </tr>
            <tr>
                <td><input type="text" name="name"></td>
                <td><button class="remove">-</button></td>
            </tr>
        </tbody>
    </table>
    <button id="addRow">+ Add</button>
    <button id="getValues">Get Values</button>
    <br/><br/><br/>
    <input type="text" id="myMainPageInput" />

А это jquery

var html = '<tr><td><input type="text" name="name"></td><td><button class="remove">-</button></td></tr>';

$(function() {
    $('tbody').sortable();

    $('#addRow').click(function(){
        $('tbody').append(html);
    });

    $(document).on('click', '.remove', function() {
        $(this).parents('tr').remove();
    });

    $('#getValues').click(function(){
        var values = [];
    if ($('input[name="name"]').val().length != 0){
        $('input[name="name"]').each(function(i, elem){
            $("#myMainPageInput").val(($("#myMainPageInput").val() + ', ' + $(elem).val()).replace(/^, /, ''));
        });
     }
    });
});

Это заставляет меня дублироваться каждый раз, когда я нажимаю на кнопку.

Answer 1

Думайте об этом по-другому: поскольку вы проверяете, является ли он пустым или не пустым , и продолжаете логику в любом случае (вот как японял, поправьте меня, если я ошибаюсь), а затем просто полностью очистите поле, прежде чем заполнять его.

$('#getValues').click(function(){
    $('input[name="name"]').val('');
    var values = [];
    $('input[name="name"]').each(function(i, elem){
        $("#myMainPageInput").val(($("#myMainPageInput").val() + ', ' + $(elem).val()).replace(/^, /, ''));
    });
});