Generated input and default values

Question

I'm using some generated input elements in my App's form, and I'm trying to keep it simple as possible, that's why I'm sticking with native form reset for them.

It seems that the 'default value' is bonded to the element upon the node creation. For example:

var inputOne = $('<input value="Original value">');
var inputTwo = $('<input>').val('Original value');
myForm.append([inputOne, inputTwo]);

In this example (here's the fiddle) only input one will reset properly, however I need to use something more like was done in input two because I have different kinds on input templates that are much more complex than those in the example given, so a simple string concatenation with the value is not a much viable option.

I've considered to use placeholders in my input templates, like:

var myInputTemplate = '<input value="%val" data-foo="%foo" data-bar="%bar">';

var newInputNode = createNodeFromTemplate(myInputTemplate , {
  val: "Original Value",
  foo:"My Foo",
  bar:"My Bar",
});

But that's a last resort, remember I'm trying to keep it simple as possible.

The question:

I read once in the spec that the default value is defined differently for each element type, but no further explanation was given.

How default values are defined for inputs?!

There's some workaround to "redefine" the default value in generated inputs?!

Did you try $('<input>').attr('value', 'def value')?

arty
– arty

2014-04-04 17:45:20 +00:00
Commented Apr 4, 2014 at 17:45 — arty
– arty, Commented Apr 4, 2014 at 17:45
@arty Yes, see the fiddle...

cvsguimaraes
– cvsguimaraes

2014-04-04 17:46:58 +00:00
Commented Apr 4, 2014 at 17:46 — cvsguimaraes
– cvsguimaraes, Commented Apr 4, 2014 at 17:46
$('<input />', {value: 'Original value'}) pass an object

adeneo
– adeneo

2014-04-04 17:48:06 +00:00
Commented Apr 4, 2014 at 17:48 — adeneo
– adeneo, Commented Apr 4, 2014 at 17:48
jsfiddle.net/adeneo/yAE7h/4

adeneo
– adeneo

2014-04-04 17:48:58 +00:00
Commented Apr 4, 2014 at 17:48 — adeneo
– adeneo, Commented Apr 4, 2014 at 17:48
jsfiddle.net/yAE7h/3

arty
– arty

2014-04-04 17:49:19 +00:00
Commented Apr 4, 2014 at 17:49 — arty
– arty, Commented Apr 4, 2014 at 17:49

adeneo · Accepted Answer · 2014-04-04 17:54:39Z

1

You can set the default value at any time with

inputTwo.prop('defaultValue','some other value');

but that does not update the actual value property, only the default value used when the form is reset, the preferred method for setting the value property is still val() as it sets the native element.value property

inputTwo.val('value');

and in most cases you want to change the property, not the attribute, as that can cause a multitude of other issues later.

FIDDLE

You can also create elements by passing an object

var params = {
    value   : 'Original value',
    id      : 'myID',
    'class' : 'myClass' // note the quotes, class is a reserved word in JS
}

$('<input />', params);

answered Apr 4, 2014 at 17:54

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cvsguimaraes Over a year ago

Thanks! From my testing, setting defaultValue before appending the element is enough :)

raina77ow · Accepted Answer · 2014-04-04 17:48:19Z

1

There's a difference between $('input').val(something) and $('input').attr('value', something). The former sets the current value of input. The latter changes the input's value attribute, which contains the initial value of the control. That, it turn, allows to correctly process it by form.reset - as seen in this demo.

answered Apr 4, 2014 at 17:48

raina77ow

107k16 gold badges205 silver badges240 bronze badges

Comments

Greg · Accepted Answer · 2014-04-04 17:49:07Z

1

jQuery's .val() doesn't change the value attribute of the input, simply its content. Using .attr() instead to change the value attribute give the functionality you want.

$('<input>').attr('value', 'Original value');

http://jsfiddle.net/yAE7h/2/

answered Apr 4, 2014 at 17:49

Greg

2,1731 gold badge22 silver badges23 bronze badges

Comments

Oriol · Accepted Answer · 2014-04-04 18:05:42Z

It seems you are confusing value property with value attribute.

Input elements have a value attribute, which is the value which appears by default and to which is reset. It corresponds to the defaultValue propery.

They also have a value property which contains the current value, and can be used to set a new one.

In jQuery, .val() referes to the property value, not the attribute.

Then, if you want to get/set the default value, use

       |            Get              |                 Set
---------------------------------------------------------------------------
JS     | input.getAttribute('value') | input.setAttribute('value', newVal)
jQuery | $input.attr('value')        | $input.attr('value', newVal)

JS     | input.defaultValue          | input.defaultValue = newVal
jQuery | $input.prop('defaultValue') | $input.prop('defaultValue', newVal)

Otherwise, if you want to get/set the current value, use

       |            Get              |                 Set
---------------------------------------------------------------------------
JS     | input.value                 | input.value = newVal
jQuery | $input.prop('value')        | $input.prop('value', newVal)
jQuery | $input.val()                | $input.val(newVal)

Collectives™ on Stack Overflow

Generated input and default values

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related