Go Premium for a chance to win a PS4. Enter to Win


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

Posted on 2016-08-04
Medium Priority
Last Modified: 2016-08-08
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

Question by:Ralph
  • 2
  • 2
LVL 22

Expert Comment

by:Kim Walker
ID: 41743703
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


Author Comment

ID: 41744801
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,
LVL 22

Accepted Solution

Kim Walker earned 2000 total points
ID: 41744926
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


Author Closing Comment

ID: 41748114
Hi Kim,

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


Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

824 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question