title: setting hidden form "value" doesn't stick with jQuery
body: <p>I have a function which passes in a jQuery object called "targetElement" which is the form field that I need to operate on. I use this function to set default values for a form after it loads. In one form I have three hidden form elements (aka, <code>&lt;input type="hidden"&gt;</code>) each one is assigned a value and two of the three work fine. The third is driving me nuts.</p>
  
  <p>Here's a code snippet within the function:</p>
  
  <pre><code>case "today":
      SetFieldValue (targetElement , Date.today().toString("yyyy-MM-dd HH:mm:ss") );
      console.log ('Setting ' + jQuery(targetElement).attr('id') + ' to "today": ' + Date.today().toString("yyyy-MM-dd HH:mm:ss") );
      break;
  </code></pre>
  
  <p>Where the SetFieldValue function is:</p>
  
  <pre><code>function SetFieldValue ( domObject, value ) {
    // as a safety function, check if a string representation of the domObject was passed in and convert it to a jQuery object if it was
    if ( jQuery.type(domObject) === "string") {
      domObject = jQuery(domObject);
    }
  
    if ( jQuery.inArray (domObject.prop('tagName').toLowerCase(),['input' , 'select' , 'textarea']) &gt;= 0 ) {
      console.log ("setting to value attribute: " + value);
      domObject.attr('value',value);
      console.log ("now set to: " + domObject.attr('value') + "(" + domObject.attr('id') + ")" );
    } else {
      console.log ("setting to html attribute");
      domObject.html( value );
    }
    return domObject;
  }
  </code></pre>
  
  <p>Here's the thing. I set a debug breakpoint directly after the call to SetFieldValue. I typed "targetElement" which clearly shows that the value HAS been set.  Yet, when I type a jQuery reference to the DOM field it shows up without the value set. Huh?</p>
  
  <p><img src="https://i.stack.imgur.com/FeCJ9.png" alt="enter image description here"></p>
  
  <p>Now there is one thing I didn't mention ... and I suspect it's important ... when I typed "targetObject" into the debugger the first thing it did was return an empty array:</p>
  
  <p><img src="https://i.stack.imgur.com/d1I2A.png" alt="enter image description here"></p>
  
  <p>Then a second or two later it expanded auto-magically into the screen shot you saw initially. Please help!</p>
  
  <h2>UPDATE</h2>
  
  <p>I really appreciate all the help so far but I suspect the real problem is hinted at by the "delay" in response to targetElement (a jQuery object). See above for more details. I have also added another interesting snapshot below. If you notice the log.console statements in the code this will make sense:</p>
  
  <p><img src="https://i.stack.imgur.com/9jOUq.png" alt="enter image description here"></p>
  
  <p>What I have attempted to do is:</p>
  
  <p>a) state what I'm going to set the value to
  b) set the value to stated intention (aka, 2012-12-02 00:00:00)
  c) check that it has been set (it has)
  d) then check again from the calling routing (this also confirms it has been set)</p>
  
  <p>On the line immediately following the last log.console (the "break" statement) I put a breakpoint and the debugger no disagrees with all the console messages. Bizzarre!</p>
  
  <h2><em>UPDATE 2</em></h2>
  
  <p>People have asked for additional context, well "code" to be precise. I am struggling to figure out a good way to give a compact module of code that will reproduce the problem so I thought maybe a short screencast demonstrating the problem would help. Here's two attempts at that:</p>
  
  <p><a href="https://vimeo.com/54816768" rel="nofollow noreferrer">screencast 1</a>
  <a href="https://vimeo.com/54818500" rel="nofollow noreferrer">screencast 2</a></p>