0

I'm facing a very weird problem regarding the dynamical setting of an input value with JQuery.

The initial state of the targeted input is as following:

<input type="text" id="birthdate" name="birthdate" value="" data-alt-value="0000-00-00" autocomplete="off" data-local-value="0000-00-00">

Note: The input fields are generated through the Joomla framework (may be it matters, I don't know).

If I set the value in a regular way: 

$('[name="birthdate"]').val("1986-01-21");

I get this result:

<input type="text" id="birthdate" name="birthdate" value="" data-alt-value="1986-01-21" autocomplete="off" data-local-value="1986-01-21">

The value attribute is not set. So I tried this way:

$('[name="birthdate"]').attr('value', "1986-01-21");

which gives the expected result:

<input type="text" id="birthdate" name="birthdate" value="1986-01-21" data-alt-value="1986-01-21" autocomplete="off" data-local-value="1986-01-21">

But for whatever reason the value is empty after the form is submitted. Even stranger, if I give the focus to the birthdate field (by clicking in it) then submit the form, the value is passed correctly.

I would point out that this problem occurs only with input fields dealing with date or datetime values.

Can someone helps me ?

Duddy67
  • 836
  • 2
  • 10
  • 26
  • `$('[name="birthdate"]').val("1986-01-21");` wouldn't change the `value` attribute, it changes the `input` value(the text in the input field). `$('[name="birthdate"]').attr('value', "1986-01-21");` does the opposite(sets the `value` attribute, but does not set the `input` value). – APAD1 Jan 04 '18 at 20:01
  • 2
    @APAD1 um, they are the same thing in the case of `input` yes? – NappingRabbit Jan 04 '18 at 20:12
  • @APAD1 I get what you are saying, but the `value` attribute of an `input` tag should be, IS, the `input` `value`. maybe toss me a link? – NappingRabbit Jan 04 '18 at 20:24

1 Answers1

2

When a form is submitted, the parameters that are sent come from the value properties of the input fields. The value attribute is used as the initial value of the value property, but changing the attribute doesn't change the property (the attribute is saved separately so that the form's reset() method can restore it).

To change what gets submitted, you just need to change the property, not the attribute. You won't see this change when you look at the DOM in the console.

See Why should HTML DOM properties be reflected into HTML DOM attributes as well? for some more information about the relationship between attributes and properties. Some properties and attributes work a little differently from others.

Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Thanks for this information. However, I tried to use the JQuery prop() method but it still doesn't work. Moreover, why the other input fields are correctly submited regardless the used method ? How can I solve this problem ? – Duddy67 Jan 05 '18 at 16:05
  • `.prop()` sometimes sets attributes instead of properties, because programmers often confuse them. See https://stackoverflow.com/questions/5874652/prop-vs-attr. It might be doing that in this case, since you should use `.val()` to set the property. – Barmar Jan 05 '18 at 17:40
  • I have no explanation for why this would work differently for different input fields, unless somehow Joomla interfered. I know nothing about Joomla. – Barmar Jan 05 '18 at 17:42