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';
}
Related
I know I can create several types of options, questions, checkboxes, and buttons using in HTML. How can I save the response a user enters and assign it to a variable? Here's the code I'm using right now:
HTML:
<input type="text" value="Hotel Name" id="questionOne"><h1 display="block">WHAT IS THE NAME OF THE HOTEL</h1><br>
<input type="button" value="HELLO" onclick="testFunction()">
JS:
function testFunction() {
prompt(document.getElementById("questionOne").value;);
}
Shouldn't it activate the function when the HELLO button is clicked, and then it identifies the response through the ID "questionOne" and creates a prompt with the variablev value? I don't understand why it's not working.
I'm new to JS and HTML so please don't go crazy if it's a simple answer. Thank you.
I think your problem is to do with where things are defined. Rather than using onclick, add an event listener in your js. e.g.
document.getElementById ("bar").addEventListener ("click", foo);
function foo() {
prompt(document.getElementById("questionOne").value);
}
and just change the button to have an id and get rid of the onclick:
<input type="button" id="bar" value="HELLO">
Well you can just add event Listener to your input.
Like
document.getElementById('questionOne').addEventListener('input',function(){
var somevariable = prompt(this.value,'');
});
That will save the answer of prompt to 'somevariable'.
I've searched about all I can. I'm trying to change the text of an input field using its name. I have found many ways to do it by ID like:
<script>
function changeValue(o){
document.getElementById('type').value=o.innerHTML;
}
</script>
<button id="technician" onclick="changeValue(this)">Technician</button>
<button id="developer" onclick="changeValue(this)">Developer</button>
<input type="text" id="type" name="type" value="change" />
But what I need to accomplish is for inputs without ID's.
Something along the lines of:
<script>
function changeValue(o){
document.getElementsByName('NAME').value=o.innerHTML;
}
</script>
<button id="technician" onclick="changeValue(this)">Technician</button>
<button id="developer" onclick="changeValue(this)">Developer</button>
<input type="text" name="NAME" value="change" />
Is there any way of accomplishing this?
UPDATE
I'm trying to expand on the javascript you guys helped me with.
The Snippet:
<script>
function changeValue(o){
document.getElementsByName('NAME')[0].value=o.innerHTML;
}
</script>
<span onclick="changeValue(this)" style="cursor: pointer;">One</span>
<span onclick="changeValue(this)" style="cursor: pointer;">Two</span>
<img src='image.gif' onclick="changeValue(this.src)" />
<input type="text" name="NAME" value="SOMETHING">
The spans are working correctly, although I don't actually need them. I will have all images once I figure this out.
I have tried a few ways, but what I can find is not directly related to my use.
The end goal is to get the img src into the text input with js, preferably somewhat how it already exists. I feel it's really close.
getElementsByName() returns a collection. use [] to access individual elements
ex :
function changeValue(o){
document.getElementsByName('NAME')[0].value=o.innerHTML;
}
document.getElementsByName('NAME') returns a list of elements by name. You need to provide the index as
document.getElementsByName('NAME')[0].value=o.innerHTML
Use document.querySelector like so
document.querySelector('input[name="NAME"]').value = o.innerHTML;
jQuery way
$('input[name="NAME"]').val("im changed!")
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 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>
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.