Solved

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

Posted on 2016-08-04
4
74 Views
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?
$('.otid_orig').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

0
Comment
Question by:Ralph
  • 2
  • 2
4 Comments
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
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
$('.otid_orig').each(function()
      {
            $(this).val($(this).data('original') );
      }) ;

Open in new window

0
 

Author Comment

by:Ralph
Comment Utility
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!
Frustrating.

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,
Ralph
0
 
LVL 21

Accepted Solution

by:
Kim Walker earned 500 total points
Comment Utility
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?

Questions
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

or
$('[name='+otid_name+']').val(curr_value);

Open in new window

0
 

Author Closing Comment

by:Ralph
Comment Utility
Hi Kim,

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

Thanks,
Ralph
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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…

771 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now