Set the value of an input field with JavaScript - javascript

For that, I need to collect data from a table generated by a web page. But when I insert the values ​​with Javascript, a problem occurs. In the entry of type date, when inserting a value like "
document.querySelector().value = '2023-02-06'
" does not work, because when clicking on another element of the screen, the value of the entry of type date returns to the value standard.
When inserting the value with .value, it changes the value in the form, but in the HTML it remains the same.
document.querySelector("#root > div.pushable.sidebar-content > div.ui.vertical.ui.overlay.left.visible.sidebar.menu > div:nth-child(2) > div:nth-child(8) > input[type=date]").value = '2023-02-06';
'2023-02-06'
<input type="date" max="2023-02-07" value="2023-02-07">

Related

Using Javascript to auto fill out web form, but the field automatically update and erase the input

I am attempting to autofill a form on a webpage by making a javascript snippet. Using the .value method will temporarily fill the field, but then the field resets back to unfilled out. In the example picture below I want to fill out the address 1 line and I use the following selector to set the .value to a string "address 1" however after a short amount of time or click the box the input will rest to nothing.
Despite "changing" the value I haven't actually changed the value. The page looks like it runs on node.js so maybe thats why I cant just inject the value.
document.querySelector("body > div.content > div > div > div > div > div.account-frame-content.grid > div.frame-content > div.shipping-form > div.shipping-form__box > form > div.user-shipping-info-form.account > div.user-shipping-info-form__field.address1 > label > div > div > input[type=text]").value = "address 1"
In summary I am looking to change the actual value of the address field so that I do not have to type it and as far as I know with js you cannot do typing such as you can with a webdriver.
enter image description here

JavaScript Input field gets the old value on loading

I have an input field:
<input id="RangeRate1" type="range" min="125.00" max="500.00" value="250.00">
When I reload the page, the value of the input is set to what was set the last time the range slider was changed. For instance, if the rate was changed to 300 prior to page reload, when the page reloads, if I console out the value of the range slider:
let RateSlider = document.querySelector("RangeRate1")
console.log("existing rate: ", RateSlider.value)
I get 300! even though the html input value is still shown as 250.00 as above. When I use ctrl shift r, the correct number is displayed, in this case the value I see in the input HTML code, 250. So, is there a way to flush out the old value or overwrite it with the actual value in the input tag lin?
Some browsers do this for "convenience" purposes even though it's less than convinient
You can just use some JavaScript to set the actual value to the attribute value (unless the attribute itself is also set by the browser to last value, in which case just set it to the hard coded value itself)
let RateSlider = document.querySelector("#RangeRate1")
RateSlider.value=parseInt(RateSlider.getAttribute("value"))
EDIT
alternatively if the input is part of a form (assuming form has id if "myForm") you can reset it
myForm.reset()

How to fill a text field with a hidden value?

I am auto populating text fields from a database and I am also validating these fields in case someone mistypes anything. If validation fails I show the error messages but the fields get back the original values.
Is there a way to refill those text fields with something like hidden values to hold the mistyped value.
So this email field gets populated with a value from the database on page load.
<td align="left">
<s:textfield name="emailId" id="emailId" label="Email" cssClass="dataFieldCell3" value="%{#signerslist.email}" />
</td>
So if accidentally the value is changed I want to get that changed value and hold it because I am showing the error message for it without letting it go back and get the original value.
I am not sure what to do after this JavaScript.
function getIncorrectValue() {
var emailValue = document.getElementById('emailId').value;
}
With JQuery, you can add data to your DOM. This data is a string model, which means it will be an invisible or hidden data attached to your HTML element.
function getIncorrectValue() {
var emailValue = document.getElementById('emailId').value;
$('#emailId').data('incorrectValue', emailValue);
}
Then you can retrieve that data later by doing:
var emailValue = $('#emailId').data('incorrectValue');

Do not show default value of the input field

I have an input field
<input id='spe_count' type="text" placeholder="number" class="form-control" data-original-title="" title="">
and as I need it to be by default with value -1 I am assigning it with jQuery
$("#spe_count").val('-1');
And I get this input field and see this value -1 inside it, but what I want is that this input is with value -1, but on the page it would be empty or with placeholder.
And when I am changing values, I'd like to do so, that deleting value, emptying the box means that it is default value -1 (not typing minus one , but simply deleting all the values mean this is minus one)
Is this possible?
#("#spe_count").click(function(){
var value= $(this).val();
if(value.length < 1){
$(this).attr("value", -1);
}
});
The above code will serve your purpose.

How to make Mootools get('html') including values of inputfields

When I have HTML input fields and a change them by direct input they should actually change there value attribute. But when I try to get the whole HTML record it just shows the old value attributes.
Somehow this is clear to me, couse the HTML is not overwritten, but I need the HTML containing the changed input values. How can I approach it?
Example:
$('input').addEvent('blur', function(){
alert($('adiv').get('html'));
});
<div id="adiv">Enter something in input box and press tab<div>....<input id="input" type="text" value="1">the mootools will grep the old value of 1 again....</div></div>
http://jsfiddle.net/hJtzc/1/
alerts allways:
> Enter something in input box and press tab<div>....<input id="input"
> type="text" value="1">the mootools will grep the old value of 1
> again....</div>
but what I need to get is:
> Enter something in input box and press tab<div>....<input id="input"
> type="text" value="[VALUE FROM USER]">the mootools will grep the old
> value of 1 again....</div>
Attribute value in HTML sets initial, default value of the element, DOM property value contains the actual, real value of the element . To change the default value of input element change defaultValue property:
$('input').addEvent('blur', function(){
this.defaultValue = this.value;
alert($('adiv').get('html'));
});
This is normal behavior that is not related to mootools framework

Categories