Как я могу запустить событие, которое зависит от 2 входов формы, отвечающих определенным критериям?

Question

Я хочу показать / скрыть элементы на странице в зависимости от того, совпадают ли 2 ввода формы.Таким образом, в этом примере, если текстовое поле больше 100000 и переключатель имеет определенное значение, указанные элементы будут отображаться.Если правильное радио все еще выбрано, но числовое значение падает ниже 100000, то элементы скрываются.(Этот код является частью гораздо большего скрипта, на случай, если он не имеет смысла).

Он работает по большей части, но событие onchange / onkeyup в текстовом поле не запускаетсясам по себе при использовании с событием радио значение onclick.Я должен щелкнуть переключатель для изменения значения текстового поля, чтобы запустить событие.(И это не проблема onblur. onchange прекрасно работает самостоятельно, но не с логическим оператором &&.)

    <li id="f-container-applicant-bondamount">
        <label for="f-applicant-bondamount">Amount of Bond</label>
        <input type="text" name="ApplicantBondAmount" id="f-applicant-bondamount" onkeypress="showMoreInfo(this);" />
    </li>

    <li id="f-container-applicant-is"> 
        <label for="f-applicant-is">Applicant is...</label> 
            <ul>
                <li>
                    <label for="f-applicant-is_0">
                    <input type="radio" name="ApplicantIs" id="f-applicant-is_0" value="Administrator" onclick="showMoreInfo(this);" />
                    Administrator
                    </label>
                </li>
                <li>
                    <label for="f-applicant-is_1">
                    <input type="radio" name="ApplicantIs" id="f-applicant-is_1" value="Executor" onclick="showMoreInfo(this);" />
                    Executor
                    </label>
                </li>
            </ul>
        </label>
    </li>

    <li id="f-container-applicant-moreinfo">
        <label for="f-applicant-moreinfo">More Info</label>
        <input type="text" name="ApplicantMoreInfo" id="f-applicant-moreinfo" />
    </li>




function showMoreInfo(x) {
    var bond = document.getElementById('f-applicant-bondamount');
    var y = bond.value;

    if (y > 100000 && x.value == "Administrator")  {
        document.getElementById('f-container-applicant-moreinfo').style.display = 'block';      
    }
    else if (y <= 100000 && x.value == "Administrator") {
        document.getElementById('f-container-applicant-moreinfo').style.display = 'none';
    }
}

Заранее спасибо.

Answer 1

EDIT: Ваш код не работает, потому что функция showMoreInfo(x) предполагает, что параметр x будет ссылкой на одну или другую из переключателей, но затем событие onchange / onkeyup / любого ввода вашего текста вызывает ту же функцию и передает ее ссылка на себя - вот почему она работает только при нажатии переключателей. Вместо этого вы можете попробовать что-то вроде следующего, позволяя функции обрабатывать свои собственные ссылки на ваши HTML-элементы вместо того, чтобы передавать их:

function showMoreInfo() {
   var bond = document.getElementById('f-applicant-bondamount');
   var adminRadio = document.getElementById('f-applicant-is_0');
   // var theOtherRadioIfYouNeedIt = document.getElementById('f-applicant-is_1');

   var y = bond.value;

   if (y > 100000 && adminRadio.checked) {
      document.getElementById('f-container-applicant-moreinfo').style.display = 'block';
   }
   else if (y <= 100000 && adminRadio.checked) {
      document.getElementById('f-container-applicant-moreinfo').style.display = 'none';
   }
}

Мое первоначальное мнение о неадекватности событий на клавиатуре все еще остается верным.

Мой оригинальный ответ:

Как сказал Уомблтон, onchange происходит только тогда, когда фокус покидает поле - вот почему в вашем примере нажатие переключателя заставляет onchange произойти. Итак, как уже было сказано, вы можете использовать onkeyup вместо onchange.

Но , помните, что есть несколько способов, которыми пользователь может изменить значение на входе без использования клавиатуры (таким образом, нет onkeyup), например, перетаскивание на вход ( перетаскивание изменит фокус, но если вы больше не используете onchange ...). Или щелкните правой кнопкой мыши контекстное меню, вставьте, вырезайте или удалите. Я не уверен, каков простейший способ их решения (мне не нужно беспокоиться, поскольку мне не нравится, когда что-то меняется на странице, когда пользователь вводит данные в поле, а мне обычно нужно только onkeyup, чтобы проверить специально для клавиши ввода), но есть события onpaste и ondrop, которые вы можете посмотреть.

Answer 2

onkeypress или onkeyup - правильные события для прослушивания изменений в поле ввода текста. onkeypress срабатывает при нажатии или удерживании, в то время как onkeyup срабатывает после отпускания клавиши

Answer 3

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

Вы можете использовать onkeyup вместо.