This question already has answers here:
Enter data into a custom-handled input field
(2 answers)
Closed 2 years ago.
The following code changes the 'text' of the field but it is not picked up by the website. When you submit the form, it says the field is still empty and to enter a valid number.
var number = 123;
var field = document.getElementById('textfield');
field.value = number;
The code above only visually changes the textbox's input. Is there a way to imitate a physical field entry (to have it picked up by the form)?
The type changes from text when its not selected to number when selected.
Edit: I still haven't seen your submit function so I included one as an example below.
Is this what you are expecting?
var number = 123;
var field = document.getElementById('td-wb-order-price-amount-limit-price');
var example = document.getElementById('example');
function clickMe() {
field.value = number.toString();;
example.innerHTML = "Your input value is " + number;
}
<input _ngcontent-axt-c487="" name="limitPrice" type="text" tdwbinput="" tdwbnumberinput="n4-2"
required="" nonzero="" min="0" maxlength="7" tdwbnumberinputgroupseparator="true"
class="td-wb-order-price-amount__input-limit-price td-wb-input ng-untouched ng-pristine ng-invalid"
id="td-wb-order-price-amount-limit-price" autocomplete="off" aria-invalid="false">
<button onclick="clickMe();">Click </button>
<p id="example"></p>
You will need onchange attribute to detect the change in the input field.
const handleChange = () => {
const inputValue = document.getElementById('input').value;
console.log(inputValue)
}
<input type="text" id="input" onchange="handleChange()" />
Related
If I type some texts in the input field, how can I bring those texts to address bar ?
for eg : I type abcd to input field, I need address bar like www.google.com/abcd
Try this:
function updateAddressBar() {
const inputValue = document.getElementById("inputField").value;
window.history.replaceState({}, '', `?value=${inputValue}`);
}
<form>
<input type="text" id="inputField" oninput="updateAddressBar()">
</form>
The oninput event is used to call the updateAddressBar function whenever the value of the input field changes. The function uses document.getElementById to get the value from the input field, and then window.history.replaceState to update the URL with the new value from the input field.
This can work:
<body>
<p>Typing something...</p>
<input type="text" id="Input1" onkeyup="displayResult()"><!--onkeypress can not function backspace-->
<br>
<button id="Hite">
Hite
</button>
<script>
function displayResult()
{
var text = "www.google.com";
var Input1Value = document.getElementById("Input1").value;
document.getElementById("Hite").innerHTML = text +"\\"+ Input1Value + "\\";
}
</script>
I using onkeyup event so when the value of the input changes, it will function to set the text. Also, the reason why I do not using onkeypress is: onkeypress can not function when you press backspace.
Then, if you want to get the address, you can use document.getElementById("Hite").innerHTML to get it (As you did not required to get it)
I want to assign the values - value and value 2 into the DATAID and DEPNUM when clicking the drop-down and using onchange() function in the following HTML FORM
The places that are being assigned are parts of a readonly field which contains string.
My goal is to create a readonly string which will contain the values that I've chosen from the dropdown fields, all combined in 1 string and separated by underscore.
I've been trying to use onChange method "myFunction()"
<input name="_1_1_2_1" tabindex="-1" class="valueEditable" id="myInput" onchange="myFunction()" type="text" size="32" value="...">
which will look like :
function myFunction()
{
var x = document.getElementById("myInput").value;
document.getElementById("demo").innerHTML = x;
}
eventually I run it on the paragraph :
<p id="demo" value="DATAID_DOCTYPE_DEPNUM_NTA">DATAID_DOCTYPE_DEPNUM_NTA</p>
The problem is that the value at is not changing instant as i change value2 or value.
You can bind two event-listener for both two input fields and updated the readonly textfield value by below approach.
$(document).ready(function(){
$('#field1').keyup(function() {
updatedReadonlyFieldVal($(this), 0);
});
$('#field2').keyup(function() {
updatedReadonlyFieldVal($(this), 2);
});
function updatedReadonlyFieldVal(elem, index) {
let val = elem.val();
let destVal = $('#destination').val();
let splittedDestVal = destVal.split('_');
splittedDestVal[index] = val;
$('#destination').val(splittedDestVal.join('_'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="field1" name="field1">
<input type="text" id="field2" name="field2">
<input value="DATAID_DOCTYPE_DATANUM" readonly id="destination">
Please don't hesitate to let me know if you have any query.
in a webpage, I asked users to input a field named "budget". I tried using the script below to create thousands separator for the entered number:
window.onload = function() {
document.getElementById("project-budget").onblur = function() {
this.value = parseFloat(this.value.replace(/,/g, ""))
.toFixed(0)
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
document.getElementById("display").value = this.value.replace(/,/g, "")
}
}
<input id="project-budget" step="5" required type="text" pattern="[0-9]*" class="test input-item text-field is_number numberVal" name="et_budget" min="1">
it changes the value perfectly but the problem is that making the field value as text cause cms to not understand value in this field. so I need to change the value back to simple numbers in a hidden field and use that hidden field to insert value to database.
how can I change the value back?
for example user enters 1000000 and the script changes it to 1,000,000. I want to print 1000000 in a hidden field.
This might help.
function parseBudget(element) {
const value = parseFloat(element.value.replace(/,/g, ''));
console.log(value);
element.value = value.toFixed(0)
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
document.querySelector("#forCms").value = value;
}
<input id="project-budget" step="5" required type="text" pattern="[0-9]*" onblur="parseBudget(this)" class="test input-item text-field is_number numberVal" name="et_budget" min="1">
<input type="number" id="forCms">
This question already has answers here:
copy and concatenate values of multiple input boxes in a form to one input field
(2 answers)
Closed 5 years ago.
I want to concatenate the textInputs on clicking the button.
e.g text1=2 , text2=3 , text3=9 and text4=8, the final result should be 2398.
How to achieve this?
If you were using ES6 standards, you can use string literals
const txt1 = 'rt';
const txt2 = 'rete';
const concatenated = `${txt1}${txt2}`
you can refer the link for further learning:
https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/template_strings
create one onChangeHandler() for textInput such as:
<TextInput onChange={(text)=>(this.onChangeHandler("text1",text))}>
<TextInput onChange={(text)=>(this.onChangeHandler("text2",text))}>
<TextInput onChange={(text)=>(this.onChangeHandler("text3",text))}>
onChangeHandler=(name,value)=>{
this.setState({[name]:value})
}
then on button click do this:
onButtonClick=()=>{
let finalText =this.state.text1+this.state.text2+this.state.text3
console.log(finalText) //prints the concatenated text.
}
With Pure JS
function concatenate(){
var concatenate = document.getElementById("input1").value + document.getElementById("input2").value + document.getElementById("input3").value
document.getElementById("result").innerHTML = "Resultat:"+concatenate
}
<input id="input1" type="text" name="name1" >
<input id="input2" type="text" name="name2" >
<input id="input3" type="text" name="name3" >
<button type="button" onclick="concatenate()">concatenate</button>
<div id="result">Resultat: </div>
Noob in need of some input here. I've spent some hours now trying to get this to work, with both PHP and javascript and this is where i'm at now.
I want to get an input field to show a specific text based on a condition. If the digit in input field 'ebctotal' is within the range 1-4, then show the text "very pale" in input field 'hue'.
Code:
function getHue() {
var ebc = document.getElementById("ebctotal").value;
if (ebc >= 1 && ebc <= 4) {
// insert text "Very pale" into element with id 'hue'
document.getElementById('hue').value;
}
}
HTML:
// print text in this field
<input class="input" type="text" id="hue" size="7" maxlength="20">
// based on value of this field
<input class="input" type="text" id="ebctotal" size="7" maxlength="20">
Am I on the right track?
Cheers
If you want to check whether length of "ebc" between 1-4 then try like;
function getHue() {
var ebc = document.getElementById("ebctotal").value;
if (ebc.length>=1 && ebc.length<=4) {
document.getElementById('hue').value='Very pale';
}
}
or whether value of "ebc" between 1-4 then try like;
function getHue() {
var ebc = parseInt(document.getElementById("ebctotal").value);
if (ebc>=1 && ebc<=4) {
document.getElementById('hue').value='Very pale';
}
}