CODEWITHSUNDEEP
javascriptjquery
ken
ken

Reputation: 9013

setting hidden form "value" doesn't stick with jQuery

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, <input type="hidden">) each one is assigned a value and two of the three work fine. The third is driving me nuts.

Here's a code snippet within the function:

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;

Where the SetFieldValue function is:

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']) >= 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;
}

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?

enter image description here

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:

enter image description here

Then a second or two later it expanded auto-magically into the screen shot you saw initially. Please help!

UPDATE

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:

enter image description here

What I have attempted to do is:

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)

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!

UPDATE 2

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:

screencast 1 screencast 2

Upvotes: 2

Views: 412

Answers (3)

ken
ken

Reputation: 9013

I know I didn't provide enough context for people to really dig into this problem but I have in the end solved it. What was the issue? It was silly really ... isn't it always? Anyway it was just a case of the DOM element in questions 'id' not beging unique. Grrr. It's always the obvious things that you then go onto overlook that get you in trouble.

Anyway, thanks for your patience and help.

Upvotes: 0

kinakuta
kinakuta

Reputation: 9037

Rather than setting the value attribute through jQuery, just reference the value property of the element directly:

domObject[0].value = value;

or, don't even wrap it in a jQuery object:

domObject.value = value;

Upvotes: 1

Blazemonger
Blazemonger

Reputation: 92983

Try using .val(value) instead of .attr('value',value)

Upvotes: 1

Related Questions