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">
Related
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()" />
I have the following HTML that is within a form, to accept 2 numbers from two separate inputs
<input type="number" id="amount" name="amount" value="0" onchange="ltv()">
<input type="number" id="property_value" name="property_value" value="0" onchange="ltv()">
<p id="ltv"></p>
Then some JavaScript
function ltv() {
var amount = document.getElementById("amount").textContent;
var property_value = document.getElementById("property_value").textContent;
document.getElementById("ltv").innerHTML = Math.round(amount/property_value*100);
};
However after entering a number into the "amount" input the ltv element is updated with NaN which is to be expected at this stage as only the first variable in the math operation is set, however upon entering the second number and tabbing away from the input field the ltv is not updated again.
Seems like textContent isn't returning anything. Try to use .value
function ltv() {
var amount = document.getElementById("amount").value;
var property_value = document.getElementById("property_value").value;
document.getElementById("ltv").innerHTML = Math.round(amount/property_value*100);
};
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.
I would like to put in "max" and "min" values in separate input fields and then have another set of input fields autofill with all the integers in between and included the min and max #'s. I've never used JS before so I'm not sure if there is a method for this or if you need to loop through the numbers?
$("#min1").keyup(function(){
$("#speed1").val(this.value);
});
$("#max1").keyup(function(){
$("#speed5").val(this.value);
});
Just add one event for the boths (use input instead of keyup it's more effecient when we want to track input field change) then call result() function that will clear result div then generate input fields :
function result(min,max){
$("#result").html("");
for(var i=min;i<=max;i++)
$("#result").append('<input type="number" value="'+i+'"/>');
}
$("body").on('input', '#min1,#max1', function(){
var min = $('#min1').val();
var max = $('#max1').val();
if( min!="" && max!="")
if( min<max )
result(min, max);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="min1" type="number" placeholder="min" value="0"/>
<input id="max1" type="number" placeholder="max" value="0"/>
<div id="result"></div>
How do you make the maximum value of a number input field equal to a javascript variable? This variable will change, and the max needs to change with it.
You can't define it the way you can with php, and I'm not very familiar with javascript and my searches have brought up nothing.
<input type="number" min="1" max="*jsvariable*">
Sample Fiddle: http://jsfiddle.net/KDJdZ/
First assign ID to your input:
<input id="myInput" type="number" min="1" max="*jsvariable*"/>
Then access it via javascript:
var input = document.getElementById("myInput");
input.setAttribute("max",100); // set a new value;
Or using your variable
input.setAttribute("max",your_variable); // set a new value;
<input id="inputmax" type="number" min="1" max="*jsvariable*">
//create an id for your input tag .
// in my case I used "inputmax" as id
var setmymax = document.getElementById("inputmax");
setmymax.setAttribute("max", "Your value");