jQuery targeting selector by input type and form name

Question

I want to target any input of text type belonging to a form of a specific name. Because the form will have numerous input fields, I don't want to target a particular input name, but rather, capture the blur (or focusout) event for any input[type="text"] occurring within the form wrap.

My present code, which doesn't work:

$( document ).ready(function() {
    $('form[name="tax_form"] input[type="text"]').on("blur",function() {
        alert($(this).val());
    });
});

I answered my own question. Because the code sample is essentially correct, there is no need for multiple people to try to solve the unsolvable. The problem had something to do with where I placed the javascript code, and nothing to do with structure or syntax of the code, itself.

Answer 1

The way the event "change" works is what it sounds like you want. An event handler doesn't actually fire when the input is clicked or if text is keyed in, it fires when text is entered and then the input loses focus.

In the following Snippet the same selector you are using is delegated to the "change" event. You'll notice that the ['tax_form'] has 4 text inputs yet the last one is the only one working. The reason is because if an input isn't assigned a type attribute, then by default type is 'text" . So when using a selector based on an input's type="text" , you must keep that in mind. So if you are in full control of your HTML, make sure that each input has a type attribute with an explicit value, or use classes which is better IMO.

SNIPPET

 $(document).ready(function() { $('form[name="tax_form"] input[type="text"]').on("change", function() { alert($(this).val()); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name='notIt'> <fieldset> <legend>Not a Tax Form</legend> <input> <input type="text"> <input> <input type="text"> </fieldset> </form> <br/> <br/> <form name='stillNotIt'> <fieldset> <legend>Still not a Tax Form</legend> <input type="text"> <input> <input type="text"> <input> </fieldset> </form> <br/> <br/> <form name='tax_form'> <fieldset> <legend>Tax Form</legend> <input class='klass' value='TEXT INPUT BY DEFAULT'> <input value='TEXT INPUT BY DEFAULT'> <input name='text' value='TEXT INPUT BY DEFAULT'> <input type='number'> <input type='text' value='THIS ONE COUNTS'> </fieldset> </form>

Answer 2

Previous commentators were right, that my code was fine as-is. I took my selector code out of a header script file, and placed it at the bottom of my footer script, and it worked as expected.

In the end, it wasn't my code that was the problem, but rather something to do with where I placed it. Possibly other javascript or jQuery code stepping on it.

Answer 3

Your code should work fine. Here's a working example of it to prove it's working. The tax_form fields should console.log() on blur . The another_form should not.

 $(function() { $('form[name="tax_form"] input[type="text"]').on("blur",function() { console.log($(this).val()); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>Tax Form</h1> <form name="tax_form"> <input type="text" name="first" value="first"> <input type="text" name="second" value="second"> <input type="text" name="third" value="third"> </form> <h1>Another Form</h1> <form name="another_form"> <input type="text" name="first2" value="first2"> <input type="text" name="second2" value="second2"> <input type="text" name="third2" value="third2"> </form>