I can't figure out how to change form field values with the oninput or the onchange method. For example, I need to make one input field to change its value as soon as another input field is being changed. So I'm trying:
<input type="number" id="a" value="999.99" oninput="updateInput(value)"/>
<input type="number" id="b" value=""/>
<script>
$(document).ready(function updateInput(value) {
document.getElementById("b").value = document.getElementById("a").value;
});
</script>
It doesn't do anything. What am I doing wrong?
In another case, I need to change the value of a drop-down according to another drop-down (with an if clause). Since the simple script above doesn't work already, I don't even have a clue what to do about the second one...
There are a few issues here; the first one to sort out is where you're declaring your functions. Javascript has a concept of scope, which you can think of as kind of a container for declared variables. The reason your function isn't doing anything is because the definition of updateInput is locked away inside your jquery $(document).ready scope.
Once you take that definition out of the jquery wrapper, it's available to the global window scope - which is the one you're accessing in your oninput. I should point out that there are more flexible/useful ways to put an event listener on something, but what you have will work, if this is a simple use case.
function updateInput(value) {
document.getElementById("b").value = document.getElementById("a").value;
}
<input type="number" id="a" value="999.99" oninput="updateInput(value)"/>
<input type="number" id="b" value=""/>
Your function is undefined in the markup, because it is passed to the ready and scoped there. It will better to not pass the update function to the ready, but create inside it and attach that function to the input from code. Don't get every time the DOM elements, instead get once and use variables to keep them.
Also you have mixed jQuery approach with pure Javascript approach. I think it will be better to use one of them.
With jQuery
$(document).ready( function() {
const aInput = $("#a");
const bInput = $("#b");
aInput.on('input', function () {
bInput.val(aInput.val());
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="a" value="999.99"/>
<input type="number" id="b" value=""/>
With pure Javascript
window.onload = function() {
const aInput = document.getElementById("a");
const bInput = document.getElementById("b");
aInput.addEventListener('input', function() {
bInput.value = aInput.value;
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="a" value="999.99"/>
<input type="number" id="b" value=""/>
You have to define the updateInput() function outside of $(document).ready(), so that you can call it from the rest of your code, otherwise it is only scoped in there.
Secondly, the argument the function takes is never used, so I took the liberty of removing it.
Thirdly, to call this function as soon as the page is loaded, just call it inside $(document).ready() and you are good to go.
Here's a working example:
function updateInput() {
document.getElementById("b").value = document.getElementById("a").value;
}
$(document).ready(updateInput());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="a" value="999.99" oninput="updateInput()" />
<input type="number" id="b" value="" />
Related
My question is why my element is returning a value of null even with a value preassigned in my input tag.
<input type="number" name="minute" id="minute"
maxlength="2" max="2" placeholder="00" value="00" required>
I am using this code in my JS file.
var min = document.getElementById("minute");
Edit: I'm sorry guys I accidentally deleted it copying the code over. To clarify this variable is at the very top of my file where I am just declaring variables for use.
You most likely have your script running before your HTML is loaded. You can fix this two ways:
Place your <script> tag just before the closing </body> tag:
<script>
//Your code
</script>
</body>
Or put all your code inside a window.onload:
window.onload = function() {
//Your code
};
I am not able to unhide a button inside a form. Outside the form it is working.
Also, is there a better way to easily do what I am trying?
<script>
function action() {
document.getElementById('hidden').style.visibility = 'visible';
}
</script>
<input type="text" onChange="action();" id="textfield" name="textfield" />
<input type="button" style="visibility: hidden" id="hidden" value="i am here" />
I try to be careful with id names that I don't accidentally use key words with the id name. Try changing the id="hidden" to id="btnIAmHere". Also action is already a method of a form.
Another way to hide something is to set style.display="none". To make it visible again, set style.display="block"
The difference between these two ways to make something invisible is that setting the visibility doesn't remove the space the object took up.
just call the method like this :
<input type="text" onChange="window.action();" id="textfield" name="textfield" />
I'm not sure but I think it's because the scope is not the same.
See the fiddle
That is due to the function name action(). May be the <form> confuses the function name -action with the form attribute- action. Thus, to make it working, just rename the function to action1() for example and it will work.
See the js
function action1() {
document.getElementById('hidden').style.visibility = 'visible';
}
I have a simple bit of javascript code that I think should be working, but it isn't. The idea for now is basically just to change the content of a div when a number has been input to a box. I'll make it do something more complicated later, but I need it to work first.
So I have this HTML page:
<form>
<input type="text" name="here" onkeyup="revChange()" />
</form>
<div name="there"></div>
running with the following javascript:
var revChange = function () {
document.there.innerHTML = "<p>Thing</p>";
};
The result is that nothing happens when I enter anything in the input box, it just stays blank. I've tried using onchange, onkeypress, onblur, onkeyup, I've tried the function with brackets, without brackets, using arguments in the brackets (including this.value), I've tried putting several different things inside the function, I've even tried just calling the function directly from the script. No matter what I do, this function does not seem to want to do anything. I can not work out what is going on, so I would like some explanation if possible. Oh yea, and this is just pure javascript, not jQuery or anything.
document.there.innerHTML is not how you should reference a non form element. Give it an id, and use getElementById
You should change the name attribute on your div to an id, and use getElementById
<script type="text/javascript">
var revChange = function () {
document.getElementById("there").innerHTML = "<p>Thing</p>";
};
</script>
<form>
<input type="text" name="here" onkeyup="revChange()" />
</form>
<div id="there"></div>
this seems to be working at my end
<form>
<input type="text" name="here" onkeyup="revChange(this)" />
</form>
<div name="there" id="das"></div>
<script>
var revChange = function (abd) {
document.getElementById('das').innerHTML = abd.value;
};
</script>
Just change your function to:
var revChange = function (ref) {
document.getElementsByName("there")[0].innerHTML = ref.value;
};
Also change your html to:
<form>
<input type="text" name="here" onkeyup="revChange(this)" />
<div name="there"></div>
</form>
This should work.
What are the pros/cons between the following two ways of passing/setting variables?
<input type="password" name="pw1" id="pw1" onkeyup="return passwordCheck(document.getElementById('pw1'), document.getElementById('pw2'))"/
function passwordCheck(first, second){...
OR
<input type="password" name="pw1" id="pw1" onkeyup="return passwordCheck()"/
function passwordCheck(){
var first = document.getElementById('pw1')
var second = document.getElementById('pw2')...
It makes your html markup easier to read (and your js code). It (moreso) decouples your code from your markup. An even better approach would be to bind an event listener to the input by targeting the id. That way you have NO js in your markup.
edit to respond to comment: I was referring to the 2nd example (calling a function) being better, but overall it's better to do event binding. There are various methods to do it, here is an example:
<input type="password" name="pw1" id="pw1"/>
// ...
document.getElementByID('pw1').onkeyup = function() {
// do stuff
}
I have this field in one form:
<input type="text" name="promocode" id="promoCode" value="" style="width:24%" maxlength="5">
and this field in another form:
<input type="hidden" name="custom" class="promo" value="" />
How can I do, so whenever the value of #promoCode is changed, it will also change the value of .promo
Currenlty, I have this:
var promo = $("#promoCode").val();
$("#promoCode").change(function(){
$('.promo').val(promo);
});
But that doesn't work.
$(function(){
$("#promoCode").change(function(){
$('.promo').val(this.value);
});
});
Make sure the DOM is ready when you attach your callback to the change event
this inside callback is the element the event attached to.
If you cache #promoCode value outside the change callback it will be out of sync right after the first change! use this.value inside the callback just like I did.