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>
Related
when the project name is entered, it populates in the same text field as the checked boxes text but at the top of the field.
I also want to create a button for sending the completed form if that's possible
html
<div class="name">
<form>
<label for="projectname">Project name:</label>
<input type="text" id="pname" name="pname"><br>
<br>
</div>
<br>
<div class="series1">
<tr><input type="checkbox" rel="textbox1" name="Cabinets" class=test/>
Cabinets</tr>
<input type="checkbox" rel="textbox1" name="Doors" />
Doors
<input type="checkbox" rel="textbox1" name="Drawers">
Drawers
<input type="checkbox" rel="textbox1" name="Drawer Fronts">
Drawer Fronts
<input type="checkbox" rel="textbox1" name="Handles">
Handles
</div>
<textarea id="textbox1" ></textarea>
js
$('input:checkbox').click(function(){
var tb = "#"+$(this).attr('rel');
let text_to_add = this.name + "\n";
//when click a checkbox and show checked items in the text area
if($(this).is(":checked")){
$(tb).append(text_to_add);
}else{
let remove = this.name +"\n";
//when a box is unchecked it clears the previously populated text from checkbox
$(tb).text(function(i, text){
return text .replace(text_to_add,'');
});
}
})
The solution i would come up with will be:
to store the exist value from the textarea everytime you change the text area value.
let existValue = ''
//inside the checkbox click function:
existValue = $(tb).val()
then to add an event listener to the input and everytime the input change to add the e.target.value to the exist value we created before
$('#pname').on('input', (e)=>{
$('#textbox1').val(`${e.target.value}\n${existValue}`)
})
here is a working example: working example
I made a very easy one HTML input column. I added JavaScript to it with a checkbox in it.
When I clicked check box checked I want write the text or unchecked the text box read only how to solve my problem. Give for example for my code
<input type="text" id="inputID" value="abc"></input>
<input type="checkbox" id="myCheck" checked>
<script>
document.getElementById('inputID').readOnly = true;
</script>
Add an event listener to the change event on the checkbox.
<input type="text" id="inputID" value="abc" readonly></input>
<input type="checkbox" id="myCheck" >
<script>
var checkbox = document.getElementById('myCheck');
checkbox.addEventListener('change', function() {
document.getElementById('inputID').readOnly = !this.checked;
});
</script>
Working fiddle
I know this is probably very easy! I have two radio buttons that ng-show a div with an input field if the 'site' radio button has been selected. The text input field is set to a ng-model called 'sitePostcode'. What I am trying to achieve is that if the 'solution' radio button is selected then 'sitePostcode' model will have 'solution' in it. And if the 'site' radio button is selected, then 'sitePostcode' will contain what ever was entered into the input box.
<div>
<input type="radio" ng-model="product.group" value="Solution">Solution
<input type="radio" ng-model="product.group" value="Site">Site
</div>
<div ng-show="product.group == 'Site'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
I thought that the radio buttons should also be 'sitePostcode' model, but when I tried that and entered text into the input field the div would dissapear as the model value changes from 'site'. Cheers
You can watch changes of product.group and change sitePostcode in accordance to it.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
</head>
<body data-ng-app="app" data-ng-controller="MainController">
<div>
<input type="radio" ng-model="product.group" value="Solution">Solution
<input type="radio" ng-model="product.group" value="Site">Site
</div>
<div ng-show="product.group == 'Site'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
<script>
var app = angular.module('app', []);
app.controller("MainController", function($scope) {
var customPostcode = '';
$scope.$watch('product.group', function (newVal, oldVal) {
if (newVal === 'Solution') {
customPostcode = $scope.sitePostcode;
$scope.sitePostcode = 'Solution';
} else {
$scope.sitePostcode = customPostcode;
}
});
});
</script>
</body>
</html>
The radio buttons should belong to a group. Add 'name' attribute to the input fields and give them the same value.
<input name="group1" type="radio" ng-model="product.group" value="Solution">Solution
<input name="group1" type="radio" ng-model="product.group" value="Site">Site
Radio buttons can be tricky in Angularjs. Here is a great example of how they can work: http://jsfiddle.net/K9MLk/246/.
I think that the best way to do this is to check the product.group value in the controller and set the sitePostcode to Solution.
Another way to do this is as you suggested. You can set the ng-model of your radio buttons to sitePostcode and change your check to ng-show="product.group != 'Solution'". This is assuming that the user will not type Solution in the input field.
<div>
<input type="radio" ng-model="sitePostcode" value="Solution">Solution
<input type="radio" ng-model="sitePostcode" value="Site">Site
</div>
<div ng-show="product.group != 'Solution'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
But as I said it is best to do this in the controller.
I have a Twitter Bootstrap form that has 6 vertical check boxes. I need to have an input form field each time they select a checkbox. It could be in the form of a popup or maybe something that appears out to the right of the checkbox. I figure this is some kind of javascript function but I have no idea how to do so. Any suggestions would be greatly appreciated. Each textbox if selected should have a field that pops up asking them for how many years experience they have in this certain field. This will info will be collected via $_POST variables. So each checkbox popup should have its own unique name so i can post it.
<div class="form-group">
<label class="col-md-4 control-label" for="positionsought">Position Sought</label>
<div class="col-md-4">
<div class="checkbox">
<label for="positionsought-0">
<input type="checkbox" name="positionsought" id="positionsought-0" value="Cutting">
Cutting
</label>
</div>
<div class="checkbox">
<label for="positionsought-1">
<input type="checkbox" name="positionsought" id="positionsought-1" value="Sewing">
Sewing
</label>
</div>
<div class="checkbox">
<label for="positionsought-2">
<input type="checkbox" name="positionsought" id="positionsought-2" value="Upholstery">
Upholstery
</label>
</div>
<div class="checkbox">
<label for="positionsought-3">
<input type="checkbox" name="positionsought" id="positionsought-3" value="Frame Department">
Frame Department
</label>
</div>
<div class="checkbox">
<label for="positionsought-4">
<input type="checkbox" name="positionsought" id="positionsought-4" value="Mill Room">
Mill Room
</label>
</div>
<div class="checkbox">
<label for="positionsought-5">
<input type="checkbox" name="positionsought" id="positionsought-5" value="Cushion">
Cushion
</label>
</div>
<div class="checkbox">
<label for="positionsought-6">
<input type="checkbox" name="positionsought" id="positionsought-6" value="Any">
Any
</label>
</div>
</div>
</div>
Although you already have found an answer, I believe that this would work better for your situation since you say you will have 6 checkboxes. This dynamically creates input fields for each checkbox by their names and removes them when the checkbox is unchecked.
First add this function to each checkbox onclick="dynInput(this);"
<input type="checkbox" name="check1" onclick="dynInput(this);" />
and add this to wherever you would like the inputs to display.
<p id="insertinputs"></p>
Then simply add this javascript function to your head.
<script type="text/javascript">
function dynInput(cbox) {
if (cbox.checked) {
var input = document.createElement("input");
input.type = "text";
var div = document.createElement("div");
div.id = cbox.name;
div.innerHTML = "Text to display for " + cbox.name;
div.appendChild(input);
document.getElementById("insertinputs").appendChild(div);
} else {
document.getElementById(cbox.name).remove();
}
}
</script>
JsFiddle here: http://jsfiddle.net/brL6gy7r/
You can use JavaScript here to do the job. When the checkbox is clicked and checked (because you can also check out.) a dialog will pop-up with all input-fields you want. You can change the dialog part to your desires. but this part is your main function:
$(document).ready(function () {
$('#chkBox').click(function () {
if ($(this).is(':checked')) {
// create input field
} else {
// if checkbox is not checked.. dont show input field
}
});
});
For a full demo on how to do this with a dialog, click this link and observe
http://jsfiddle.net/Runman44/5vy1m233/
Notice that you will need jQuery (and jQuery UI if you want to use the dialog like me)
There is a zero-JavaScript version that is dead simple and works in all major browsers. It takes advantage of the :checked pseudo-class and the adjacency selector. It works with an arbitrary number of checkboxes.
HTML:
<input type="checkbox" />
<input type="text" />
CSS:
input[type=text] {
visibility:hidden;
}
input[type=checkbox]:checked + input[type=text] {
visibility:visible;
}
here is the live demo
If you prefer, you can use display:none and display:inline rather than the visibility property.
The example I've provided assumes that the text field immediately follows the checkbox in the markup, but some variant of sibling/child selectors can be used to select it no matter where it is, as long as it is either a sibling or child (direct or indirect) of the checkbox.
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("");
});