How to change the attribute of an input field in the DOM

Question

I want to use the jquery plugin "datedropper". Datedropper

To set a default date, the plugin uses an attribute on the input field:

<input id="addjobstartdate" data-default-date="CURRENT DATE"/>

I want to change the default date dynamically, so I try to use:

document.getElementById("addjobstartdate").setAttribute('data-default-date', getjobdetails[31]);    

or

$('#addjobstartdate').attr('data-default-date', getjobdetails[31]); 

But when I look at the source-code of the page, neither of the commands changes the DOM.

data-default-date is still "CURRENT DATE". Can someone please explain this to me.

Answer 1

The "source code" is not the same thing as the "Document Object" that is currently loaded into memory. All you will ever see when looking at the source code is the original code that was delivered to the client machine for processing.

Once the client modifies that, the changes persist only in memory. You can see those changes by looking in your Developer's Tools (press F12 in your browser) and click on the Element tab. This tab shows you the code that is currently in memory (also known as the DOM or Document Object Model).

Now, when working with DOM objects in JavaScript, there are two ways to affect the current state of an element and it's important to understand the effects of working with these two techniques:

1. Work with the element's current HTML state (which is done with setAttribute(), removeAttribute(), and getAttribute()). These types of changes will be visible when looking at the DOM in the Elements tab.
2. Work with element's current DOM Object state (which is done with the JavaScript property that represents the current state) of the element in memory. These types of changes will not cause any change to the markup shown in the Elements tab, but will affect the element by persisting in memory.

Most importantly, the property value can be different than the attribute value. This can be confusing but the HTML state is what the element looks like from the outside and the property state is what is really happening on the inside, like you can put a happy face on so that people who look at you think your happy (the HTML state), but you might actually be sad for real (the property state).

When the property state hasn't been set, the attribute state is all that matters and will have total control over the state of the element. When the property state is set, it overrides whatever the attribute state may be and controls the actual state of the element.

// Get a reference to the button
var btn = document.querySelector("[type=button]");

// Test what the current HTML state is:
console.log("disabled attribute state: ", btn.getAttribute("disabled"));

// Test what the current mapped property state is:
console.log("disabled property state: ", btn.disabled);

console.log("...changing button's disabled PROPERTY to false...");

// Change the property state, which will override the HTML state and 
// and cause it to become enabled.
btn.disabled = false;

// Test what the current HTML state is:
console.log("disabled attribute state: ", btn.getAttribute("disabled"));  // null because property overrode HTML

// Test what the current mapped property value is:
console.log("disabled property state: ", btn.disabled);

<input type="button" value="I'm disabled" disabled="disabled">

Answer 2

When changing attrs on HTML elements via client side code, the changes are not reflected in the source code or the dev tools. Try running $('#addjobstartdate').attr('data-default-date') in the console to confirm the value.

EDIT: I stand corrected. Dev tools does update the value. Not sure if this changed. Your code seems correct.

Answer 3

If you want to see the changes in the DOM, this worked for me:

document.getElementById("addjobstartdate").dataset.defaultDate = "TODAY"

<input id="addjobstartdate" data-default-date="CURRENT DATE"/>

Dataset documentation on MDN