Как можно изменить текущую функцию, чтобы при определенном значении создавался новый объект?

Как можно изменить код, чтобы при заполнении значения в поле "Relation" (когда значение пустое) также создавался объект, а не только при заполнении поля "FirstName"? Вот мой текущий код: https://jsfiddle.net/s3eftpo5/8/
  • 12 января 2024 г. 13:18
Ответы на вопрос 1
Для того чтобы объект создавался не только при заполнении поля "FirstName", но и при заполнении поля "Relation", вы можете изменить ваш JavaScript-код, добавив дополнительную логику проверки значения поля "Relation". В вашем случае, вам нужно убедиться, что и "FirstName", и "Relation" не являются пустыми строками перед тем как создать объект.

Ваш обновленный код может выглядеть примерно так:

```javascript
$(document).ready(function() {
    var max_fields = 10;
    var wrapper = $(".container1");
    var add_button = $(".add_form_field");
    
    var x = 1;
    $(add_button).click(function(e) {
        e.preventDefault();
        if(x < max_fields) {
            x++;
            $(wrapper).append('<div><input type="text" name="mytext[]"/><button class="delete">Delete</button></div>'); // добавить новое поле ввода
        } else {
            alert('You Reached the limits');
        }
    });
    
    $(wrapper).on("click", ".delete", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    });

    // Отслеживаем изменение значения в полях FirstName и Relation
    $(".container1").on("change", "input[name='mytext[]']", function() {
        var firstNameValue = false;
        var relationValue = false;
        
        // Цикл по всем полям ввода, чтобы проверить, есть ли заполненные значения
        $("input[name='mytext[]']").each(function() {
            var inputValue = $(this).val();
            if (inputValue !== '') {
                if (!firstNameValue) {
                    // если мы находим непустое значение и firstNameValue еще не установлено
                    firstNameValue = inputValue;
                } else if (!relationValue) {
                    // если мы находим второе непустое значение и relationValue еще не установлено
                    relationValue = inputValue;
                }
            }
        });
        
        // Создаем объект, если оба поля заполнены
        if (firstNameValue && relationValue) {
            var person = {
                FirstName: firstNameValue,
                Relation: relationValue
            };
            console.log(person);
            // Можете здесь добавить код для дальнейших действий с объектом `person`
        }
    });
});
```

Этот код не только создаст новый объект каждый раз, когда кто-то вводит значения в оба поля ("FirstName" и "Relation"), но и убедится, что оба поля были заполнены до создания объекта. Он подписан на событие `change` всех полей ввода с именем `mytext[]` в контейнере `.container1`, что позволяет отслеживать изменения в любом из полей ввода, а затем проверяет состояние всех полей для определения, заполнены ли необходимые поля.

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