This is a very simple example. I have a form and I need the value of a hidden field so I need to use ref:
<form>
<input ref="num" type="hidden" name="amount" value="99"/>
</form>
var number = this.refs.num.value;
console.log(number); // nothing
console.log(this.refs.num); // shows the field
How to get the value with ref?
I think you get value, before rendering, try this:
handleSubmit(e) {
if (e) {
e.preventDefault();
}
var value = this.refs.num.value;
console.log(value);
}
render() {
console.log(this.refs.num ? this.refs.num.value : '');
return (
<form>
<input ref="num" type="hidden" name="amount" value="99" />
<a onClick={this.handleSubmit.bind(this)}>submit</a>
</form>
);
}
output would be empty string at first and 99 after render:
Related
I have an input field which is of number type, when I enter the dot I am not getting the value. So what I am trying to achieve is the I don't want the user to enter dot on the input field
function handleChange (value) {
console.log(value)
}
<input type="number" onchange="handleChange(this.value)"/>
on each number entering I am getting the value, but when I type dot (.), I am not getting how can I block this when user type it
<input name="num" type="number" min="1" step="1" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
referance from this url
https://stackoverflow.com/a/44379790/4316212
Add This oninput="this.value = this.value.replace(/[^0-9]/, '')"
function handleChange (value) {
console.log(value)
}
<input type="number" onchange="handleChange(this.value)" oninput="this.value = this.value.replace(/[^0-9]/, '')"/>
if you want to block '.' you can use this way,
function handleChange (value) {
console.log(value)
}
var inputBox = document.getElementById("inputBox");
var invalidChars = [
".",
];
inputBox.addEventListener("keydown", function(e) {
if (invalidChars.includes(e.key)) {
e.preventDefault();
}
});
<input type="number" id="inputBox" onchange="handleChange(this.value)/>
It is generally not a good idea to use inline event handlers.
For more control you should check/use the atributes of a number input.
If you want to completely control the input, use a readonly field and handle it using your own handler. Here's a snippet using event delegation. It uses the step attribute from the number input field for adding/subtracting.
document.addEventListener('click', handle);
function handle(evt) {
if (evt.target.dataset.numinput) {
const inp = document.querySelector(`#num`)
inp.value = ( +inp.value + +(`${evt.target.dataset.numinput}${inp.step}`) )
.toFixed(2);
}
}
<input id="num" type="number" step="0.1" readonly/>
<button data-numinput="-"> - </button>
<button data-numinput="+"> + </button>
I am currently trying to get a solution in order to simplify the login for my staff. Ideally I am looking for a js or jQuery script that pre-fills 2 input fields based upon the data they enter.
E.g. the main field should be: Enter token
IF the token equals 123 then fill input1 and input2 with certain amount of data, while if the token is 456 fill it with other data - if no token matches then do not fill any data. I know this is very unsecure but since it's something running only locally it would work for my specific needs.
<style>.hidden {display: none !important;}</style>
<form>
<input id="token" type="text">
<input class="hidden" id="input1" type="text">
<input class="hidden" id="input2" type="password">
<input type="submit">
</form>
Some advice would be greatly appreciated, thank you
Its pretty simple, You can get the desired result by using the conditional statement like if else.
here is the solution for your problem.
var token=$('#token').val();
if(token==123)
{
$('#input1').val('value1'); //set the value which you want to place here
$('#input2').val('value2'); //set the value which you want to place here
}
else if(token==456)
{
$('#input1').val('value1'); //set the value which you want to place here
$('#input2').val('value2'); //set the value which you want to place here
}
else {
$('#input1').val('');
$('#input1').val('');
}
You're basically wanting to add an input event listener to #token and set the values of the hidden inputs based on the value entered.
Something like this should suffice...
// make sure this script goes AFTER the HTML
// A map of token to values
const secrets = {
123: {
input1: 'input1 123',
input2: 'input2 123'
},
456: {
input1: 'input1 456',
input2: 'input2 456'
}
}
const input1 = document.getElementById('input1')
const input2 = document.getElementById('input2')
document.getElementById('token').addEventListener('input', e => {
const token = e.target.value
// get the values or if the token doesn't exist, sensible defaults
const secret = secrets[token] || {
input1: '',
input2: ''
}
input1.value = secret.input1
input2.value = secret.input2
}, false)
<form>
<input id="token" type="text" placeholder="Enter token">
<input class="hidden" id="input1" type="text">
<input class="hidden" id="input2" type="password">
<input type="submit">
</form>
Try the jquery code given below:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type="text/javascript">
$('#token').keyup(function() {
if($(this).val() == 123) {
$('#input1').val('1'); //assign the value you want
$('#input2').val('1'); //assign the value you want
} else if($(this).val() == 456) {
$('#input1').val('2'); //assign the value you want
$('#input2').val('2'); //assign the value you want
} else {
$('#input1').val('');
$('#input2').val('');
}
});
</script>
If I enter something into t1, t2 is changed.
But if t2 already has manual input, it is not changed any more (and vice versa).
How can I change an input field that has already an manual input with javascript (without reloading the page!)?
<!DOCTYPE html>
<html>
<body>
inputfields are not changed, if they have/had an input already!<br />
<br />
t1: <input type="text" id="t1" value="" onchange="upd1()"><br /><br />
t2: <input type="text" id="t2" value="" onchange="upd2()">
<script>
function upd1() {
t2.setAttribute("value", "changed");
return true;
}
function upd2() {
t1.setAttribute("value", "changed");
return true;
}
</script>
</body>
</html>
You can also save an old value of each field to continue editing. Also it will show editing status on another field each time. It will be more comfortable for users.
inputfields are not changed, if they have/had an input already!<br />
<br />
<input type="text" id="t1" value="" onClick="renderFirstEl()" onInput="upd1()"><br /><br />
<input type="text" id="t2" value="" onClick="renderSecondEl()" onInput="upd2()">
<script>
let firstElValue = '';
let secondElValue = '';
function upd1() {
let el = document.querySelector('#t2');
el.value = 'changed';
return true;
}
function upd2() {
let el = document.querySelector('#t1');
el.value = 'changed';
return true;
}
function renderFirstEl() {
let el = document.querySelector('#t1');
secondElValue = document.querySelector('#t2').value;
el.value = firstElValue;
}
function renderSecondEl() {
let el = document.querySelector('#t2');
firstElValue = document.querySelector('#t1').value;
el.value = secondElValue;
}
</script>
The simple answer is use this:
function upd1() {
t2.value = 'changed';
return true;
}
function upd2() {
t1.value = 'changed';
return true;
}
t1: <input type="text" id="t1" value="" onchange="upd1()"><br /><br />
t2: <input type="text" id="t2" value="" onchange="upd2()">
Value changes after you type in one of the inputs and press Enter.
Because as said here: https://www.w3schools.com/jsref/met_element_setattribute.asp .
"The setAttribute() method adds the specified attribute to an element, and gives it the specified value.
If the specified attribute already exists, only the value is set/changed."
I have two fields where the second field has a value and whatever value is entered in the first field is added to the second value.
Now when it is added and the number entered in the first field is deleted(erased with backspace) the value of the second field does not not return to it's original value. How do I go about this? Also I won't mind a better way to approach onkeyup in this situation
Html:
First: <input type="text" id="vala" onkeyup="sum();" />
Second: <input type="text" id="valb" value="12" />
JS:
function sum() {
var first = document.getElementById('vala').value;
var second = document.getElementById('valb').value;
var result = parseInt(first) + parseInt(second);
if (!isNaN(result)) {
document.getElementById('valb').value = result;
}
}
Working fiddle representation:
http://jsfiddle.net/wcvqby2g/
I think you're looking for
function sum() {
var first = document.getElementById('vala').value;
var second = document.getElementById('valb').defaultValue;
var result = (parseInt(first) || 0) + parseInt(second);
document.getElementById('valb').value = result;
}
where the defaultValue property of the input accesses the original value of the input, i.e. the one specified in the value attribute.
(updated fiddle)
It was overwritten.
You can store original value like this:
First: <input type="text" id="vala" onkeyup="sum();" />
Second: <input type="text" id="valb" value="12" data-default-value="12" />
...and add this to your JS:
else {
document.getElementById('valb').value = document.getElementById('valb').dataset.defaultValue;
}
Here's a fiddle: http://jsfiddle.net/andunai/wcvqby2g/5/
Notice that data-default-value becomes dataset.defaultValue
this is working solution--
First: <input type="text" id="vala" onkeyup="sum();" />
Second: <input type="text" id="valb" value="12" />
<script>
var second1=document.getElementById('valb').value;
var first1=document.getElementById('vala').value;
function sum() {
var first = document.getElementById('vala').value;
var second = document.getElementById('valb').value;
var result = parseInt(first) + parseInt(second1);
if (!isNaN(result)) {
document.getElementById('valb').value = result;
}
if(first == first1)
{
document.getElementById('valb').value= second1;
}
}
</script>
I am trying to create a simple JavaScript function. When someone inserts a number in an input field, the value of another field should change to that value. Here is what I have at the moment:
function updateInput(ish) {
fieldname.value = ish;
}
<input type="text" name="fieldname" id="fieldname" />
<input type="text" name="thingy" onchange="updateInput(value)" />
Somehow this does not work, can someone help me out?
You can't access your fieldname as a global variable. Use document.getElementById:
function updateInput(ish){
document.getElementById("fieldname").value = ish;
}
and
onchange="updateInput(this.value)"
for jQuery we can use below:
by input name:
$('input[name="textboxname"]').val('some value');
by input class:
$('input[type=text].textboxclass').val('some value');
by input id:
$('#textboxid').val('some value');
<input type="text" name="fieldname" id="fieldtobechanged" />
<input type="text" name="thingy" id="inputfield" />
I have used following code and it works instantly without any delay.
var timeoutID = null;
function findMember(str) {
document.getElementById("fieldname").innerHTML = str;
}
$('#inputfield').keyup(function(e){
clearTimeout(timeoutID);
timeoutID = setTimeout(findMember.bind(undefined, e.target.value), 500);
});