Call jQuery function for each form input

Question

I am currently using the code found at http://jsfiddle.net/NvynC/663/ and it works great except for one thing...

This code triggers the resizeInput() function shown in the fiddle...

$('input[type="text"]')
    // event handler
    .keyup(resizeInput)
    // resize on page load
    .each(resizeInput);

It triggers it when the page first loads and again on each "keyup" but I have added some additional code that updates various text fields based on values changed in other fields. I am stumped as to what the code would be to resize all fields at a given time when I need it.

The below code is not the code I am using but to simply things, if you could tell me what code would be used if I called it in the following fashion, I'll be able to figure out how to put it in my actual code....

function resize_fields()
{
    // WHAT CODE GOES HERE ????
}
resize_fields();

Update to give you a better understanding of what I am doing...

Here is the code I use... In my form...

<select name="user" id="user" onchange=update_user_fields(this.value)>
    <option></option>

Scripts...

<script>
    function update_user_fields(id)
    {
        user[id]();
    }

    user[<?php echo $user->ID; ?>] = function()
    {
        // I do a bunch of field value changes here and they work perfectly
        // ///////
        // What I do not know is how to call the resizeInput function referred to in the fiddle above
        // ///////
    }


</script>

I tried put the following code in the above section where I am missing the code but it DOES NOT WORK!

jQuery(function($) {
    $('input[type="text"]')
        // resize all
        .each(resizeInput);
});

So it turns out that I have a thick skull... The answer below was correct after all.. Here is the working code...

<select name="user" id="user" onchange=update_user_fields(this.value)>
    <option></option>

Scripts...

<script>
    function update_user_fields(id)
    {
        user[id]();
    }

    user[<?php echo $user->ID; ?>] = function()
    {
        // I do a bunch of field value changes here and they work perfectly

        // ///////
        jQuery(function($) {
            $('input[type="text"]').keyup();
        });
        // ///////

    }


</script>

charlietfl · Accepted Answer · 2014-09-06 22:44:46Z

2

Not 100% clear but it seems you want to be able to change values programatically and call the resize method at the same time.

To do this you just need to trigger the event that uses the handler after you change the value.

Example :

$('#someInput').val('some new string').keyup();

Or to do all of them at one time:

$('input[type="text"]').keyup();

This is the same as doing:

$('input[type="text"]').trigger('keyup');

answered Sep 6, 2014 at 22:44

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

G-J Over a year ago

I am not looking to edit field values but rather resize the fields themselves. See the fiddle. Just not sure how to call the resize function at the specific time I need it. Not as simple as resizeInput();

charlietfl Over a year ago

you still just need to trigger the event that the resize handler is bound to. My answer is still the same using 2nd or 3rd code blocks shown

G-J Over a year ago

Forgive my ignorance but what will that do? Will it simulate a "keyup" in each field? As you can see in the fiddle, the called function uses $(this).attr('size', $(this).val().length); Each field gets resized individually. The reason I ask is that I have been unable to get your code to work.

Collectives™ on Stack Overflow

Call jQuery function for each form input

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related