I am trying to update some text to say whether or not the checkbox is checked. the only problem is that when it is checked, the textbox disappears, and the text replaces it.
<form name="form" id="form">
<input type="checkbox" name="cb" id="cb" onClick="check();" />
</form>
<script type="text/javascript">
function check() {
document.write("checked: " + document.form.cb.checked);
}
</script>
What you are seeing is a side effect of using document.write. It is replacing the whole body of the document with the text you are writing. Try doing something like this instead.
<form name="form" id="form">
<input type="checkbox" name="cb" id="cb" onClick="check();" />
</form>
<div id="cb-status">checked: false</div>
<script type="text/javascript">
function check() {
document.getElementById('cb-status').innerHTML = "checked: " + document.form.cb.checked;
}
</script>
Bracket missing after html closing bracket for is(":checked") and string concat:
$(":checkbox").click(function(){
$("span#message").html("Checkbox is checked: " + $(this).is(":checked"));
});
You can use jQuery to make things easier for you:
Considering you have a checkbox:
<input type="checkbox" >
And a span element with an id=message:
<span id="message"></span>
Then, when you click on a checkbox, it will "write" in the span if it is checked or not.
$("document").ready(function(){
$(":checkbox").click(function(){
$("span#message").html("Checkbox is checked: " + $(this).is(":checked"));
});
});
See it in jsFiddle: http://jsfiddle.net/WNDUH/3/
Related
I am new to programming and I have a problem which probably is easy to solve, but I haven't been able to do so so far... So, I have a number checkboxes and by using jQuery I would like to determine which ones are checked and then get the value of their name tag ideally or their id. How can I do that? Thanks! :)
<input type="checkbox" name="something1">
<input type="checkbox" name="something2">
etc.
Try the below code.On click of checkbox the name of the checkbox is printed.
$(document).ready(function(){
$('input').change(function(){console.log($(this).attr('name'))})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="something1">
<input type="checkbox" name="something2">
You can select all selected checkboxes by using the following selector:
$("input[type='checkbox']:checked")
Then you can then loop over this using jQuery's .each() method and get each of the selected checkbox's name attribute by using .attr("name").
$(".btn").click(function() {
$("input[type='checkbox']:checked").each(function() {
console.log($(this).attr("name"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="something1" />
<br />
<input type="checkbox" name="something2" />
<br />
<button class="btn">Click me</button>
I read this article as suggested by an answer for a similar question. I did everything the article said, but the end result wasn't what I wanted.
I want the text box to be disabled by default. When the checkbox is checked, the textbox is enabled.
What happened was that the textbox is enabled by default, and when the checkbox is checked, the textbox is disabled.
Here is my code:
<td class="trow2">
{$prefixselect}<input type="text" class="textbox" name="subject" size="40" maxlength="85" value="{$subject}" tabindex="1" />
<input type="checkbox" class="input_control" value="subject" />
<strong>I believe {$forum['name']} is the best section for this topic.</strong>
</td>
<script type="text/javascript">
$(document).ready(function(){
$('.input_control').attr('checked', true);
$('.input_control').click(function(){
if($('input[name='+ $(this).attr('value')+']').attr('disabled') == false) {
$('input[name='+ $(this).attr('value')+']').attr('disabled', true);
}
else {
$('input[name='+ $(this).attr('value')+']').attr('disabled', false);
}
});
});
</script>
You can simplify your code:
$(document).ready(function () {
$('.input_control').change(function () {
$('input[name=' + this.value + ']')[0].disabled = !this.checked;
}).change();
});
Demo: http://jsfiddle.net/t5qdvy9d/1/
The checkbox and the input elements are siblings so you can use
$(document).ready(function () {
$('.input_control').prop('checked', true);
$('.input_control').change(function () {
$(this).siblings('input').prop('disabled', this.checked)
});
});
If you use jQuery 1.6 or later, you can use this way. Of course, it works with the textarea element also. The demo below includes textarea element too.
edited: add textarea element.
$(document).ready(function(){
$('.input_control').change(function () {
$(".textbox").prop('disabled', this.checked);
$(".textarea").prop('disabled', this.checked);
});
$('.input_control').prop('checked', true);
$('.input_control').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<input type="text" class="textbox" name="subject" size="40" maxlength="85" value="test subject" tabindex="1" />
<textarea class="textarea"></textarea>
<p></p>
<input type="checkbox" class="input_control" value="subject" />
<strong>I believe forum name is the best section for this topic.</strong>
Ok, The question here is to allow a form to grab information from a mysql settings, like enabled or disabled. then a checkbox is going to determine if the the 3 following text fields (box123) are going to be enabled or disabled depending on that request.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<form>
<input type="checkbox" name="detailsgiven" id="checker" checked=checked>Enabled?
<br>
<input type='text' name="details" id="tb1" value='box1'>
<br>
<input type='text' name="details" id="tb2" value='box2'>
<br>
<input type='text' name="details" id="tb3" value='box3'>
<br>
</form>
</body>
</html
>
test.js Jquery code which allows the check to be enabled or disabled depending on the activation varible
toggleInputs($('#checker'));
$('#checker').click(function () {
toggleInputs($(this));
});
function toggleInputs(element) {
if (element.prop('checked')) {
$('#tb1').prop('disabled', false);
$('#tb2').prop('disabled', false);
$('#tb3').prop('disabled', false);
} else {
$('#tb1').prop('disabled', true);
$('#tb2').prop('disabled', true);
$('#tb3').prop('disabled', true);
}
}
While you've already accepted an answer, I feel that answer over-complicated the solution somewhat, and left in unnecessary redundancy. That said, I'd suggest the following approach:
function toggleInputs(element) {
/* using a multiple selector
checking whether the check-box is checked or not using ':is()`,
which returns a Boolean */
$('#tb1, #tb2, #tb3').prop('disabled', element.is(':checked'));
}
$('#checker').change(function(){
// event-handling (reacting to the change event)
toggleInputs($(this));
/* the next change() (without arguments) triggers the change event,
and, therefore, the event-handling */
}).change();
JS Fiddle demo.
Amended the above function (using the ! operator) to have the fields editable while the input is checked, and disabled while the input is unchecked:
function toggleInputs(element) {
$('#tb1, #tb2, #tb3').prop('disabled', !element.is(':checked'));
}
$('#checker').change(function(){
toggleInputs($(this));
}).change();
JS Fiddle demo.
References:
:checked selector.
change().
is().
prop().
Here you go... Actually using jquery as your question asked:
HTML
<form>
<input type="checkbox" name="detailsgiven" id="checker" checked=checked>Enabled?
<br>
<input type='text' name="details" id="tb1" value='box1'>
<br>
<input type='text' name="details" id="tb2" value='box2'>
<br>
<input type='text' name="details" id="tb3" value='box3'>
<br>
</form>
JavaScript
$(document).ready(function() {
toggleInputs($('#checker'));
$('#checker').click(function () {
toggleInputs($(this));
});
});
function toggleInputs(element) {
if (element.prop('checked')) {
$('#tb1').prop('disabled', false);
$('#tb2').prop('disabled', false);
$('#tb3').prop('disabled', false);
} else {
$('#tb1').prop('disabled', true);
$('#tb2').prop('disabled', true);
$('#tb3').prop('disabled', true);
}
}
http://jsfiddle.net/Q9Lg4/40/
When the initial call is made the elements in the body are not yet loaded. You can wrap the first call to toggleInputs in a JQuery ready event function or place the script tag that includes test.js after the form.
Is it possible to have a group of inactive fields where if one of the fields is clicked some of the fields become mandatory and some segments of code are run? Say for example you have three fields which are shown:
<input type="text" id="gov1" name="gov1">
<input type="text" id="parentb" name="parentb">
<input type="checkbox" name="child" id="child">
All three of these fields are initially inactive; but say you click on one of the fields it now makes the rest active and mandatory, and some segment of code is run on the field "parentb" and it is attributed at readonly.
window.onload = function(event)
{
var $input2 = document.getElementById('dec');
var $input1 = document.getElementById('parentb');
$input1.addEventListener('keyup', function()
{
$input2.value = $input1.value;
});
}
I have done a bit of searching around but i can't seem to find anything of use for this specific situation and i'm quite new to JavaScript so any sort of help would be great. Is this at all possible using JavaScript? Or is something similar to this possible?
This method you are looking is called 'chained-select' method.
jQuery framework is used for example below:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<form action="" method="get">
<label>
<input name="Government" type="checkbox" value="">Government</label>
<br>
<label>
<input name="Parent" type="checkbox" id="parent_child_group" value="">Parent</label>
<br>
<label>Name of Child
<input type="text" name="parent_child" value="" class="parent_child_group"></label>
<br>
<label>Other
<input type="text" name="parent_other" value="" class="parent_child_group"></label>
</form>
<script type="text/javascript">
$(document).ready(function () {
$(function() {
enable_cb();
$("#parent_child_group").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
$("input.parent_child_group").removeAttr("disabled");
} else {
$("input.parent_child_group").attr("disabled", true);
}
}
});
</script>
</body>
</html>
Working example on JSFiddle: http://jsfiddle.net/farondomenic/fg7p8/1/
I don't really know much Javascript yet, I was hoping somebody could help me understand how to solve my problem:
My HTML form has a checkbox and then a textarea:
<form>
<input type="checkbox" name="detailsgiven" />
<textarea name="details"></textarea>
</form>
I want it so that the textarea gets disabled when the checkbox is ticked so that the user cannot click it and enter text.
I've had a look here and on google, I couldn't find any clear examples of how to do it.
I'm guessing this can be done in Javascript, but I'm feeling a bit out of my depth. Can somebody explain to me how to do this, preferably without using a third party library?
<form>
<input type="checkbox" name="detailsgiven" onchange="toggleDisabled(this.checked)"/>
<textarea name="details" id="tb1"></textarea>
</form>
<script>
function toggleDisabled(_checked) {
document.getElementById('tb1').disabled = _checked ? true : false;
}
</script>
This extremely easy to do with jQuery. Everyone uses jQuery, so should you ;-).
<form>
<input type="checkbox" name="detailsgiven" id="detailsgiven" />
<textarea name="details" id="details"></textarea>
</form>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#detailsgiven").change(function() {
if($(this).is(":checked")) {
$("#details").attr("disabled", "disabled");
}
else {
$("#details").removeAttr("disabled");
}
});
});
</script>
try this:
if ($('input:checkbox').is(':checked')) {
$('textarea').attr('disabled', 'disabled');
}
<form>
<input type="checkbox" name="detailsgiven" onclick="document.getElementById('t').setAttribute('disabled','disabled');" />
<textarea id="t" name="details"></textarea>
</form>
Notice how onclick event of checkbox is used to execute some javascript code.
if you give your html elements ids, you can access the elements in javascripts through getElementById method of javascript DOM (document object model).
And once you have the element, you can set/get it's attributes, do whole lot of things.
According to my understanding to your requirement. At first, textarea is disabled. When detailsgiven checkbox is checked, textarea is enabled and checkbox is disabled so that he cannot changed. Try like this.
<!DOCTYPE html>
<html>
<head>
<script>
function valueChanged()
{
var element1 = document.getElementById("detailsgiven");
var element2 = document.getElementById("details");
if(element1.checked)
{
element2.disabled=false;
element1.disabled="disabled";
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="detailsgiven" id="detailsgiven" onchange="valueChanged()"/>
<textarea name="details" id="details" disabled="true"></textarea>
</form>
</body>
</html>
All you have to do is when you mark the checkbox, just add the attribute disabled="disabled" in the textarea.
Checkout the jsfiddle I have added
http://jsfiddle.net/Q9Lg4/