jQuery .each() on a DOM object not letting me change each's value

I have in a DIV w/ ID="#invisible" containing lots of backed up form values in inputs sharing class named"backup".

Also related table IDs for elements in the form, (say customer_id for a dropdown showing customer name), using class='other_table_ids".
Their names and IDs are the field name.  (e.g.:  customer_id).

For these, which are changed on a dropdown change, I keep their original as-loaded form values in inputs with class='otid_orig".
These have names and IDs like "otid_orig_"+customer_id.

After an update or insert I want to change the value of the as-loaded IDs to what they currently are (as stored in inputs w/ class='other_table_ids'.

The code below just does not change the values.  I'm including two methods I've tried.
Can one not change the value of an element in its .each() function?
        var otid_name =  $(this).attr('name') ;
        var name = otid_name.substr(10) ;
        var curr_value = $('#'+name).val() ;  alert('otid name='+otid_name+'   other_table_ids name='+name+'.  that guys value='+curr_value ) ;
        $(this).val(curr_value) ;
        // also tried:  $('#invisible #'+name).val(curr_value) ;
      }) ;

Open in new window

Who is Participating?

Improve company productivity with a Business Account.Sign Up

Kim WalkerConnect With a Mentor Web Programmer/TechnicianCommented:
No, there's no reason why it wouldn't let you change it's own value. I need to see some HTML in order to understand all that's going on here. Can you post a link to a live page to see what's going on?

1. Is your alert giving you all the correct information?

2. Is it your intention to update your hidden "original" values to the changed values? Or vice-versa? This code is targeting the original values?

// also tried:  $('#invisible #'+name).val(curr_value) ;
3. The above "also tried" would target the updated value, not the original. Have you tried?
// also tried:  $('#invisible #'+otid_name).val(curr_value) ;

Open in new window


Open in new window

Kim WalkerWeb Programmer/TechnicianCommented:
The first character in a string is at position 0. So an offset of 10 starts after the eleventh character. Try changing the substring offset to 9.

On a side note, placing the original value input elements in a hidden div is overkill in my opinion. I would use type=hidden on the input elements.

An alternate method of doing this in HTML 5 is to store the original value in a data attribute of the input element instead of in a separate element. For example:
<input type="text" name="customer_id" value="new value" data-original="original value">

Open in new window

Then the jquery to return to the original value would be something like
            $(this).val($(this).data('original') );
      }) ;

Open in new window

RalphAuthor Commented:
Hi Kim,

The names of the as-loaded Fkeys are like "otid_orig_customer_id", so position 10 on is "customer_id".

That's working and I getting the values for that input element, but the as-loaded input element is just not being set!

I like the data-original approach a lot, but changing directions now is not doable; too much work.
Between the worst case form with almost 30 elements, the 4 fkeys (+4 more as-loaded values), the potentially 7 fields 'sought-with' values (used to restore form to what it was when a search fails), and a couple other housekeeping inputs (button disabled state to return to), and maybe more...  there's just too much.

Is there an intended 'you cannot do that' functionality for .each(), not letting its own value to be changed?

Thanks again,
RalphAuthor Commented:
Hi Kim,

Something else must have been going on; suddenly it's working.
Javascript mystery strikes again.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.