I'm pretty new to JavaScript and I'm having an issue using it to remove a CSS property.
Here is what I'm trying to do:
I'm trying to have a text input box invisible when a checkbox is unchecked, and make it visible when the box is checked. Here is the code I have:
<html>
<head>
<script>
if (document.box.test.checked == true)
{document.getElementById("test").style.display == "";
}
</script>
<body>
<form name="box">
<input type="checkbox" name="test" value="engraved">Engraved?
</form>
<div id="test" style="display:none">
<p>Engraving Message here:</p>
<form>
<input type="text" name="engraving-text" value="Type here">
</form>
</div>
</body>
</html>
Any and all help is greatly appreciated. Thanks everyone!
You can use the onchange event on the checkbox
<input type="checkbox" name="test" value="engraved" onchange="show_hide()">
and then toggle the input box
function show_hide()
{
if (document.box.test.checked) {
document.getElementById("test").style.display = "block";
} else {
document.getElementById("test").style.display = "none";
}
}
JSFiddle for testing
There are 2 problems here.
the script you wrote changes the display to "" which will still show
the text box it should be display="none";
the script will not run every time a person changes the value of the check-box.
try this.
Encapsulate your check into a function and then add the function to the body onload event and the checkbox's oncchage event.
<script>
function checkHideTextField()
{
if (document.box.test.checked == true)
{
document.getElementById("test").style.display == "none";
}
}
</script>
<body onload="checkHideTextField()">
<form name="box">
<input onchage="checkHideTextField()" type="checkbox" name="test" value="engraved">Engraved?
</form>
<div id="test" style="display:none">
<p>Engraving Message here:</p>
<form>
<input type="text" name="engraving-text" value="Type here">
</form>
</div>
</body>
</html>
Related
I want to show an input when a checkbox is checked. So, I have created a js function to do it and when I write that function on the HTML file it works. But I want to write that function into an external Javascript file an use it from there. How can I do it?
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Complement Selection</title>
</head>
<body>
<form class="formComplement" action="../php/complementSelectionSave.php" method="POST">
<div class="mainContainer">
<input type="checkbox" name="hood" id="hood" onclick="showInput()">
<label for="hood">Hood</label><br>
<div class="inputBox" id="hoodNum" style="display:none">
<input type="number" name="hoodNumber" id="hoodNumber" required="" value="">
<label for="hoodNumber">Number of Hoods</label>
<br>
</div>
</div>
<br><br><br>
<input type="submit" value="Next" class="nextButton"/>
</form>
<script src="showInput.js"></script>
</body>
</html>
Javascript file:
function showInput() {
var checkBox = document.getElementById("hood");
var inputBox = document.getElementById("hoodNum");
if (checkBox.checked == true) {
inputBox.style.display = "block";
} else {
inputBox.style.display = "none";
}
}
EDIT: It appears this error:
showInput.js:4 Uncaught TypeError: Cannot read property 'checked' of
null
at showInput.js:4
If only thing why you need javascript here is to change class, to show / hide element than instead what you can do is to write code in pure css and html, using input:checked to change visibility.
Also nextButton should be targetable by css, like element or its parent is same lvl and after input
#hood:checked ~ .nextButton {
display: block;
}
.nextButton {display: none;}
<input type="checkbox" name="hood" id="hood">
<label for="hood">Hood</label><br>
<input type="submit" value="Next" class="nextButton"/>
Try onchange instead of onclick, and clear up the HTML - the function works as intended! :)
function showInput() {
var checkBox = document.getElementById("hood");
var inputBox = document.getElementById("hoodNum");
if (checkBox.checked == true) {
inputBox.style.display = "block";
} else {
inputBox.style.display = "none";
}
}
<form class="formComplement" action="" method="POST">
<div class="mainContainer">
<input type="checkbox" name="hood" id="hood" onchange="showInput()">
<label for="hood">Hood</label><br>
<div class="inputBox" id="hoodNum" style="display:none">
<input type="number" name="hoodNumber" id="hoodNumber" required="" value="">
<label for="hoodNumber">Number of Hoods</label>
<br>
</div>
</div>
<br><br><br>
<input type="submit" value="Next" class="nextButton" />
</form>
(I deleted the action from the form, as it made no sense in the snippet.)
I have an HTML form where I am trying to get a text field to display certain text when I select one of the radio buttons. So far, I have it to where if I click the button it will display the proper text in the text field. My goal is to eliminate the "Click" button and have the text field display the text immediately when I select a radio button. How can I do this in Javascript?
I know that textfields have an 'OnKeyUp' event, but I can't seem to figure out if a radio button has some sort of similar thing that would allow me to determine when one is selected. I've tried OnChange and OnFocus events, but maybe I'm doing it wrong because I can't get those to work. Any and all suggestions are much appreciated.
This is what I have so far:
<HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testResults (form) {
var TestVar1 = form.input[0].checked;
var TestVar2 = form.input[1].checked;
if (TestVar1 == true) {
form.textbox.value = "red";
} else if (TestVar2 == true){
form.textbox.value = "blue";
} else if (TestVar1 == false && TestVar2 == false) {
form.textbox.value = "";
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="POST">Choose a Color: <BR>
<INPUT TYPE="radio" NAME="input" VALUE="red">red<P>
<INPUT TYPE="radio" NAME="input" VALUE="blue">blue<P>
<INPUT TYPE="button" NAME="button" VALUE="Click" onClick="testResults(this.form)">
<P>Selected:</P> <INPUT TYPE="text" ID="textbox" NAME="selected" VALUE=""></div><p>
</FORM>
</BODY>
</HTML>
Change the following two lines of code adding the onchange event:
TYPE="radio" NAME="input" VALUE="red" onchange="testResults(this.form)
TYPE="radio" NAME="input" VALUE="blue" onchange="testResults(this.form)
If that doesn't work, it may be your browser. document.getElementByID is an object except by all browsers
I got stuck to what I think is silly. But now I have tried every combination but not able to find out what is going on.
onclick inside input type radio is not working when I put input type inside a form. But when I delete form tag it works. Also I have seen a code where onclick work inside a form tag but not working when I write.
This is not working:
<html>
<head>
<script>
function action(str){
document.getElementById("test1").innerHTML=str
}
</script>
</head>
<body>
<form>
<input type="radio" value="ping" name="rb" onclick="action(this.value)">Ping
<input type="radio" value="card" name="rb" onclick="action(this.value)">Card
<input type="radio" value="temp" name="rb" onclick="action(this.value)">Temprature
<p id="test1">radio will be displayed here</p>
</form>
</body>
</html>
When I remove form it works.
change the name of your function action
try this :
<html>
<head>
<script type="text/javascript">
function action123(str){
document.getElementById("test1").innerHTML=str
}
</script>
</head>
<body>
<form>
<input type="radio" value="ping" name="rb" onclick="action123(this.value);">Ping
<input type="radio" value="card" name="rb" onclick="action123(this.value);">Card
<input type="radio" value="temp" name="rb" onclick="action123(this.value);">Temprature
<p id="test1">radio will be displayed here</p>
</form>
</body>
</html>
You shouldn't use inline event functions anymore. Use event listeners:
radios = document.getElementsByName("rb");
for(i=0; i<radios.length; i++) {
radios[i].addEventListener('click', function(e){
document.getElementById("test1").innerHTML = e.target.value;
});
}
JSFiddle
"action" seems to be a blocked namesspace for forms
try sth like
<script>
function otherName(str){
document.getElementById("test1").innerHTML=str;
}
</script>
<form name="form">
<input type="radio" value="ping" name="rb" onclick="otherName(this.value)" />Ping
<input type="radio" value="card" name="rb" onclick="otherName(this.value)" />Card
<input type="radio" value="temp" name="rb" onclick="otherName(this.value)" />Temprature
<p id="test1">radio will be displayed here</p>
</form>
http://jsfiddle.net/waeqT/
I am sure this is any easy question, but I can't figure out what I am doing wrong.
What I am trying to accomplish is when the checkbox is "checked" I want it to enable the textbox.
Here is my code.
<html>
<title> iSCSI Admin v0.1 </title>
<body>
<fieldset style="width:640px;">
<legend>
Enable textbox
<input type="checkbox" name="checkbox1" onclick="enabledisable()">
</legend>
<form name="form1">
Text:
<input type="text" name="textname" disabled>
</form>
</fieldset>
<script type="text/javascript">
function enabledisable() {
if (document.checkbox1.checked) {
document.form1.textname.disabled=false;
} else {
document.form1.textname.disabled=true;
}
}
</script>
</body>
</html>
Try this:
<input id="textname" type="text" />
function enabledisable() {
if (document.getElementById("Checkbox1").checked) {
document.form1.textname.disabled = false;
}
else {
document.form1.textname.disabled = true;
}
}
Ok you fixed the question. You need to put the checkbox in the form.
Try this:
<body>
<script type="text/javascript">
function enabledisable() {
if (document.form1.checkbox1.checked) {
document.form1.textname.disabled=false;
} else {
document.form1.textname.disabled=true;
}
}
</script>
<form name="form1">
<fieldset style="width:640px;">
<legend>Enable textbox <input type="checkbox" name="checkbox1" onclick="enabledisable()"></legend>
Text:
<input type="text" name="textname" disabled="true" >
</fieldset>
</form>
</body>
document.form1.textname.disabled='disabled';
document.form1.textname.disabled='';
http://jsfiddle.net/nqaJZ/
Note: I added -> id="checkbox1" to your checkbox field.
Note: I changed the if condition as well -> document.getElementById("checkbox1").checked
Note: I changed your code which enables / disables textfield as well -> document.form1.text.disabled=false;
notice I changed it from targetname (which was not there) to your textfield name which you had was "text.
Hope it helps.
iSCSI Admin v0.1
<body>
<fieldset style="width:640px;">
<legend>
Enable textbox
<input type="checkbox" id="checkbox1" name="checkbox1" onclick="enabledisable()">
</legend>
<form name="form1">
Text:
<input type="text" name="text" disabled>
</form>
</fieldset>
<script type="text/javascript">
function enabledisable() {
if (document.getElementById("checkbox1").checked) {
document.form1.text.disabled=false;
} else {
document.form1.text.disabled=true;
}
}
</script>
</body>
Hi I'm having some trouble getting this to work, pretty simple all I am wanting to do is show a div once my html form is submitted.
<head>
<script type="text/javascript">
function showHide() {
var div = document.getElementById(hidden_div);
if (div.style.display == 'none') {
div.style.display = '';
}
else {
div.style.display = 'none';
}
}
</script>
</head>
<body>
<form method="post" name="installer">
<label>Home Keyword</label>
<br />
<input type="text" name="hello" value="">
<br />
<input type="submit" value="" name="submit" onsubmit="showHide()">
</form>
<div id="hidden_div" style="display:none">
<p>Show me when form is submitted :) </p>
</div>
</body>
Any help would be much appreciated thank you :)
I think you're just missing quotes around "hidden_div" in your document.getElementById("hidden_div") call!
But actually, your page is probably posting back, resetting the state of the page and thus leaving hidden_div seemingly always in a hidden state -- are you intending on handling the form submission via AJAX?
If you want to see the intended behavior, you should move the showHide() call to the <form> element, and return false after it:
<form method="post" name="installer" onsubmit="showHide(); return false;">
and leave the submit button as:
<input type="submit" value="" name="submit" />
Also note that you haven't self-closed the <input /> button tag, or given any text to show inside it.
you need to put showhide function on form onsubmit instead of input
<form method="post" name="installer" onsubmit="showHide()">
you are also missing quotes as #Cory mentioned
I Hope this example works for you , I have used two different ways
first One for Hiding Form and second One for Showing DIV
document.forms['myFirstForm'].addEventListener('submit', function(event) {
// Do something with the form's data here
this.style['display'] = 'none';
event.preventDefault();
});
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<form action="" class="m-md-5 px-md-5" method="post" name="myFirstForm">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<button type="submit" class="btn btn-primary w-100 mt-5" onclick="myFunction()">Submit</button>
</form>
<div id="myDIV" class="2" style="display:none">
<h1>ThankYou</h1>
<h6>We will get back to you shortly on the same.</h6>
</div>