I have been trying different options for this but as a JS beginner, I'm missing something that I can't find in the literature, so your help is appreciated.
I would like to have only two text output/input boxes on display. When the focus is on one, it accepts input and the other field becomes output for the result. If I change focus to the other box, it now allows input and the other box displays the converted result.
Initial state:
<label for="">Fahrenheit: </label><input type="textbox" name="far"></input><br>
<label for="">Celsius: </label><input type="textbox" name="cel"></input><br>
Focus on Fahrenheit turns the state to:
<label for="">Fahrenheit: </label><input type="textbox" name="far"></input><br>
<label for="output">Celsius: </label><input type="textbox" name="cel"></input><br>
Focus on Celsius turns the state to:
<label for="output">Fahrenheit: </label><input type="textbox" name="far"></input><br>
<label for="">Celsius: </label><input type="textbox" name="cel"></input><br>
Is it possible to do this so regardless of which field is getting input, the other will show the output of the converted result?
If not, what is the closest way to do what I'd like to do?
See comments inline below:
// Put references to the two temp fields in an array:
let tempFields = [document.getElementById("f"), document.getElementById("c")];
// Used later to store reference to inputs
let input = null;
let output = null;
// Set up one event handler on a common acnestor
// of the two input elements that trigger events
document.querySelector(".temps").addEventListener("input", function(event){
// Determine which element triggered the event
input = event.target;
// Set output to 0 if input is index 1 in the array or
// 1 if input index is 0 in the array
output = tempFields.indexOf(input) === 0 ? tempFields[1] : tempFields[0];
// Produce the right output
if(output.id === "c"){
output.value = (+input.value - 32) * 5/9;
} else {
output.value = (+input.value * 9/5) + 32;
}
});
label { display:inline-block; width:100px; }
<div class="temps">
<label for="f">Fahrenheit: </label><input id="f"><br>
<label for="c">Celsius: </label><input id="c"><br>
</div>
Related
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.
anyone could help me out on how i could achieve this with either javascript or jquery maybe to get the following as mentioned below
say i have this field1
<input type="text" name="field1" value="">
and then i have this field2
<input type="hidden" name="field2" value="">
what i mean to say the field2 should be hidden but if someone enters some value in field1 then field2 shows but if no value on field1 then it disappears?
thanks in advance and appreciate your time and help
You'd get the first field, check if it has a value, and toggle the second field based on that, but you should not be using a hidden input, but instead hide it with CSS
$('[name="field1"]').on('input', function() {
var el = $('[name="field2"]').toggle( this.value !== "" );
if (this.value === "") el.val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="field1" value="" placeholder="type something">
<br><br>
<input type="text" name="field2" value="" style="display:none">
As you've also tagged your question with JavaScript it seems worth offering the following:
// retrieving the first - if any - element with its
// 'name' attribute equal to the value of 'field1':
var input = document.querySelector('[name=field1]');
// adding an event-listener to that element, listening
// for the 'input' event (keyup, paste, copy...) and
// assigning the method's anonymous function as the
// event-handler:
input.addEventListener('input', function(e) {
// 'e': here unused, is a reference to the event
// which triggered the function to be called; using
// e.type will give the specific event, if required
// (and other properties are, of course, available).
// retrieving the first - if any - element with has
// its 'name' attribute equal to 'field2':
var conditionalInput = document.querySelector('[name=field2]');
// if the value of the <input> element that received
// the event has a value that, when leading and trailing
// white-space is removed, results in a truthy
// evaluation (the string length is non-zero):
if (this.value.trim().length) {
// we set the display style of the conditionally-
// shown <input> to 'block', you could instead use
// 'inline-block' if you prefer:
conditionalInput.style.display = 'block';
// otherwise, if the length of the trimmed-value is
// zero (falsey):
} else {
// we set the display style of the conditionally-
// shown <input> to 'none':
conditionalInput.style.display = 'none';
// and also remove its entered value:
conditionalInput.value = '';
}
});
var input = document.querySelector('[name=field1]');
input.addEventListener('input', function(e) {
var conditionalInput = document.querySelector('[name=field2]');
if (this.value.trim().length) {
conditionalInput.style.display = 'block';
} else {
conditionalInput.style.display = 'none';
conditionalInput.value = '';
}
});
<input type="text" name="field1" value="" />
<input type="text" name="field2" value="" />
In your HTML please note that I've adjusted the <input> element's type, from 'hidden' to 'text', this is because some browsers – I believe mostly Internet Explorer – has, or had, issues when changing the type of an <input> element dynamically.
If your use-case doesn't depend on cross-browser compatibility then you can, of course, change the type (conditionalInput.type = 'text'/conditionalInput.type = 'hidden') rather than the display.
I need to set a max value of an input based on the value of another input.
I will have two inputs, input x and input y, a user inputs a value in each but the value for y can be no more than 80% of the value of x, so I want a max value on input y so you can't go over 80% of input x.
so if someone puts 100 in input x and tries to put 90 in input y, input y would change to be 80 because that would be the max.
I intend to use javascript and HTML to achieve this.
I suggest monitoring the input using the onchange event of both fields and limiting the value using Math.min(...)
Here is a snippet:
var elX = document.getElementById("X");
var elY = document.getElementById("Y");
function limit() {
elY.value=Math.min(Math.round(elX.value*.8),elY.value);
}
elX.onchange=limit;
elY.onchange=limit;
<input type="number" id="X" value="0"><br>
<input type="number" id="Y" value="0">
Here is a simple solution using JQuery and 2 simple input fields. It pretty much does what you want -> JSFiddle
Related HTML:
<input type="number"id="x">
<input type="number" id="y">
Related JS:
(function(){
$("#y").on("change", function(e){
var x = $("#x").val()
if($(this).val() > (x*80)/100){
$(this).val(((x*80)/100));
alert("field Y cannot excede 80% of field X")
}
})
}())
If I understand right:
The input is like something this:
<input type="number" id="Y" max="numberHere">
You can do it like this:
var temp = document.getElementById("Y");
var maxValue = document.getElementById("X").value * 0.8;
temp.setAttribute("max",maxValue); // set a new value;
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';
}
}