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.
Related
This question has two parts. The first takes precedence. Note I am new to HTML and JS, so please be verbose in your explanation.
1.) I have a form tag, inside which I have an input tag and a button, like so. The idea - which one may or may not be stylistically inclined to, is to have the user enter text, but bind it when clicking the button. This work:
<script>
var text;
</script>
<div>
<form>
<p>
<label>Text goes below</label>
<input id="in" type="text" placeholder="type stuff here">
</p>
<p>
<button id = "aButton" onclick="text=document.getElementById('in').value"></button>
</p>
</form>
</div>
The problem is, onclick also just feels like refreshing the page, meaning the user can no longer see what they have written down.
So question one is: how to stop this behavior (e.g. onclick only binds to the value and does not refresh the page so the text stays in the input field)
note: autocomplete="off" doesn't work
question two is how one would do this via event listening?
This code is working...
You were using button... that was causing the form to get posted... You need to use <input type="button">
I have placed your code to be called after click in a function and called that function.
<script>
var text;
function clickme() {
text=document.getElementById('in').value;
console.log(text);
}
</script>
<div>
<form>
<p>
<label>Text goes below</label>
<input id="in" type="text" placeholder="type stuff here">
</p>
<p>
<input type="button" value="Click Me" onclick="clickme()"></input>
</p>
</form>
</div>
Second part : Doing it via event listening
To do that via event listening you need to add following piece of code.
I'm using jQuery for that. Even if you don't know jQuery, i would say it's pretty much self explantory.
$('#id_of_your_button').click(function () {
//the code which you want to execute
});
//Consider using jquery... it handles cross browser issues well and makes things simpler
//or without jquery
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
});
Note
If you are adding event handler's via listening to event, you need to remember that you are adding the event handler code after the window load event.
$(window).load(function () {
$('#id_of_your_button').click(function () {
//the code which you want to execute
});
});
This is done to ensure that before attaching any handler to element, that particular element is present in DOM and loaded.
You should change your code as follows:
<button id = "aButton" onclick="return funcText()"></button>
<script>
var text;
function funcText() {
text = document.getElementById('in').value;
return false;
}
</script>
This will prevent the page refresh but I don't know how to do this via event listening...
I have tried a bunch of different things as well as searching and googling but I just can't see how to make some very basic code work.Trying to let the user submit text input.
This code below should just change the first paragraph to say working.
<HTML>
<CENTER>
<BR>
<H1>Test</H1>
<BR>
<p id="ParaOne"></p>
<BR>
<input type="text" id="TextInput" Value="" onsubmit="Test">
<script>
var CharOne = ["name"]
function Test() {
document.getElementById("ParaOne").innerHTML = "Working";
}
document.getElementById("ParaOne").innerHTML = "Enter Name:";
</script>
</HTML>
Ideally I would able to save whatever they entered into a variable and then display the entered name but as of now I can't get anything to work. not even a basic function to update the paragraph to sy working.
There is no onsubmit event for the textbox. You can use that event on the form (which I don't see in your question). Although not required, I would also add a submit button, because that's a better design.
Also it's wasteful to assign an initial value to ParaOne in JavaScript, simply type the value inside the element.
<form onsubmit="Test();">
<p id="ParaOne">Enter Name:</p>
<input type="text" id="TextInput">
</form>
<script>
function Test() {
document.getElementById("ParaOne").innerHTML = "Working";
}
</script>
Important note: Although the code above is how you should do it, I don't really see the point. The form will be submitted immediately after changing the text of ParaOne which will reload the page and you will see the initial value again (and probably think it didn't work). It will work but very fast so nobody will really see it, so what's the point?
You can use the javascript methods onchange or onkeydown to trigger input from the input field, you don't need to submit a form. But in case you needed just that I added the example. I used jQuery instead of plain javascript to write the functions because now they practically become one-line functions.
onchange will wait for the user to press enter or for the input element to loose focus to call the function.
onkeydown will call the function on every key press.
e.preventDefault() cancels the default action of the element, which in this case is a submit action, and lets us make the decision through code whether to submit or not.
Below are some javascript/jQuery test functions and a sample HTML file so you can test out what works best for you.
EDIT: I added some examples on how to store the current value of an input field into a variable
// get the Value of input element directly into a variable
var myVariable = $('#theInput_1').val();
// myVariable will return empty string since the input element is empty
console.log('This is the starting value of the 1st input element: ' + myVariable);
// Function for onkeydown test
function testKeyDown()
{
// stored in a variable which is not available outside the function
var myVariable = $('#theInput_1').val();
$('#paraOne').text(myVariable);
// test output - $('#theInput_1').val() will return empty
console.log('This is the changed value of the 1st input element: ' + myVariable);
}
// Function for onchange test
function testOnChange()
{
$('#paraTwo').text($('#theInput_2').val());
}
// Function for submit test
$( "#submit" ).on( "click", function(e)
{
e.preventDefault(); // Prevents default action of submit
$('#paraThree').text($('#theInput_3').val());
});
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<p id="paraOne">This text will be replaced on success.</p>
<input type="text" id="theInput_1" onkeydown="testKeyDown();" size="50" value="" placeholder="onkeydown test" />
<p id="paraTwo">This text will be replaced on success.</p>
<input type="text" id="theInput_2" onchange="testOnChange();" size="50" value="" placeholder="onchange test" />
<p id="paraThree">This text will be replaced on success.</p>
<form>
<input type="text" id="theInput_3" size="50" value="" placeholder="form submit test" />
<input type="submit" id="submit" value="Submit me" />
</form>
</body>
</html>
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="" />
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 this simple code that speaks for itself.Here it is:
<script language='javascript">
function check() {}
</script>
<div id="a">input type="text" name="b">
<input type="button" onClick=" check(); ">
All i want is that when i press the button, the text field gets a value updated to it.
I tried using b.value=" C " but it doesnt seem to work.
<script language="javascript">
function check() {
document.getElementById('txtField').value='new value here'
}
</script>
<input id="txtField" type="text" name="b"> <input type="button" onClick=" check(); ">
This will do. I gave it an ID, and used getElementById('txtField') using the id, and updated it's value.
You seem to be thinking that giving a form input a name attribute makes it addressable as though it were a global variable. It doesn't. There is a syntax for that, and you would have to use something like:
document.forms[0].b.value = "C";
in order to get to address it successfully. You are putting your form elements inside a form, aren't you?
Do it that way, or use an ID along with the getElementById method, as mplacona suggests.