Develop Reference

use javascript set value to input ,the input value will disappear when it's on focus

i have try to fill some value into input field by javascript(chrome extension)which belong to a form , the value seems not update, and will disappear when i click the other area of the page ,
my code is simple
document.getElementById("editGiftCardNumber").value = "12345";
document.getElementById("editGiftCardNumber").setAttribute('value','12345');
also try to use
setTimeout(function()
e.g. in https://www.elementaryrobotics.com/
, i try to set value in chrome console
input = document.getElementById("comp-jpua0zn5input");
input.value="123";
you will see the 123 is shown in input, if I click other area of the page, the 123 will disappear, how to solve it ?

How to retrive the tag value entered in dialog in aem in javascript?

I need to get the value of the tag entered in dialog.
The sling:reosurcetype is cq/gui/components/coral/common/form/tagfield
I have tried using a graniteClass getting the value something like $(".tagid")[0].value where tagid is the graniteclass name but this doesn't seem to me working.
I need to get the data in this screenshot iin javascript in aem

Graniteclass worked
var tags = $this.find("[data-id='tagi'").find("input").val();
where tagi is the id name of the graniteclass

how to get value in javascript from document.getElementsByClassName('myTxtBox');

The html for the textbox I was to get the value from is created from a .js file -- from javascript. I tried this to get the value that I enter into myTxtBox which is defined by a className:
<input type='text' class='myTxtBox editable' name='myTxtBox' value='' maxlength='200' size='90'/>
....
I try to retrieve the value I enter into myTxtBox as follows:
var txtval = document.getElementsByClassName('myTxtBox');
alert(txtval);
...more stuff where I set a breakpoint
the alert says I have [object htmlcollection]
intellisense does not give me .value -- I only get txtVal.valueOf, but when I break into the code and hover over txtval I get a listing for >Methods, ..., >myTxtBox. When I expand the >myTxtBox list if I scroll to the bottom of that listing I DO see "value" in >myTxtBox list and it DOES equal what I entered on the web page.
How do I retrieve that value? I have tried all sorts of options from the intellisense, but it either gives an error msg or [object htmlcollection] on the alert. How do I retrieve the value I entered? Or -- do I use something different than document.getElementsByClassName('myTxtBox') for my scenario?

You would need to return the index + value as getElementsByClassName returns a HtmlCollection so there are many elements to it.. try this:
var val = document.getElementsByClassName('myTxtBox')[0].value
alert(val)

getElementsByClassName returns a HtmlCollection which is array like. Do this like this:
var txtval = document.getElementsByClassName('myTxtBox')[0].value
alert(txtval)

I discovered that I could add an ID to my input element 'myTxtBox' and use jquery to retrieve the desired value, so I did this -- added an ID to the textbox and use jquery in the alert to do a document.getelementbyID
//--generate the html section here
"...<input type='text' class='myTxttBox editable datepicker' id='myTxtBox' name='myTxtBox' value='' size='10'/>..."
function NextButton_Click()
{
try
{
alert($("#PositionStartDateTextBox").val()); <---and this displays the value entered into this textbox
....
The whole deal is I have to evaluate some date textboxes because users can enter values in manually -- I guess the best fix would be for this textbox to not be editable. That would be another question -- how to add a datepicker and not have an editable textbox.

Jquery Issue in Appending Text to a label

I was doing validations for input fields using Jquery by just checking if a value is supplied for the fields or not.
In case there is NO value supplied, I just used to Append Text: "Duration:*Required" to the Field's "Label" controls as:
$('label[for="Duration_Value"]').Append(" Duration:* Required");
The problem is that for the very first time, if a user doesn't selects a value for the "Duration" dropdown, error message displays fine.
But, again , without selecting any value, if the Submit button is subsequently clicked, the Error Message: "Duration:* Required" keeps adding at end as seen below:
Which Jquery function shoul be used to change Text / error message displayed so that no matter how many times submit button clicked, Error message don't add up as above ?

Use indexOf to check if the message is already added, if not then only add the message to the label.
if ($('label[for="Duration_Value"]').text().indexOf(" Duration:* Required") === -1) {
$('label[for="Duration_Value"]').append(" Duration:* Required");
}

If value is not specified, then call this
$('label[for="Duration_Value"]').text(" Duration:* Required");
and if value is specified then clear label text like this
$('label[for="Duration_Value"]').text("");

Get value of name attribute in form

I'm trying to get the value of a name attribute in my html form.
I tried:
$('input[name=username]').val();
but that doesn't work it.
Hope someone can help me.
edit:
Sorry I wasn't really clear but I want to get the input value of the form.
When I try:
GM_setValue ("username", $('input[name=username]').val() );
and check about:config after I fill in the form the value of username is empty
Thanks!

What you have done will get you the value of the input with name=username. If you want to get the value "username" (not sure why, but I think it is what you are asking) then you can do this:
var nameValue = $('input[name=username]').attr("name");
Assuminge the following HTML:
<input name="username" value="my value" />
Your original method will return a result of "my value", my method will return a result of "username". If I have misunderstood your requirements then please let me know what you are trying to do, as what you already have should work fine.
Here is an example of both in action

you can use this to get the name
$("#id").attr("name");