I am javascript learner and have been trying to do this
two radio buttons but1 but2
two text boxes box1 box2
What I need to do is
when but1 is selected, box1 should be editable and box2 should be readonly.
when but2 is selected, box2 should be editable and box1 should be readonly.
On page load both the text boxes should be readonly.
My code is as below
<style type="text/css">
.field-name {
color: #444;
font-family: verdana;
font-size: 0.85em;
line-height: 2em;
}
</style>
<script type="text/javascript">
function makeChoice() {
if (document.getElementById('but1').checked = true) {
document.getElementById('box2').readonly = true;
}
else if (document.getElementById('but2').checked = true) {
document.getElementById("box1").readonly = true;
}
}
</script>
<html>
<body>
<table>
<input type="radio" id="but1" name="vals" onclick="makeChoice()">
<input type="radio" id="but2" name="vals" onclick="makeChoice()">
<input type="text" id="box1" value="abcde">
<input type="text" id="box2" value="pqrst">
</table>
</body>
<html>
I do not want to disable the textboxes but make them readonly, so that on form submit i will have the textbox values that i can send to the server.
I do not know what mistake im doing here. Any help will be greatly appreciated. Thanks
You need to set the "readonly" attibute like this:
document.getElementById('box2').setAttribute('readonly','readonly')
and clear it like thisL
document.getElementById('box2').setAttribute('readonly','')
hope, this code would be of any help.
here is my try:
http://jsfiddle.net/ylokesh/AAAVp/1/
You're making a couple of mistakes.
First of all, your css and javascript code must be included into the <head> tag, which should be placed soon after <html>, before <body>.
Secondly your if statements are incorrect: with just one = sign you assign a value to a variable, you have to use two (or in this case three) of them to check the variables against a value, like this: if (something == value).
Lastly, you'd better use the functions setAttribute() and removeAttribute() to modify the values of the readonly attribute.
The complete code would be:
<html>
<head>
<style type="text/css">
.field-name {
color: #444;
font-family: verdana;
font-size: 0.85em;
line-height: 2em;
}
</style>
<script type="text/javascript">
function makeChoice() {
if (document.getElementById('but1').checked === true) {
document.getElementById('box2').setAttribute('readonly','readonly');
document.getElementById('box1').removeAttribute('readonly','');
}
else if (document.getElementById('but2').checked === true) {
document.getElementById('box1').setAttribute('readonly','readonly');
document.getElementById('box2').removeAttribute('readonly','');
}
}
</script>
</head>
<body>
<table>
<input type="radio" id="but1" name="vals" onclick="makeChoice()">
<input type="radio" id="but2" name="vals" onclick="makeChoice()">
<input type="text" id="box1" value="abcde">
<input type="text" id="box2" value="pqrst">
</table>
</body>
<html>
Basically, you're using = instead of == on your conditionals. Also, you always have to set readonly to false on the one of the boxes, or you'll end up with two readonly boxes after two clicks. Try this:
EDIT the attribute name is readOnly, not readonly. Code also edited to manipulate the attribute directly, instead of using setAttribute. See working version on jsfiddle:
function makeChoice() {
document.getElementById('box1').readOnly = document.getElementById('but2').checked
document.getElementById('box2').readOnly = document.getElementById('but1').checked
}
In your IF statements, you are setting a variable, not testing whether it is in one state or another. You need to use this:
if (document.getElementById('but1').checked == true) {
Note that there are two equals signs. This checks whether the two are the same. Basically, one equals sets, two equals compares. Of course change both IF statements to the two equals signs.
Also, you say that onload both should be readonly. To do this, add
readonly="readonly"
to the textboxes. And furthermore, you need to turn readonly off on the appropriate textbox when a radio button is clicked.
So, altogether:
<style type="text/css">
.field-name {
color: #444;
font-family: verdana;
font-size: 0.85em;
line-height: 2em;
}
</style>
<script type="text/javascript">
function makeChoice() {
if (document.getElementById('but1').checked) {
document.getElementById('box2').setAttribute('readOnly','readonly');
document.getElementById('box1').removeAttribute('readOnly','');
} else if (document.getElementById('but2').checked) {
document.getElementById('box1').setAttribute('readOnly','readonly');
document.getElementById('box2').removeAttribute('readOnly','');
}
}
</script>
<html>
<body>
<table>
<input type="radio" id="but1" name="vals" onclick="makeChoice()">
<input type="radio" id="but2" name="vals" onclick="makeChoice()">
<input type="text" id="box1" value="abcde" readonly="readonly">
<input type="text" id="box2" value="pqrst" readonly="readonly">
</table>
</body>
<html>
Related
I hop somebody here is able to help me out.
I would like to show a hidden div tag if a textfield is set to a value.
I tried to solve the problem by myself, but it's not working, can you help me out here?
Thanks in advance!
<script type="text/javascript">
if(document.getElementById("art").value == "test"){
document.getElementById("divDetails").style.display='block';
}
</script>
<input type="text" name="art" id="art" value="" class="form-control" style="height: 3em; font-size: 9px;">
<div style="display: none" id="divDetails">Here is the hidden text</div>
There are 2 problems with your solution.
First you are running the JavaScript code before the HTML is rendered, creating the error in your demo.
Second, you are executing the JavaScript validation just once when you should actually always run it when the input value changes.
Try this instead:
<input
type="text"
name="art"
id="art"
value=""
class="form-control"
style="height: 3em; font-size: 9px;"
oninput="checkDetailsVisibility()">
<div
style="display: none"
id="divDetails">Here is the hidden text</div>
<script type="text/javascript">
function checkDetailsVisibility() {
if(document.getElementById("art").value == "test"){
document.getElementById("divDetails").style.display='block';
}
else {
document.getElementById("divDetails").style.display='none';
}
}
</script>
Every time that the value of the input changes, the function checkDetailsVisibility gets executed and either show or hide the desired div.
What you have will only run once on execution, you need to check when the input is changed.
document.getElementById("art").addEventListener("input",()=>{
if(document.getElementById("art").value == "test"){
document.getElementById("divDetails").style.display='block';
}
})
I need to make 30 different text inputs slightly farther from one another. How could I do this? There are only three below, but I can't just go through and do all 30.
<!DOCTYPE html>
<html>
<head>
<title>Worksheet</title>
<style type="text/css">
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
input::placeholder{
color: #d9faa7;
}
</style>
</head>
<body>
<img src="A.png" class = "center">
<form>
<input type="text" id="fname" name="fname" size="2" style='position:absolute;top:210px;left:389px'>
<input type="text" id="fname" name="fname" size="2" style='position:absolute;top:210px;left:446px'>
<input type="text" id="fname" name="fname" size="2" style='position:absolute;top:210px;left:503px'>
</form>
</body>
</html>
the id should be unique, so better apply the attribute of class with the same name to all input fields, which can be used to style them.
also using loop in JS you can solve this problem.
let form = document.querySelector("form");
let node;
let textInputId;
for(let i=0;i<30;i++)
{
node = document.createElement('input');
textInputId= 'fname'+i;
node.setAttribute('id',textInputId);
node.setAttribute('type',"text");
node.setAttribute('name',"fname");
node.setAttribute('size',"2");
form.appendChild(node);
}
If you are going to be using the input elements to perform a certain action you need to make sure the id and the name of each of these elements are different.
And on the other hand, about making 30 different text inputs you can try using dynamic text input in the event that you want to enter text with the same id and name over and over again. Try researching on looping.
If you want to change the way something appears and just its appearance, just use some simple CSS...
input {
display: block,
margin: 5px,
}
The margin here is 5px, you can change as needed. In the end, you may decide to go with a better selector, i.e., <input type="text" ... class="myinputclass">, then your style selector would be: .myinputclass instead of just input.
I am trying to implement a small part of my program where when an initial checkbox is clicked, it would open multiple checkboxes are opened up for selection. I don't want to use forloop (or dynamically) to create the multiple checkboxes but I need to manually create them.
My program is below and I am not sure why it doesn't work. If someone can kindly pleaes point me to my mistake, I would greatly appreciate. I am not skilled with PHP/JavaScript.
Thanks!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
<script type="text/javascript">
$(document).ready(function() {
//set initial state.
$('#checkbox').val($(this).is(':unchecked'));
$('#checkbox').change(function() {
if($(this).is(":checked")) {
var box = document.createElement("div");
box.innerHTML = <input type="chkbox" name="checkme"> 2nd checkbox;
document.myForm.appendChild(box);
hasBox = true;
}
});
});
</script>
</head>
<body>
<p>Click on this paragraph.</p>
<form action="">
<input id="checkbox" name="click" type="checkbox" onclick="check(this)"/>initial checkbox<br>
</body>
</html>
You can also do this with CSS:
.secondary-checkboxes
{
display: none;
}
.primary-checkbox:checked ~ .secondary-checkboxes
{
display: initial;
}
<input type="checkbox" class="primary-checkbox"> Primary checkbox
<br>
<div class="secondary-checkboxes">
<input type="checkbox"> Secondary checkbox 1
<br>
<input type="checkbox"> Secondary checkbox 2
<br>
<input type="checkbox"> Secondary checkbox 3
<br>
</div>
Source: this Stack Overflow question
Your on the right track.
You have a few problems in your code.
1) You forgot to enclose your new checkbox tag within quotation marks.
box.innerHTML = <input type="chkbox" name="checkme"> 2nd checkbox;
should be:
box.innerHTML = "<input type=\"checkbox\" name=\"checkme\"> 2nd checkbox<br>";
Also note the change from type "chkbox" to "checkbox"
2) To set the initial state for a checkbox I would use the inbuilt prop function in JQuery. For example:
$('#checkbox').prop('checked', false);
rather than your code of:
$('#checkbox').val($(this).is(':unchecked'));
3) The last problem is when you append the new checkbox to the form. The way that i would do this is using JQuery again:
$("#myForm").append(box);
and give the form element an id of "myForm"
Please find below my full code which works to your requirements:
$(document).ready(function() {
//set initial state.
$('#checkbox').prop('checked', false);
$('#checkbox').on('click', function() {
if($(this).is(":checked")) {
var box = document.createElement("div");
box.innerHTML = "<input type=\"checkbox\" name=\"checkme\"> 2nd checkbox<br>";
$("#myForm").append(box);
hasBox = true;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<p>Click on this paragraph.</p>
<form action="" id="myForm">
<input id="checkbox" name="click" type="checkbox"/>initial checkbox<br>
</form>
Hope that you found this useful.
I have been using the following code to change the color of <p> depending upon the radio button checked.
I have been using two classes red and blue,
but its not working.
So kindly help me out.
<html>
<head>
<script type="text/javascript">
var ele = document.getElementsByName('color');
if (ele[0].checked) { //index has to be j.
$("p").toggleClass("blue");
}
else {
$("p").toggleClass("red");
}
</script>
<style type="text/css">
.blue
{
color:blue;
}
.red
{
color:red;
}
</style>
</head>
<body>
<input type="radio" name="color" value="blue">blue<br>
<input type="radio" name="color" value="red">red
<p>When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>
</body>
</html>
As such, your javascript will be executed before your elements even exist in the DOM. You should put your javascript code at the very end of the body, or include it in an event handler triggered when your document is loaded.
The HTML :
<input type="radio" name="color" value="blue">blue<br>
<input type="radio" name="color" value="red">red
<p id="myParagraph">When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>
In Vanilla JS :
document.addEventListener('DOMContentLoaded', function() {
var radioButtons = document.getElementsByName('color');
var paragraph = document.getElementById('myParagraph');
for(var i=0;i< radioButtons.length;i++)
{
var elem = radioButtons[i];
elem.addEventListener('change',function(e){
console.log(paragraph);
if(paragraph.className)
paragraph.className = this.value;
else
paragraph.classList.add(this.value);
}
,false);
}
});
Fiddle of this
Or, if you use jQuery and correctly include it in your page (which is not the case in your example) :
$('document').ready(function() {
$('input:radio').on('change',function(){
$('#myParagraph').addClass(this.value);
});
});
Fiddle of this
I have some HTML that includes two radio buttons. Depending on which radio button has been selected, I want to download one of two files. How can I do that?
Here's what I've tried so far:
<head>
<script type="text/javascript">
function downloadAddin(){
document.getElementById("bit32");
if (document.getElementById("bit32").checked) {
document.location.href="ECSSetup32.exe";
} else {
document.location.href="ECSSetup64.exe";
}
}
</script>
</head>
<form>
<p><input type="radio" id="bit32" name="arch" checked>Windows 32-bit
<br><input type="radio" id="bit64" name="arch">Windows 64-bit
<p>
<button type="submit" onclick="downloadAddin()"id="download_button"
style="background-color: #0078FF; padding: 1%; color: #ffffff; border:1px
solid; border-radius:10px; font-size:75%">Accept and Download</button>
</form>
I want users to be able to choose a radio button, press the "Agree and Download" button and then get one of the two .exe files they requested. Any ideas?
A simple JS code will do the job.
<input type="radio" name="download" id="x86"/>winrar x86 <br />
<input type="radio" name="download" id="x64"/>winrar x64 <br />
<input type="button" id="download" value="download"/>
var radio_x86 = document.getElementById('x86');
var radio_x64 = document.getElementById('x64');
var button = document.getElementById('download');
button.onclick = downloadFile;
function downloadFile() {
if(radio_x86.checked) {
window.open("http://www.rarlab.com/rar/wrar500.exe");
}else if(radio_x64.checked) {
window.open("http://www.rarlab.com/rar/winrar-x64-500.exe");
} else {
alert("Please check one of the options first.");
}
}
Fiddle example
EDIT: Fiddle: your own code
You don't need to wrap your input elements with <form> tag unless you're using post/get.