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 ?

Save input value even if it's blank

I found a solution that retains the value of a datatable search filter box after the page refreshes.
What I need to do is also ensure that a blank value can be retained.
When the user clicks the "clear button" and clears the search box, I need to set the value of the filter to blank. So when the page refreshes, the filter is blank.
Here is the input:
<input type="search" id="searchFilter" onkeyup='saveValue(this);' />
And here is the JavaScript:
document.getElementById("searchFilter").value = getSavedValue("searchFilter"); // set the value to this input
//Save the value function - save it to localStorage as (ID, VALUE)
function saveValue(e){
var id = e.id; // get the sender's id to save it .
var val = e.value; // get the value.
localStorage.setItem(id, val); // Every time user writing something, the
localStorage's value will override .
}
//get the saved value function - return the value of "v" from localStorage.
function getSavedValue(v){
if (!localStorage.getItem(v)) {
return ""; // You can change this to your defualt value.
}
return localStorage.getItem(v);
}
Here is the clear button click event:
$('.clearFilters').on('click', function()
{
$('#searchFilter').val("");
$('#example1').DataTable().search('').draw();
});
As stated, when the page is refreshed, the last value that was entered in the search is retained.
However, if the user clears the filter, and if the page refreshes, the last value that was entered appears again in the filter.
The filter needs to be blank if the clear button was clicked and the page refreshes.
I'm guessing I need to call the saveValue function from the clear button click event, but wasn't sure how.

I was able to solve my problem by triggering the keyup by setting the value to blank on the clear filter button event:
$('.clearFilters').on('click', function()
{
$('#searchFilter').val(""); // still needed to make sure the value gets cleared
$('#example1').DataTable().search('').draw();
$('#searchFilter').keyup().val(""); // this is what I added to trigger the keyup
});

Not able to populate textarea value if it's updated?

On click of a button, I am showing a popup with one text area and a submit button.
I am able to enter a value in the textarea (e.g.: "hello1"), and when clicking on the submit button, I am checking the textarea's entered value, it gives me "hello1", and fades out the pop up. (as expected)
Issue: the second time, I click the same button again, I entered the value "hello2", and after submitting, it shows me the last entered value in an alert and fades out.
Below is my code:
function onCalChange(cal) {
// inputField = cal.inputField;
startDate = cal.date;
var calVal = this.id;
popup2(calVal);
}
function popup2(calVal) {
idValue = calVal.split("-");
$('.popup2').css('display','block');
//$('.popup2').addClass('pop_up_bckgd');
$(".popup2").append("<div class='pop_up_bckgd'></div>");
$(".popup2").append("<div class='pop_up_container'><form>\n\
\n\
\n\
<label style='margin-left:65px;margin-top:40px;'class = 'label-value' for = 'reason-for-change-" + idValue[2] + "'>Reason for change</label>\n\
<br>\n\
<textarea id='reasontxt" + idValue[2] + "'style = 'width: 74%;margin-left: 62px;height:100px' class = 'text-box' name = 'reason' required></textarea>\n\
<br>\n\
<div style = 'text-align:center'><input class = 'submit-value2' type = 'button' value = 'Submit' name = 'submit1' onclick= 'clicksubmit(idValue[2]);' '></div ></form>")
}
function clicksubmit(id) {
var idNum= parseInt(id);
if ($('#reasontxt' + idNum).val() == "") {
// alert("1");
$('#reasontxt' + idNum).next(".validation").remove();
$('#reasontxt' + idNum).after("<div class='validation' style='color:red;margin-top:5px'>Please enter Reason for change Field</div>");
} else {
alert('2');
alert($('#reasontxt' + idNum).val());
$('#reason' + (idNum)).val($('#reasontxt' + idNum).val());
// $('#reasontxt' + idNum).val() == ""
$('.popup2').fadeOut();
}
}

After making he change specified by erkaner on the comments, I was able to reproduce the issue by copying your code into this JSFiddle: http://jsfiddle.net/v2djohhw/ (I had to make another minor change to hardcode the value of calVal for testing).
From what I saw, the issue is:
Every time that you click on the button, a form with a textarea and a submit button are appended to the popup (using $(".popup2").append(...));
the id of the textarea depends on the id of the button that was clicked (calVal);
so if the same button is clicked several times [or the button is different but it has an id which third part (as you are splitting it and only using the third value idValue[2]) matches the one of a previously clicked button], you will be appending multiple textarea over time, all of them with the same id.
when you submit, and read the value of the textarea, as there are multiple with the same id, the browser will take the value of the first textarea with the specified id.
Because of that you get always the same value that is the one of the first textarea.
How to fix it? Avoid having multiple elements with the same id.
One possible solution: delete the content of the .popup2 box every time you are going to display it, that way you make sure that the id of the textbox is really unique and you don't face unexpected errors:
$(".popup2").html("");
You can see it working here: http://jsfiddle.net/v2djohhw/1/
If you don't want to (or you cannot) delete the content of the .popup2 box, and want to show all the previous textareas, another solution would be keeping track of the number of times the button was clicked and add that value into the id of the textarea. That way you'll make sure the textbox id will be really unique.
You can see it on this other fiddle: http://jsfiddle.net/v2djohhw/2/

Deleting value of each input Javascript

I have 3 inputs (autocomplete's of JqueryMobile).
Using this function:
$('.ui-input-clear').attr('onclick', 'delete_email();');
I add onclick event to each clear button, but what can I do for ONLY delete the input of the same button?
Example:
[<------INPUT------>] [BUTTON] //If I click, the value of THIS input turns ""
[<------INPUT------>] [BUTTON] //If I click, the value of THIS input turns ""
[<------INPUT------>] [BUTTON] //If I click, the value of THIS input turns ""

Since you are not providing the code for delete_email(). Give all inputs unique id's, then:
$('.ui-input-clear').click(function() {
delete_email($(this).attr('id'));
});
And modify your delete function to take an id parameter, then use this id to identify the input that needs to be deleted.

$(document).ready(function(){
$('.ui-input-clear').click(function(){
$(this).prev().find('input').val('');
});
});

Select text on click for multiple textbox with random IDs

I have multiple textboxes on my page, their ID starts with 'Text' and followed by a random string like this 'Textc0816e05-d7c0-4acc-b233-bef152781cac', How can I have the textbox' value selected when user click on it?

$('input[type=text][id^=Text]').on('click', function() {
console.log(this.value);
});

You can get the clicked textbox value with following code
$('input[type=text][id^=Text]').on('click',function(){
var value = $(this).val();
//do what ever you want with the values
});
You can check the Attributes start with selector doc.