Использование for_each для перебора входных данных формы - PullRequest
Новая
       12

Использование for_each для перебора входных данных формы

2 голосов
/ 05 мая 2019

У меня есть две формы, одна с uk_inputs и одна с international_inputs.Когда один или несколько из uk_inputs заполнены, я хочу, чтобы международные входы в другой форме были отключены.В настоящее время это работает, когда заполнен первый uk_input, но я не могу заставить его работать, но перебираю все из них с помощью for_each.Первый фрагмент кода - это то место, где он работает с первым uk_input, а второй фрагмент кода - моя попытка перебрать все из них.извинения, если это не ясно.спасибо 

$(document).ready(function() {
    var uk_input = document.querySelector(".uk_input");
    uk_input.onchange = function () {
        international_input =  document.querySelectorAll(".international_input")
        international_input.forEach(function(international) {
            international.disabled = uk_input.value
        });
    }
});

$(document).ready(function() {
    var uk_input = document.querySelectorAll(".uk_input");
    uk_input.for_each.onchange = function (uk) {
        international_input =  document.querySelectorAll(".international_input")
        uk.international_input.forEach(function(international) {
            international.disabled = uk_input.value
        });
    }
});

<%= fields.input :line_1, input_html: {class: "uk_input"} %>
<%= fields.input :line_2, input_html: {class: "uk_input"}  %>
<%= fields.input :line_3, input_html: {class: "uk_input"}  %>
<%= fields.input :town, input_html: {class: "uk_input"}  %>
<%= fields.input :county, input_html: {class: "uk_input"}  %>
<%= fields.input :postcode, input_html: {class: "uk_input"}  %>

<%= fields.input :line_1, input_html: {class: "international_input"} %>
<%= fields.input :line_2, input_html: {class: "international_input"} %>
<%= fields.input :line_3, input_html: {class: "international_input"} %>
<%= fields.input :town, label: "City / Region", input_html: {class: "international_input"} %>
<%= fields.input :postcode, label: "Postcode / ZIP Code", input_html: {class: "international_input"} %>

1 Ответ

2 голосов
/ 05 мая 2019

Синтаксис a для каждой функции:

Правильный синтаксис функции for each в JavaScript: 

let uk_inputs = document.querySelectorAll(".uk_inputs");
uk_inputs.forEach(input=>{
    input.addEventListener("click",event=>{
      //Code you want to run for every uk_inputs class input
  })
})

Кроме того, как вы можете видеть подробно в коде выше,чтобы назначить прослушиватель событий, вы должны ссылаться на элемент DOM, который вы хотите назначить этому событию.Это ванильное решение JavaScript.Это точно такой же результат, как и в случае с jQuery.

Вот функциональная скрипка. На случай, если вы захотите проверить это.

Настройки под ваш вопрос: 

$(document).ready(function() {
    let uk_inputs = document.querySelectorAll(".uk_inputs"),
        international = document.querySelectorAll(".international");

    const enabledInternational = (enabled) => {
        international.forEach(input => {
            if (enabled) {
                input.removeAttribute("disabled");
            } else {
                input.setAttribute("disabled", `${enabled}`);
            }
        })
    }

    uk_inputs.forEach(input => {
        input.addEventListener("change", event => {
            enabledInternational(event.target.value === "");
        })
    })
});
...