How can I fire an event that depends on 2 form inputs meeting a certain criteria?

Question

I want to show/hide elements on the page depending on whether 2 form inputs match. So in this example, if a text field is greater than 100000 and a radio button has a certain value, said elements will show. If correct radio is still selected, but the numerical value drops below 100000, then elements hide. (This code is part of a much larger script, in case it doesn't make sense).

It works for the most part, but the text field's onchange/onkeyup event doesn't fire on its own when used with a radio value onclick event. I have to reclick the radio button for a changed text field value to fire the event. (And it is not an onblur issue. onchange works fine on its own, but not with a logical && operator.)

    <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';
    }
}

Thanks in advance.

Answer 1

EDIT: Your code doesn't work because the showMoreInfo(x) function assumes that the x parameter will be a reference to one or the other of the radio buttons, but then your text input's onchange/onkeyup/whatever event is calling the same function and passing in a reference to itself - this is why it only works when you click the radio buttons. You could try something like the following instead, letting the function work out its own references to your HTML elements instead of passing them in:

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';
   }
}

My original point about keyboard events being inadequate still stands though.

My original answer:

As wombleton said, onchange only happens when focus leaves the field - which is why in your example clicking on the radio button makes the onchange happen. So as has been said already you can use onkeyup instead of onchange.

But, remember that there are several ways that the user can change the value in an input without using the keyboard (thus no onkeyup), e.g., drag-and-drop onto the input (drag out will change the focus, but if you're not using onchange any more...). Or right-click-context-menu-paste, cut or delete. Off-hand I'm not sure what the simplest way to cater for these is (I haven't needed to worry since I don't like having things on the page change as the user types within a field and I generally only need onkeyup to check specifically for the enter key), but there are onpaste and ondrop events you could look into.