How do I disable the textarea onclick of the checkbox?
<p>What caused the damage?</p>
<textarea rows="5"></textarea>
<input type="checkbox">
<label>I don't know</label>
This code should work as what you intend to achieve.
$('#checkbox').on('click', function(){
if($("#checkbox").is(":checked")){
$('#textArea').val('');
$('#textArea'). attr('disabled','disabled');
}else{
$('#textArea').removeAttr('disabled');
}
}
);
Using the disabled property of a <textarea> liike <textarea disabled>.
let checker = document.getElementById("checker");
let textInput = document.getElementById("textInput");
checker.addEventListener('click', () => textInput.disabled = checker.checked);
<p>What caused the damage?</p>
<textarea id="textInput" rows="5"></textarea>
<input type="checkbox" id="checker">
<label>I don't know</label>
The HTML Markup consists of a CheckBox and a TextBox which is by default disabled using the disabled attribute. The CheckBox has been assigned a JavaScript OnClick event handler.
When the CheckBox is clicked, the EnableDisableTextBox JavaScript function is executed. Inside this function, based on whether CheckBox is checked (selected) or unchecked (unselected), the TextBox is enabled or disabled by setting the disabled property to false or true respectively.
<script type="text/javascript">
function EnableDisableTextBox(chkPassport) {
var txtPassportNumber = document.getElementById("txtPassportNumber");
txtPassportNumber.disabled = chkPassport.checked ? false : true;
if (!txtPassportNumber.disabled) {
txtPassportNumber.focus();
}
}
</script>
<label for="chkPassport">
<input type="checkbox" id="chkPassport" onclick="EnableDisableTextBox(this)" />
Do you have Passport?
</label>
<br />
Passport Number:
<input type="text" id="txtPassportNumber" disabled="disabled" />
var textArea = document.querySelector('#text-area');
var checkbox = document.querySelector('#cbox');
function toggleTextArea() {
var disabled = textArea.getAttribute('disabled');
if (disabled) {
textArea.removeAttribute('disabled');
} else {
textArea.setAttribute('disabled', 'disabled');
}
}
checkbox.addEventListener('click', toggleTextArea);
<p>What caused the damage?</p>
<textarea rows="5" id="text-area"></textarea>
<input type="checkbox" id="cbox">
<label for="cbox">I don't know</label>
I just added a JavaScript that selects the text area and enable and disable it based on what your checkbox
<script>
var flagChk = document.getElementById("chk");
function disableBox(){
document.getElementById("myTextArea").disabled = chk.checked;
document.getElementById("myTextArea").enabled = chk.unchecked;
}
</script>
<p>What caused the damage?</p>
<textarea rows="5" id="myTextArea"></textarea>
<input type="checkbox" onclick="disableBox()" id="chk">
<label>I don't know</label>
$('#checker').click(function(){
if($("#checker").is(":checked")){
$('#textInput').attr('disabled',true).val("");
}else{
$('#textInput').attr('disabled',false);
}
});
Related
<input type="radio" name="T" id="twenT">20
<input type="radio" name="T" id="sixT">60
<input id="uIn"></input>
<button onclick="function()">
How do I make it so that the user selects one option or inputs text and then the text message changes to the text that was selected/entered.
Pure JavaScript is preferred.
Try this
I changed to name="T" to make them valid radios
I also closed the A to make it valid. If you want to click the link and change, then we can remove the button
const href = "sms://+15552345678;?&body="
const sms = document.getElementById("sms");
const uIn = document.getElementById("uIn");
document.getElementById("changeMsg").addEventListener("click",function(e) {
const val = document.querySelector("input[name=T]:checked");
if (val) {
sms.href = href.split("body=")
.join(`body=${encodeURIComponent(val.value)}&uIn=${encodeURIComponent(uIn.value)}`)
console.log(sms.href)
}
else {
console.log("radio not checked")
}
})
<input type="radio" name="T" value="twenT">20
<input type="radio" name="T" value="sixT">60
<input id="uIn" type="text" value="" />
<a id="sms" href="sms://+15552345678;?&body=CHANGE%20THIS">Call us</a>
<button id="changeMsg" type="button">Change</button>
I want to disable by a textbox using a class name and id. Can someone tell me why this doesn't work. It works if I get the elements by just an Id.
function disableText() {
var textbox = document.getElementByClassName("text");
if (document.getElementById("check").checked == true) {
textbox[0].disabled = true;
} else {
textbox[0].disabled = false;
}
}
<input type="checkbox" id="check" value="check" onclick="disableText()">
<input class="text" type="textbox">
Two typos and no trigger are the problem.
Typos:
getElementByClassName should be getElementsByClassName (plural Elements)
disable should be disabled (past tense)
Trigger:
onchange, onclick, oninput then ="disableText()" on the checkbox
function disableText() {
var textbox = document.getElementsByClassName("text");
if (document.getElementById("check").checked == true) {
textbox[0].disabled = true;
} else {
textbox[0].disabled = false;
}
}
<input type="checkbox" id="check" value="check" onclick="disableText()">
<input class="text" type="textbox">
Or to not use checkbox validation at all just set disabled to checkbox value
function disableText() {
var textbox = document.getElementsByClassName("text");
textbox[0].disabled = document.getElementById("check").checked;
}
<input type="checkbox" id="check" value="check" onclick="disableText()">
<input class="text" type="textbox">
You can do it in just one line, without JS inside HTML code.
check.onclick = () => {document.getElementsByClassName("text")[0].disabled = check.checked};
<input type="checkbox" id="check" value="check">
<input class="text" type="textbox">
I'm trying to display required fields on click with javascript. I have large form and inside of that form I have some required fields. Idea is to have button so that user can click (like toggle) and see only required fields?
So far my approach is something like this:
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {} else document.getElementById('ifYes').remove();
}
<button onclick="javascript:yesnoCheck();" id="yesCheck">Click</button>
<div id="ifYes">
<input type="text" name="usrname" required>
</div>
<div>
<input type="text" name="company" required>
</div>
What is the best way to this?
In case you really want to toggle the optional fields, you could just hide all optional elements in form (like in this example).
Keep in mind that yu may want to change the css selector to have more control what elements you want to hide.
eg:
form input:not([required]),
form select:not([required]),
form textarea:not([required]), ....
You may also want to not just hiden those fields but style them differently (opacity or something like that).
function toggleOptionalFields() {
document.querySelectorAll('form > :not([required])').forEach(field => field.hidden = !field.hidden);
}
<form>
<input required value="i am required" />
<input />
<select required>
<option value="1">required! :)</option>
</select>
<input />
<input />
<input required value="i am required too" />
</form>
<button onclick="toggleOptionalFields()">Toggle optional fields</button>
Also this function will not in IE because querySelectorAll().forEach and the arrow function are not supportet.
You could easily change that by using a regular function instead of the arrow-function and iterate differenttly thru the elementlist (eg, for(;;) or [].forEach.call(document.querySelectorAll(), function(element) {...});, ...).
Show and hide optional fields using button click
function toggleOptional(event){
var button = event.currentTarget;
var action = button.getAttribute('data-action');
//var optionalFields = document.querySelectorAll("form input:not([required])");
var optionalFields = document.querySelectorAll("form :not([required])");
if(action == "hide"){
optionalFields.forEach(function(value){
value.style.display = "none";
});
button.setAttribute('data-action','show');
button.innerText = "Show Optional ";
} else {
optionalFields.forEach(function(value){
value.style.display = "inline-block";
});
button.setAttribute('data-action','hide');
button.innerText = "Hide Optional";
}
}
input,textarea,select {
width : 70vw;
}
<button onclick="toggleOptional(event)" data-action="hide" >Hide Optional</button>
<form>
<input type="text" name="usrname" placeholder="usrname" required>
<input type="text" name="phone" placeholder="phone" required >
<input type="text" name="company" placeholder="company" >
<select name="birthyear" required >
<option value="">Select Year of Birth</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
<textarea required name="description" placeholder="description" ></textarea>
</form>
If you want to do it in javascript then here is a simple solution
Javascript
function yesnoCheck() {
var x = document.getElementById("ifYes");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
CSS
#ifYes{
display: block;
}
You can take a boolean variable and toggle its value and show or hide your elements based on it.
var toggleIfYes=false;
function yesnoCheck() {
toggleIfYes=!toggleIfYes
if (toggleIfYes) {
//show the elements
} else{
//hide the elements
}
}
<button onclick="javascript:yesnoCheck();" id="yesCheck">Click</button>
<div id="ifYes">
<input type="text" name="usrname" required>
</div>
<div>
<input type="text" name="company" required>
</div>
You could wrap all fields in the container like <div> or <form>
HTML
<div class="container">
<input required />
<input />
<input required />
</div>
then your toggle button function should toggle a class in the container
Javascript
function yesnoCheck() {
let container = document.querySelector('.container')
container.classList.toggle('only-required')
}
now you can use CSS to hide the non-required field if the container has a class only-required
CSS
.container.only-required input:not([required]) {
display: none;
}
You're using document.getElementById('ifYes').remove() which removes the element from the DOM. This way you won't be able to recover your element when you click the toggle button again. Also, you're verifying a <button/> element as if it were an <input type="checkbox" /> so you might want to use a checkbox instead.
You'd be better off using document.getElementById('ifYes').style.display = 'none' as it fits best in this situation:
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.display = 'none';
}
else {
document.getElementById('ifYes').style.display = '';
}
}
<input type="checkbox" onclick="javascript:yesnoCheck();" id="yesCheck">Click</input>
<div id="ifYes">
<input type="text" name="usrname" required>
</div>
<div>
<input type="text" name="company" required>
</div>
I want to pass the value 9112232453 of one textfield to another.
I know I need Javascript for this but I don't know how to do it.
HTML
<form method = "post" action="">
<input type="checkbox" name="phone" value="9112232453" onclick='some_func();' >
<input type="text" name="phone" value="" id="phone">
<input type="submit" name="Go">
</form>
Then later, I want to use the value in my php.
You could use a JS. function to take param (this.value) like:
<script>
var some_func = function (val){
var input = document.getElementById("phone");
input.value = val;
}
</script>
<form method = "post" action="">
<input type="checkbox" name="phone" value="9112232453" onclick='some_func(this.value);' >
<input type="text" name="phone" value="" id="phone">
<input type="submit" name="Go">
</form>
The best way is to not obtrude the HTML code with Javascript event handlers.
So, you can add a DOMContentLoaded event listener to the document, and as soon as DOM is loaded:
You add a change event listener to the input[type=checkbox], and then:
1.1. If the checkbox is checked, then you change the input#phone's value to its value
1.2. If not, then you empty the input#phone's value.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('cbphone').addEventListener('change', function(e) {
var phone = document.getElementById('phone');
if (this.checked) {
phone.value = this.value;
// you can even enable/disable the input#phone field, if you want to, e.g:
// phone.disabled = false;
}
else {
phone.value = '';
// phone.disabled = true;
}
});
});
<form method="post" action="">
<input type="checkbox" name="cbphone" id="cbphone" value="9112232453">
<input type="text" name="phone" id="phone">
<input type="submit" name="Go" value="Go">
</form>
before submit form use validation and check whether the field value is filled up or not. if yes get value of the field.
if(document.getElementBy("fieldIdfirst").value!="")
{
document.getElementBy("fieldIdSecond").value=document.getElementElementById("fieldIdfirst");
}
Thanks it..
Try this: http://jsfiddle.net/yhuxy4e1/
HTML:
<form method = "post" action="">
<input type="checkbox" name="phone" value="9112232453" onclick='some_func();' id="chk_phone">
<input type="text" name="phone" value="" id="txt_phone">
<input type="submit" name="Go">
</form>
JavaScript:
some_func = function() {
var checkBox = document.getElementById('chk_phone');
var textBox = document.getElementById('txt_phone');
textBox.value = checkBox.value;
}
Am trying to get the value of the hidden input fields on every click of a radio button. I have just posted a single div. I have a multiple div with same structure. I have successfully obtained the value of radio button but I want to get the value of hidden input now.
<div class="QA">
<h1> First Question</h1>
<input type="radio" id="check" name="q" value="A">Options 1</input>
<input type="radio" id="check" name="q" value="B">Options 2</input>
<input type="radio" id="check" name="q" value="C">Options 3</input>
<input type="radio" id="check" name="q" value="D">Options 4</input>
<input type="hidden" id="result" value="B" />
<br/>
<div id="result"></div>
</div>
<script>
$(document).ready(function() {
$("input:radio").change(function() {
checkResult(this);
});
});
function checkResult(el)
{
$this=$(el).parent("div.QA");
$this.slideUp();
}
</script>
Maybe you could try removing the hidden input entirely and indicate the correct answer using a data-* attribute. Something like:
<div class="QA" data-answer="B">
Then in your checkResult function you could retrieve this value using
function checkResult(el)
{
$this=$(el).parent("div.QA");
var answer = $this.data("answer");
$this.slideUp();
}
function checkResult(el)
{
$this = $(el).parents("div.QA");
$this.slideUp();
var x = $this.find('#result').val(); //find value of hidden field in parent div
}
Change your markup
multiple id's should not be used. Use class instead.
<input type="radio" id="check" name="q" value="A">Options 1</input>
to
<input type="radio" class="check" name="q" value="A">Options 1</input>
var $hidden=$(el).siblings("input[type='hidden']");
BTW you have lot of elements with same ID, not good
You can get the value of the hidden element by it's id.
var hiddenValue = $("#result").val();
You can use this in hidden function
function checkResult(el)
{
var hiddenValue = $("#result").val();
alert(hiddenValue);
}