Trying to find a solution that allows me to enable ALL fields in a form if the first radio button (Feedback) is changed to "On" but the page must load with Feedback defaulting to "Off". All of the fields must load in the disabled state. If Feedback is changed to "on", other fields should become enabled. And then of course, if Off is selected, the fields become disabled again.
I've tried many bits and pieces of code, trying to patch together a single solution but I can't figure it out. Many of the solutions are based on very old versions of jQuery, and I'm using a current version. Not that jQuery is a requirement, pure JavaScript would be fine (if possible).
Grateful for any help. Here's the code.
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<label>Feedback</label>
<input id="controlon" class="w3-radio" type="radio" name="feedback" value="on">
<label>On</label>
<input id="controloff" class="w3-radio" type="radio" name="feedback" value="off" checked>
<label>Off</label>
<hr />
<label>Name</label>
<input id="name" class="" type="text" name="text">
<label>Species</label>
<select id="species" class="" name="species">
<option value="0" disabled selected>- Select -</option>
<option value="1">Cat</option>
<option value="1">Dog</option>
</select>
<label>Age</label>
<input id="kp" class="" type="radio" name="age" value="on">
<label>Kitten/Puppy</label>
<input id="adult" class="" type="radio" name="age" value="off" checked>
<label>Adult</label>
<label>Comments</label>
<textarea id="comments" class="" rows="4"></textarea>
<button id="send" class="">Send</button>
</body>
</html>
Here is what ended up working for me
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="w3-container">
<label>Feedback</label>
<input id="controlon" class="w3-radio" type="radio" name="feedback" value="on">
<label>On</label>
<input id="controloff" class="w3-radio" type="radio" name="feedback" value="off" checked>
<label>Off</label>
</div>
<hr />
<div class="w3-container">
<label>Name</label>
<input id="name" class="" type="text" name="text" disabled>
<label>Species</label>
<select id="species" class="" name="species" disabled>
<option value="0" disabled selected>- Select -</option>
<option value="1">Cat</option>
<option value="1">Dog</option>
</select>
<label>Age</label>
<input id="kp" class="" type="radio" name="age" value="on" disabled checked>
<label>Kitten/Puppy</label>
<input id="adult" class="" type="radio" name="age" value="off" disabled>
<label>Adult</label>
<label>Comments</label>
<textarea id="comments" class="" rows="4" disabled></textarea>
<button id="send" class="" disabled>Send</button>
</div>
<script>
$('input:radio[name="feedback"]').change(function() {
if ($(this).val()=='on') {
$('#name,#species,#kp,#adult,#comments,#send').attr('disabled', false);
}
else if ($(this).val()=='off') {
$('#name,#species,#kp,#adult,#comments,#send').attr('disabled', true);
}
});
</script>
</body>
</html>
You might need to be more specific about exactly you want enabled or disabled. Here's the general idea:
if (document.getElementById("controlon").checked === true) {
document.getElementById('whatever').disabled = false;
// or get multiple elements by whatever you want
}
For multiple fields you can do something like:
var inputs = document.getElementsByClassName('whatever');
for(var i = 0; i < inputs.length; i++) {
inputs[i].disabled = false;
}
Detect change / jquery:
$( ".w3-radio" ).change(function() {
if ($('#controlon').is(':checked')) {
// apply the same class to everything you want enabled
$('.whatever').prop("disabled", false);
} else {
$('.whatever').prop("disabled", true);;
}
});
working example:
https://codepen.io/jfitzsimmons/pen/QRboYj?editors=1111
Related
I have this simple html form. with 3 radio box options.
The last radio box option is 'others'
I want the text box to input other reasons to appear only when then 'other's combo box is selected. is there any way to do that?
<html>
<body>
<div class="form-group">
<input type="radio" name="option" value="a"> Missing deadline.<br>
<input type="radio" name="option" value="b"> Unsatisfied with the work.<br>
<input type="radio" name="option" value="c"> No response from Accountant.<br>
<input type="radio" name="option" value="d"> Other reasons. <br>
<input autofocus type="text" id="reason" name="reason" placeholder="Please key in the reasons.">
</div>
<body>
</html>
Give it a try.
function showTextbox() {
document.getElementById("reason").style.display = "block";
}
<html>
<body>
<div class="form-group">
<input type="radio" name="option" value="a"> Missing deadline.<br>
<input type="radio" name="option" value="b"> Unsatisfied with the work.<br>
<input type="radio" name="option" value="c"> No response from Accountant.<br>
<input type="radio" name="option" value="d" onclick="showTextbox()"> Other reasons. <br>
<input autofocus type="text" id="reason" name="reason" placeholder="Please key in the reasons." style="display:none">
</div>
<body>
</html>
Here is a solution using jQuery, by setting an on-change event to the checkbox:
$("#test").change(function(){
$("#hidden").show()
});
#hidden {display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click Me
<input type="checkbox" id="test">
<div id="hidden">alec</div>
I'm trying to make a simple drop down menu which will have two elements: "male" and "female". I'm using a button to have these elements become visible. The problem is that they become visible but only for a fraction of a second and go back to being hidden.
Here's my code:
<html>
<head>
<title>
Validation Form
</title>
</head>
<body>
<h1>
Validation Form
</h1>
<form id="contactForm" action="" >
<fieldset>
<legend>Validation</legend>
<p>
<label for="firstname">First Name</label>
<input id="firstname" name="firstname" type="text"/>
</p>
<p>
<label for="lastname">Last Name</label>
<input id="lastname" name="lastname" type="text" />
</p>
<p>
<label for="gender">Gender</label>
<input id="gender" name="gender" type="text" />
</p>
<div class="dropdown">
<button id="btn_drop" onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" style="display: none">
<p id="drop_male">Male</p>
<p id="drop_female">Female</p>
</div>
</div>
<p>
<label for="website">Website</label>
<input id="website" name="website" type="text" />
</p>
<p>
<input type="button" id="submit" name="submit" value="Submit" />
<input type="reset" value="clear" />
</p>
</fieldset>
</form>
<script>
var dropBtn = document.getElementById("btn_drop");
dropBtn.onclick = function () {
// show all elements on clicking submit!
var drop = document.getElementById("myDropdown");
drop.style.display = 'block';
}
</script>
</body>
</html>
Look at you browser console. I assume you have an error because you didn't declare myFunction.
Please read this URL: http://www.w3schools.com/jsref/event_onclick.asp and use one of described approaches.
you can make this without javascript live fiddle with css
<p>
<label for="gender">Gender</label>
<select id="gender" name="gender" type='select' >
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</p>
I'm trying to create an online store and I would like for when someone selects something from the first drop down list e.g. (Meat Lovers pizza) I want it to display (Enjoy some delicious meat pizza) at the bottom of that drop down list and take away the select something option after that.
My code is in the following code snippet:
/* GLOBAL VARIABLES */
var theList;
var prices;
var meat;
var select;
window.onload = function () {
//var option = document.createElement ("option");
//option.textContent= theList;
//productList.appendChild (option);
//}
$('#theList').on('change', function () {
$("#meat").css('display', (this.value == '1') ? 'block' : 'none');
});
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="assignment2.css">
<H1> ASSIGNMENT 2- DOM Scripting - Pizza and Wings</H1>
</head
<body>
<div id="selection"><H4>PRODUCT SELECTION</H4>
Whats your fancy? <select id ="theList" name="theList">
<option id="select" value="0">Select product here</option>
<option id="meat" value="meat">Meat Lovers Pizza</option>
<option id="margaritta" value="margaritta">Margaritta</option>
<option id="" value="2">Pepparoni</option>
<option id="" value="3">Plain cheese</option>
</select>
<div style='display:none;' id='meat'>Meat
<br/>
<input type='text' class='text' name='meat' value size='20' />
<br/>
</div>
<div><h4>YOUR CHOICES</h4>
<div>Which one would you like? <div class="prices">
<input type="radio" id="price1" name="price" value="1"> $9.95 -small(6 slices)<br>
<input type="radio" id="price2" name="price" value="2">$12.95 -medium(8 slices)<br>
<input type="radio" id="price3" name="price" value="3">$15.95 -large(10 slices)<br>
<input type="radio" id="price4" name="price" value="4">$19.95 -party size(16 slices)<br></div>
</div>
<div> Any extras? <div> <input type="radio" id="price1" name="price" value="1"> thin crust $0.49<br>
<input type="radio" id="price2" name="price" value="2">whole wheat $0.95<br>
<input type="radio" id="price3" name="price" value="3">extra cheese $1.49<br></div></div>
How many? <input id="amount" type="text"><br> <div class="button">
<input type="button" class="btn" id="add" value="ADD TO ORDER">
<input type="button" class="btn" id="remove" value="REMOVE LAST ITEM">
<br>
</div>
<h4> ORDER STATUS </h4>
ITEMS: <input id="items" type="text">
TOTAL: <input id="credits" type="text"> <input type="button" class="btn" id="now" value="ORDER NOW"> <input type="button" class="btn" id="cancel" value="CANCEL">
</div>
<script type="text/javascript" src="assignment2.js"></script>
</body>
</html>
Thank you!
You have two elements currently with an ID of 'meat' and as ID's have to be unique so it will find the first one which is the option in the select list. I changed this to be 'meat-lover', and made the option values consistent.
For hiding the 'select product' option, I used a similar comparison to check if they selected anything other than that option and hid it if so.
$("#select").css('display', (this.value == '0') ? 'block' : 'none');
A couple of other things to note, the head tag is missing a closing angle brace and jQuery isn't currently defined on the code samples you provided but that might just be you creating the test case.
Here is a demo I put together of it in action: http://codepen.io/jjclane/pen/rOoyGY
If I select laptop radio button, the input text for computer should be not be enable to add any data and the the background should be grey instead of white.
Same logic if you select computer radio button and this time it would laptop.
I do not know how to create it.
Thanks!
<!DOCTYPE html>
<html>
<body>
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="device" value="laptop" checked>
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input type="text" value="" />
</span>
</BR>
<input id="computer" type="radio" name="device" value="computer">
<span class="radio-choice-name">
<label for="computer">computer</label>
<input type="text" value=""" />
</span>
</div>
</form>
</body>
</html>
give id's to the input's and then on selected radio buton disable the other input id for computer and enable the input for the laptop
$(document).ready(function(){
$('input[type=radio][name=sex]').click(function(){
var related_class=$(this).val();
$('.'+related_class).prop('disabled',false);
$('input[type=radio][name=sex]').not(':checked').each(function(){
var other_class=$(this).val();
$('.'+other_class).prop('disabled',true);
});
});
});
Simmilar Fiddle Example
Try something like below using jQuery:
HTML
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="sex" value="laptop" checked>
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input id="laptopVal" type="text" value="" />
</span>
</BR>
<input id="computer" type="radio" name="sex" value="computer">
<span class="radio-choice-name">
<label for="computer">computer</label>
<input id="computerVal"type="text" value=""" />
</span>
</div>
JAVASCRIPT
$( document ).ready(function() {
function handleClick(el) {
$('input[type=text]').css('background-color', 'grey');
$('input[type=text]').attr('readonly', 'true');
$('#' + el.attr('id') + 'Val').css('background-color', 'white');
$('#' + el.attr('id') + 'Val').attr('readonly', 'false');
}
handleClick($('#laptop'));
$("input:radio").click(function() {
handleClick($(this));
});
});
WORKING FIDDLE
You could do the following in jQuery. Let me know if you needed a pure javascript solution.
$(document).ready(function(){
$(".radio-group").on("change", ":radio", function() {
$(":text").prop("disabled", true);
$(this).next(".radio-choice-name").find(":text").prop("disabled", false);
});
});
input[disabled] { background-color: #eee }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="sex" value="laptop" checked />
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input type="text" value="" />
</span>
<br/>
<input id="computer" type="radio" name="sex" value="computer" />
<span class="radio-choice-name">
<label for="computer">computer</label>
<input type="text" value="" disabled />
</span>
</div>
</form>
I have done slight change to your html below, just added "class" attribute to input text and assigned value same as radio button values.
<!DOCTYPE html>
<html>
<body>
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="device" value="laptop" checked>
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input class="laptop" type="text" value="" />
</span>
<br>
<input id="computer" type="radio" name="device" value="computer">
<span class="radio-choice-name">
<label for="computer">computer</label>
<input class="computer" type="text" value="" disabled/>
</span>
</div>
</form>
</body>
</html>
Here is the javascript:
<script type="text/javascript">
$(function () {
$('input:radio').on('change', function(){
var value = $(this).val();
$('.radio-group').find('input[type=text]').attr('disabled', 'disabled');
$('.' + value).removeAttr('disabled');
}
);
});
</script>
I think you will find this very easy approach.
I have created a form and I am looking to get the data the user entered.
The javascript I have so far pulls in all the data. But also pulls both radio buttons although only one is checked.
Q1 How do I restrict the loop to not pull in both radio buttons but only the selected one?
Q2 How do I get if the check box is checked or not?
Q3 How do I get the data from a textarea?
Thanks in Advance,
JS
var myNodeList = document.getElementsByName('cf');
var myArray = []; // empty Array
for (var i = 0; i < myNodeList.length; i++) {
var self = myNodeList[i];
myArray.push(self);
}
console.log(myArray)
HTML
<!DOCTYPE html>
<html>
<head>
<title>Contact Me</title>
<link rel="stylesheet" type="text/css" href="contactform_Lab8.css">
</head>
<body>
<form id="contactus">
<fieldset>
<label for="name">Name:</label>
<input id="name" type="text" name="cf" autofocus required>
<label for="email">Email:</label>
<input id="email" type="email" name="cf" required>
<label for="phone">Phone:</label>
<input id="phone" type="tel" name="cf" required>
<label for="status">Status:
<select id="status" name="cf" required>
<option value="client">Client</option>
<option value="partner">Partner</option>
<option value="vendor">Vendor</option>
</select>
</label>
<label for="subscribe">
<input id="subscribe" type="checkbox" name="cf" value="check" checked>
Send me your newsletter</label>
<label for="sales">
<label for="support">
<input id="slsSupport" type="radio" name="cf" value="sales" checked>Sales
<input id="slsSupport" type="radio" name="cf" value="support">Support
</label>
</label>
<label for="msg">Message:</label>
<textarea id="msg" name="cf" rows="10" cols="30" required></textarea>
</fieldset>
<fieldset>
<button type="submit">Send</button>
<button type="reset">Reset</button>
</fieldset>
</form>
<script src="contactform_Lab8.js"></script>
</body>
</html>
Q1: Use the checked property on the element, and if it's not checked, advance to the next element.
Q2: See question #1
Q3: document.getElementById('msg').innerHTML;
You can just add an If statement to check the type of the element.
if(self.type === "radio" && self.checked){
myArray.push(self);
}
if(self.type !== "radio"){
myArray.push(self);
}