I'm trying to build a combined radio / text input for an "other" field in a form.
<input id="artist" type="radio" name="artist" value="Other">
<input id="other-artist" type="text" name="other_artist" placeholder="Other Artist"/>
I can't figure out how to click inside the text input and have the radio selected. I tried wrapping the text input in a label but that did not work.
you can add a onclick event to de input and check the radio like this.
<input id="artist" type="radio" name="artist" value="Other">
<input id="other-artist" type="text" name="other_artist"placeholder="Other Artist"
onClick="selectRadio()" />
and the js
selectRadio = () => {
var radio = document.getElementById("artist");
radio.checked = true;
}
example
hope this help.
Related
I have a check box that I want to enable these radio buttons. what I have does not work. how can I JS that?
im new. :(
var sipch = document.querySelector("input[name=sip]");
sipch.addEventListener( 'change', function() {
if(sipch.checked) {
document.getElementById("protocol").disabled=false;
} else {
document.getElementById("protocol").disabled=true;
}
});
<input type="checkbox" name="sip" onsubmit="goPFive(event)" method="get">do this?
<input type="radio" class="testD" name="protocol" value="udp" disabled checked/>UDP
<input type="radio" class="testD" name="protocol" value="tcp" disabled />TCP
group your radio input with fieldset then set disabled attribute at fieldset element
<fieldset id="radioWrapper" disabled>
<input type="radio" name="protocol" class="testD" value="udp"/>UDP
<input type="radio" name="protocol" class="testD" value="tcp" />TCP
</fieldset>
I would like to unselect a radio button when I click on the label and the following code only works as expected if I click on the button itself.
How to link the behaviour of the label to the button?
<label>
<input type="radio" name="choice" value="HTML" onMouseDown="this.__chk = this.checked" onClick="if (this.__chk) this.checked = false" /> Learn HTML
</label>
<label>
<input type="radio" name="choice" value="Java" onMouseDown="this.__chk = this.checked" onClick="if (this.__chk) this.checked = false"/> Learn JavaScript
</label>
Radio buttons don't work like you are thinking they do. To deselect one you need to either select another with the same name attribute or reset the form. The functionality that you are describing fits more with a checkbox than a radio button. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio for the specs. You may also want to take a look at this question/answer: Reset Particular Input Element in a HTML Form.
Also, there is no need to wrap your label tag around the input. The for attribute takes care of the linking.
If you want to de-select a radio button, you will need to reset the form.
form {
display: flex;
flex-direction: column;
}
<form>
<label for="ckb-01">
<input id="ckb-01" type="radio" name="choice" value="HTML" />
Learn HTML
</label>
<label for="ckb-02">
<input id="ckb-02" type="radio" name="choice" value="Java" />
Learn JavaScript
</label>
<label for="ckb-03">
<input id="ckb-03" type="radio" name="choice" value="Java" />
Learn CSS
</label>
<input type="reset" />
</form>
use the attribut for in the label
<label for='idHTML'>Learn HTML </label>
give the radio the id equivalent
<input id='idHTML' type="radio" name="choice" />
what do you mean by this.__chk
onMouseDown="this.__chk = this.checked"
onClick="if (this.__chk) this.checked = false"
if you wanna select just one you could use simply type radio with group the options with one name='choice'
if you want check and uncheck multiple choices you could use checkbox
After many attempts I finally managed to code a working solution with some javascript.
The problem is that as soon as the radio button is clicked its state changes. the previous value needs to be stored in order to know if it has to be unselected or not.
<main id="form">
<label >
<input type="radio" name="rad" id="Radio0" />Learn Html
</label>
<br><br>
<label>
<input type="radio" name="rad" id="Radio1" />Learn CSS
</label>
<br><br>
<label>
<input type="radio" name="rad" id="Radio2" />Learn Java
</label>
</main>
<script>
let buttons = document.querySelectorAll('#form input');
for (button of buttons){
button.dataset.waschecked="false";
button.addEventListener('click', myFunction, false);
}
function myFunction(e) {
if (e.originalTarget.dataset.waschecked == "false"){
for (button of document.querySelectorAll('#form input')){
button.dataset.waschecked = "false";
}
e.originalTarget.dataset.waschecked = "true";
e.originalTarget.checked =true;
}else {
for (button of document.querySelectorAll('#form input')){
button.dataset.waschecked = "false";
}
e.originalTarget.checked =false;
}
}
</script>
Any suggestion to improve this code is welcome.
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>
If radio one (#choice_one) is checked how to make input field one (#field_one) required and if radio two (#choice_two) is checked how to make input form two (#field_two) is required and remove required from input field_one using JS?
<input type="radio" id="choice_one">
<input type="text" class="form-control" id="field_one" name="item_name" value="">
<input type="radio" id="choice_two">
<input type="text" class="form-control" id="field_two" name="item_name" value="">
You can use clickevent :
$("#choice_one").on("click",function(){
var checked = $(this).prop("checked");
$("#field_one").prop("required",checked);
});
//and same thing with #choice_two
Or using a same function :
$("#choice_one,#choice_two").on("click",function(){
var checked = $(this).prop("checked");
$(this).next().prop("required",checked);
});
I have a group of radio buttons and a single text input field. When I click on the text input the radio buttons become unchecked using JavaScript, but when I type something into the form field and then reselect a radio button I can not get the text to be deleted. Here is my code so far, If someone could help me get the text box to clear all input when I select a radio I know im close.
<input type="radio" id="radio1" name="radios" checked>
<label for="radio1">$10</label>
<input type="radio" id="radio2" name="radios" >
<label for="radio2">$25</label>
<input type="radio" id="radio3" name="radios" >
<label for="radio3">$50</label>
<input type="radio" id="radio4" name="radios" >
<label for="radio4">$100</label>
<input type="text" id="textInput">
<script>
<!-- to remove radio on text input click-->
$('#textInput').click(function () {
$.each($('input[type=radio]'), function () {
$(this).removeAttr("checked");
});
});
<!-- to remove text on text radio button click-->
$('input[type=radio]').click(function () {
$.each($('#textInput'), function () {
$(this).removeAttr("input");
});
});
</script>
Just remove their value using val(). input isn't an attribute, it's a tag name.
$.each($('#textInput'), function () {
$(this).val("");
Just use .val(), also you don't need $.each
$('input[type=radio]').click(function () {
$('#textInput').val('');
});
You have to use .val("") to set the text box value to empty.
Try this,
$('#textInput').each(function () {
$(this).val("");
});