Trying to set radio button checked when click on textarea.
There is a label for radio button and inside the label there is a textarea so what i need is that when clicking on the textarea to write the input will be checked.
<input type="radio" name="msg_form" id="invite0" value="0" <? if ($msg_form == 0) { echo 'checked'; } ?>>
<label for="invite0">
<textarea class="selfmessage" for="invite0" oninput="replaceName(this)" style="height: auto !important;" name="self_invite" type="text" placeholder="write something..."></textarea>
</label>
You can use keyup or input or change or focus or whatever you like as a trigger. here is a list of often used trigger
$('.selfmessage').on('focus', function(e) {
$('#invite0').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="msg_form" id="invite0" value="0"><label for="invite0">
<textarea class="selfmessage" for="invite0" style="height: auto !important;" name="self_invite" type="text" placeholder="write something..."></textarea>
</label>
You can achieve this by using parent() to get the label wrapping the textarea, then prev() to get the input and prop() to set it to checked:
$('.selfmessage').on({
'focus': function() {
$(this).parent().prev(':radio').prop('checked', true);
},
'input': replaceName
});
function replaceName() {
// your logic here...
}
.selfmessage {
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="msg_form" id="invite0" value="0">
<label>
<textarea class="selfmessage" name="self_invite" type="text" placeholder="write something..."></textarea>
</label>
Note that the functionality of the label here is pretty much entirely redundant given your example code. I only left it in in case your UI styling depends on it. If it doesn't I'd suggest removing it.
Also note that I removed the oninput event attribute and changed it to an unobtrusive handler, and also changed the inline styling to external CSS. Inline JS and CSS should always be avoided where possible.
$('.selfmessage').on('keyup', function(e) {
if($('.selfmessage').val().length>0){
$('#invite0').prop('checked', true);
}else{
$('#invite0').prop('checked', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="msg_form" id="invite0" value="0"><label for="invite0">
<textarea class="selfmessage" for="invite0" style="height: auto !important;" name="self_invite" type="text" placeholder="write something..."></textarea>
</label>
Add a keyup event to textarea then check the textarea empty or not. if not empty enable checkbox else diable it.
$('#id-textarea').click(function(){
$("#id-checkbox").attr("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<input type="checkbox" id="id-checkbox"/>
<textarea id="id-textarea"></textarea>
</html>
Related
I'm trying to have a checkbox next to a form text-input field. The checkbox can be ticked on/off normally, however when clicking on the text-input field, the checkbox should be automatically ticked as well.
I tried this with putting the text-input inside the label for the checkbox, but it doesn't work. It works fine when I use normal text instead of the input-field:
<input type="checkbox" id="box">
<label for="box">
<input type="text">
</label>
How can I achieve this with HTML/JS? I'm working in the context of a VueJS plugin.
The click action of <input> (focus & start editing) overrides <label>'s, so you'll have to use JS:
document.querySelector('#text').addEventListener('click', ()=>{
document.querySelector('#box').checked=true
})
<input type="checkbox" id="box">
<input type="text" id="text">
you can use jquery to achieve this:
HTML:
<input type="checkbox" id="box">
<label for="box"></label>
<input type="text" id="mytextinput">
JQuery:
$('#mytextinput').focus(function(){
$('#box').prop( "checked", true ); // true checks the checkbox false unchecks.
});
Simply add a listener to the text input that checks the box.
const checkbox = document.querySelector('#box');
const input = document.querySelector('input[type="text"]');
input.addEventListener('click', () => {
checkbox.checked = true;
});
<input type="checkbox" id="box">
<label for="box">
<input type="text">
</label>
You can do this easily by setting an onclick attribute on text field like:
<input type="checkbox" id="box">
<label for="box">
<input type="text" onclick="box.checked = true">
</label>
document.querySelector("#box").addEventListener('click',function(){
document.querySelector("#checkbox").checked = true;
});
<div>
<input type="checkbox" id="checkbox">
<input type="text" id="box">
</div>
I have an checkbox "Cut image" which will on select expand four more check-boxes (up, left, right, down) where you can select where image will be cut.
By default, these expanded check-boxes are selected.
What I want to achieve is:
If "cut image" checkbox is selected (and by default all other expanded check-boxes) append text value "Cut image: up, left, right, down" to textarea
If one of the expanded check-boxes are not selected (lets say "up"), remove it's value from appended text in textarea, and show only selected ones, "Cut image: left, right, down"
Html
<input type="checkbox" id="cut-image">
<label for="">Cut image</label>
<div id="main-group">
<input type="checkbox" class="cut-image-up" checked>
<label for="">up</label>
<input type="checkbox" class="cut-image-left" checked>
<label for="">left</label>
<input type="checkbox" class="cut-image-right" checked>
<label for="">right</label>
<input type="checkbox" class="cut-image-down" checked>
<label for="">down</label>
</div>
<textarea name="" id="checkbox-values" cols="20" rows="10"></textarea>
Javascript
$(function(){
$('#cut-image').on('change', function(){
$('#main-group').toggle();
if($(this).is(':checked')){
$('#checkbox-values').val('Cut image (up, left, right, down)');
}else{
$('#checkbox-values').val('');
}
});
})
Here is an jsfiddle also.
I would appreciate any suggestions on how to achieve this behavior.
Thanks.
There are always about a billion ways to do things like this. It seems to me like you need a couple of things:
A way to associate each checkbox with its direction
Something that listens for changes in the checkboxes -- as they are checked and unchecked
Every time a checkbox is changed, we grab all the checked checkboxes, and reattach the directions to the textbox
Here's an updated version. Note the slightly different HTML...
$(function() {
$('#cut-image').on('change', function() {
$('#main-group').toggle();
if ($(this).is(':checked')) {
setCheckboxValues();
} else {
$('#checkbox-values').val('');
}
$('.cut-image').on('change', function() {
setCheckboxValues()
})
});
})
function setCheckboxValues() {
const allCheckedText = $('input.cut-image:checked').map(function() {
return this.value;
}).get()
$('#checkbox-values').val(`Cut image (${allCheckedText.join(', ')})`);
}
#cut-image,
#main-group,
#checkbox-values {
display: block;
margin: 10px 0;
}
#main-group {
display: none;
margin: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cut-image">
<label for="">Cut image</label>
<div id="main-group">
<input type="checkbox" class="cut-image" checked value="up">
<label for="">up</label>
<input type="checkbox" class="cut-image" checked value="left">
<label for="">left</label>
<input type="checkbox" class="cut-image" checked value="right">
<label for="">right</label>
<input type="checkbox" class="cut-image" checked value="down">
<label for="">down</label>
</div>
<textarea name="" id="checkbox-values" cols="20" rows="10"></textarea>
This won't completely take care of all the various scenarios but will give you a good start point
Add values to the checkboxes and build array of those values using jQuery map(). Then join() those array values to add to the text
<input type="checkbox" class="cut-image-up" value="up" checked>
JS
$('#cut-image').on('change', function() {
$('#main-group').toggle();
if ($(this).is(':checked')) {
// array of checked checkbox values
var directions = $('#main-group :checkbox:checked').map(function() {
return this.value
}).get().join(', ');
$('#checkbox-values').val('Cut image (' + directions + ')');
} else {
$('#checkbox-values').val('');
}
});
DEMO
I have a button which looks like an on off Button
Button is by default on but when user will click it should get off and when it is clicked it should disable the input field
my button is as
Button
<input type="checkbox" class="make-switch" id="on_off" name="double_optin" checked data-on-text="on" data-off-text="off">
Input field which i want to be disabled if above button clicks
<div class="col-md-4 FullName">
<input type="text" class="form-control" name="email" value="{{ isset($student->email) ? $student->email : '' }}" required />
</div>
My Jquery code is as
$('#on_off').click(function(){
$('.FullName').prop('disabled', true);
});
I took above help from Disable Input field
Help Please its not working for me
First of your code is missing something. Like the control with class FullName
You can get the value of the checkbox by using $('#on_off').is(':checked') or in this case $(this).is(':checked') because we are using $('#on_off') click event.
Since you dont have a "Fullname" class anywhere in your example I added email to the Id field of the input
$('#on_off').click(function() {
$('.FullName [name="email"]').attr('disabled', $(this).is(':checked') ? false : true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="make-switch" checked id="on_off" name="double_optin" data-on-text="on" data-off-text="off">
<div class="col-md-4 FullName">
<input type="text" class="form-control" name="email" value="disable me by click on checkbox" required />
</div>
Please try this code.
Here is your updated code:
<input type="checkbox" class="make-switch" id="on_off" name="double_optin" checked data-on-text="on" data-off-text="off">
<div class="col-md-4 FullName">
<input type="text" class="form-control" name="email" value="{{ isset($student->email) ? $student->email : '' }}" id= "email"required />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#on_off').change(function() {
//alert();
if ($(this).prop('checked')) {
$('.FullName input').prop('disabled', false);
}
else {
$('.FullName input').prop('disabled', true);
}
});
});
</script>
Hope, this may help you.
use .attr('disabled',true) or .removeAttr('disabled') instead of .prop('disabled', true); if not working.
This is the easiest you can get.
Create a checkbox. In click event of checkbox, pass its state as a boolean to buttons disabled value.
Though I would suggest to use ready made toggle button. Link is here
$(document).ready(function(){
$(":checkbox").change(function(){
$(":button").prop("disabled",$(this).is(":checked"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=checkbox />
<input type=button value=Target />
Given the following code (yes, i know it is perhaps irrelevant in yii, but I added the tag so I update the question with the actual generated html):
<script>
$(function(){
$('#widgetId-form input[name="valueType"]').change(function(){
if ($(this).is(":checked"))
{
console.log("habilitando "+$(this).data("class"));
$("."+$(this).data("class")).prop("disabled", false);
}
else
{
console.log("deshabilitando "+$(this).data("class"));
$("."+$(this).data("class")).prop("disabled", true);
}
}).change();
});
</script>
<div id="widgetId-dialog">
<form id="widgetId-form" action="/support/test" method="post">
<div>
<input id="valueType-single" value="single" data-class="singleValueField" checked="checked" type="radio" name="valueType" />
<label for="single">Valor simple</label>
<input size="6" class="singleValueField" type="text" value="" name="singleValue" id="singleValue" />
</div>
<div>
<input id="valueType-range" value="range" data-class="rangeValueField" type="radio" name="valueType" />
<label for="range">Rango (inicio:fin:intervalo)</label>
<input size="6" class="rangeValueField" type="text" value="" name="rangeValue_start" id="rangeValue_start" />:<input size="6" class="rangeValueField" type="text" value="" name="rangeValue_end" id="rangeValue_end" />:<input size="6" class="rangeValueField" type="text" value="" name="rangeValue_interval" id="rangeValue_interval" />
</div>
</form>
</div>
It doesn't trigger change() when a radio becomes unchecked. This implies: controls are disabled only on initialization (.ready()). change() is not triggered individually by controls losing the checkmark.
Question: how can I detect when a radio button loses the checkmark?
This is a conceptional problem. The radio buttons are seen somehow like one element. For closer information look at Why does jQuery .change() not fire on radio buttons deselected as a result of a namesake being selected?.
So the change-event will always only fire on the newly selected element and not on the deselected radios. You could fix your code like this:
$(function(){
$('#widgetId-form input[name="valueType"]').change(function(){
//could be also hardcoded :
$('input[name="' + $(this).attr("name") + '"]').each(function(){
if ($(this).is(":checked"))
{
console.log("habilitando "+$(this).data("class"));
$("."+$(this).data("class")).prop("disabled", false);
}
else
{
console.log("deshabilitando "+$(this).data("class"));
$("."+$(this).data("class")).prop("disabled", true);
}
});
});
$('#widgetId-form input[name="valueType"]:first').change();
});
You can check it at http://jsfiddle.net/jg6CC/. Greets another Luis M. ;)
Basically, I have two radio button 'yes' and 'no' and then a further two input fields.
[LabelQuestion] [RadioYes][RadioNo]
If yes, then... [TextField1]
If no, then... [TextField2]
By default I would like to have text fields 1 and 2 inactive/not able to enter in data until the relevant radio button has been selected and then that field only becomes available for data input.
I am a complete novice but I imagine this is achievable by using CSS and/or JavaScript. Please bear in mind I have next to know knowledge of JavaScript but can logically alter pre-existing JS code.
My current code looks like this:
<div class='conlabel'>Have you started trading yet?</div>
<table width="100">
<tr>
<td><label>
<input type="radio" name="example" value="Yes" id="example_0" required/>
Yes</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="example" value="No" id="example_1" required/>
No</label></td>
</tr>
</table>
<li>
<div class='conlabel'>If Yes, then:</div>
<input type="text" name="field1" placeholder="" />
</li><br>
<div class='conlabel'>If No, then:</div>
<input type="text" name="field2" placeholder="" />
</li><br>
How about this little number:
$(function(){
$("#example_0, #example_1").change(function(){
$("#field1, #field2").val("").attr("readonly",true);
if($("#example_0").is(":checked")){
$("#field1").removeAttr("readonly");
$("#field1").focus();
}
else if($("#example_1").is(":checked")){
$("#field2").removeAttr("readonly");
$("#field2").focus();
}
});
});
You'll find a JSFiddle here.
Please note I've added an ID to both <input> fields. Let me know how it fairs.
If you prefer for the <input> fields to be disabled rather than readonly, just replace readonly with disabled everywhere. I personally think readonly is nicer as the Operating System seems to make more of it's own effect on disabled inputs.
The focus(), of course, isn't necessary - But the little things make a big difference and I always prefer it when a website moves my cursor to where it's expected to be for me.
You could use http://jquery.com/ to do this:
include this in the head of your html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
And also add this javascript:
<script type="text/javascript">
$(document).ready(function () {
function checkradiobox(){
var radio = $("input[name='example']:checked").val();
$('#field1, #field2').attr('disabled',true);
if(radio == "Yes"){
$('#field1').attr('disabled',false);
$("#field1").focus();
}else if(radio == "No"){
$('#field2').attr('disabled',false);
$("#field2").focus();
}
}
$("#example_0, #example_1").change(function () {
checkradiobox();
});
checkradiobox();
});
</script>
Check the jsfiddle for a working example http://jsfiddle.net/KFgbg/3/
Add this javascript/jQuery to your html, this should do the trick:
<script type="text/javascript">
$(function () {
// First add disabled properties to inputs
$("input:text").prop('disabled', true);
// Yes Input
$("#example_0").on("click", function () {
$("#input1").prop('disabled', false);
$("#input2").prop('disabled', true);
});
// No Input
$("#example_1").on("click", function () {
$("#input2").prop('disabled', false);
$("#input1").prop('disabled', true);
});
});
</script>
Very basic, just adds an onclick function to each of the inputs and enables or disables the 'disabled' property for the relevant text input. You will need to add the "#input1" and "#input2" ID's to the text inputs, naming can be as desired obviously.
<div class='conlabel'>Have you started trading yet?</div>
<table width="100">
<tr>
<td><label>
<input onclick="document.getElementById('field1').disabled=false;document.getElementById('field2').disabled=true;"" type="radio" name="example" value="Yes" id="example_0" required/>
Yes</label></td>
</tr>
<tr>
<td><label>
<input onclick="document.getElementById('field1').disabled=true;document.getElementById('field2').disabled=false;" type="radio" name="example" value="No" id="example_1" required/>
No</label></td>
</tr>
</table>
<li>
<div class='conlabel'>If Yes, then:</div>
<input type="text" id="field1" name="field1" placeholder="" disabled="true" />
</li><br>
<div class='conlabel'>If No, then:</div>
<input type="text" id="field2" name="field2" placeholder="" disabled="true" />
there are many ways to do this, but to edit your code as little as possible, here's one way:
give your textboxes ID attributes as well as names
disable via html attribute both text boxes to start
onclick of 'yes' radio button, enable field1 and disable field2
onclick of 'no' radio button, disable field1 and enable field2
<script language="Javascript">
function hideA()
{
document.getElementById("A").style.visibility="hidden";
document.getElementById("B").style.visibility="visible";
}
function hideB()
{
document.getElementById("B").style.visibility="hidden";
document.getElementById("A").style.visibility="visible";
}
</script>
</head>
<body>
<form name="f1" method="post" action="">
<table>
<tr><th>catagory</th><th><input type="radio" name="cat" value="seller"
onClick="hideB()">Seller
<input type="radio" name="cat" value="buyer" onclick="hideA()"> buyer</th>
</tr>
<div style="position: absolute; left: 30px; top: 100px;visibility:hidden" id="A">
Seller Name<input type='text' name='sname'><br>
Seller Product<input type='text' name='sproduct'>
</div>
<div style="position: absolute; left: 30px; top: 100px; visibility:hidden" id="B">
Buyer Name<input type='text' name='bname'><br>
Buy Product<input type='text' name='bproduct'>
</div>
</form>