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.
Related
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 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.
I see in this example how I can change the id contents with an input button and it works fine:
Example:
<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
When I try to use this to update a select or checkbox it does not work? What can I use to achieve this result with a form element?
Non-Working Example:
<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = '2';
}
</script>
<p>Welcome to the site
<input type="checkbox" id="boldStuff" value="1" /></p>
<input type='button' onclick='changeText()' value='Change'/>
innerHTML change the HTML between the opening and closing tag. Since the input tag is a self closing tag (tag that end with />, even though it is valid in HTML5 to leave the / behind), there is no innerHTML.
If you want to change the value, just target the value property :
document.getElementById('boldStuff').value = '2';
You should set the element's checked, not its innerHtml. Setting the innerHtml is equivalent to doing:
<input type="checkbox" id="boldStuff" value="1">2</input>
which is invalid HTML.
If you want to set the checkbox to checked, do this:
document.getElementById('boldStuff').checked = true;
If you want to set the value, set the value (and not innerHTML):
document.getElementById('boldStuff').value = '2';
Most attributes can be found in this way, tho some must be gotten from element.getAttribute and set with element.setAttribute.
to make changes via innerHTML you first need to have a innerHTML value to change
so
document.getElementById('***').innerHTML="2";
the corresponding HTML would need to look similar to this:
<p id="***">some text</p>
I have a variable var somewhere along my js program. lets call it 'tempVar'.
I want to pass this variable when the button is being pushed. here is part of my code:
var TempVar=9;
<form id="boardButton" action="/test" >
<button id="joinBoardButton" >JOIN</button>
</form>
how can I pass to the page test the content of Tempvar?
You can use the onclick attribute. Then once in JavaScript you can then seek out the values you need. If they are on the page already you can use document.getElementById(someID) to get the element, then grab your value that way.
You can also use the this keyword to access the DOM element just clicked. See : what's “this” in javascript onclick?
EDIT :
As for getting a variable you alreday had, if it has a large scope you can just access it directly.
Another way of doing this, is to save the value you want to re-use in a hidden input of your site and re-use when needed.
Hope this helps!
Assuming var is defined globally (on the window object):
<form id="boardButton" action="/test">
<input type="hidden" name="var"/>
<button id="joinBoardButton" onclick="this.form.elements['var'].value=window.var">JOIN</button>
</form>
You can add an input hidden value to your form
<input id="var" type='hidden' name='country' value=''>
Then you can set the value with onclick when you submit the form :
<button id="joinBoardButton" onclick="this.document.getElementById('var').value=var" >JOIN</button>
This should submit the form with the TempVar in the query string: .../test?TempVar=ABC
<script>
var TempVar = "ABC";
function setVar() {
document.getElementById('TempVar').value=TempVar;
}
</script>
<form id="boardButton" action="/test" >
<input type="hidden" id="TempVar" name="TempVar" value=""/>
<input type="submit" id="joinBoardButton" value="JOIN" onclick="setVar();"/>
</form>