Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses

715 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