How can we apply onChage function on input in jquery
How can i apply onchange function on checkbox , date , and name and and update dat in object initialState
for checkbox if checked then its value true and if unchecked its false
this is my javascript
const sectionWork = (event) => {
event.preventDefault();
let initialState = {
check: false,
Date: "",
name: ""
}
$("#exampleCheck1").on('change', function() {
if ($(this).is(':checked')) {
$(this).attr('value', 'true');
} else {
$(this).attr('value', 'false');
}
initialState.check = $(this).val();
});
$('#exampleInputDate').on('change', function() {
initialState.Date = $(this).val()
});
$('#naming').on('change', function() {
initialState.name = $(this).val()
});
console.log(initialState)
}
<form onsubmit="sectionWork(event)">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<div class="form-group">
<label for="exampleInputDate">Date</label>
<input type="date" id="exampleInputDate" name="date">
</div>
<div class="form-group">
<label for="exampleName">Name</label>
<input type="text" aria-placeholder="Enter Name" name = "naming" class="form-control" id="naming" >
</div>
<button type="submit" class="btn btn-primary">Releasing</button>
</form>
You must make these event handlers global scope, outside of specific event handler (here is onsubmit handler's sectionWork)
let initialState = {
check: false,
Date: "",
name: ""
}
$("#exampleCheck1").on('change', function() {
if ($(this).is(':checked')) {
$(this).attr('value', 'true');
} else {
$(this).attr('value', 'false');
}
initialState.check = $(this).val();
});
$('#exampleInputDate').on('change', function() {
initialState.Date = $(this).val()
});
$('#naming').on('change', function() {
initialState.name = $(this).val()
});
const sectionWork = (event) => {
event.preventDefault();
console.log(initialState)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onsubmit="sectionWork(event)">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<div class="form-group">
<label for="exampleInputDate">Date</label>
<input type="date" id="exampleInputDate" name="date">
</div>
<div class="form-group">
<label for="exampleName">Name</label>
<input type="text" aria-placeholder="Enter Name" name="naming" class="form-control" id="naming">
</div>
<button type="submit" class="btn btn-primary">Releasing</button>
</form>
Related
For example I have the next options in html, define the global name and different id to each input radio:
<form id="mokepon-form">
<input type="radio" name="mokepon" id="hipodoge">
<label for="hipodoge">Hipodoge</label>
<input type="radio" name="mokepon" id="capipego">
<label for="capipego">Capipego</label>
<input type="radio" name="mokepon" id="ratigueya">
<label for="ratigueya">Ratigueya</label>
<button type="submit">Seleccionar</button>
</form>
To read the value I read the selector, the global name and the checked attribute and then read the id property, you can use the value property as well.
const chooseMokepon = (e) => {
e.preventDefault();
const $selectedMokepon = document.querySelector('input[name=mokepon]:checked');
const { id: mokeponValue } = $selectedMokepon;
if (!mokeponValue) return;
console.log(mokeponValue);
}
$mokeponForm.addEventListener('submit', e => chooseMokepon(e));
You might use this snippet:
let submitBtn = document.querySelector('button[type="submit"]');
submitBtn.addEventListener('click', function(event){
event.preventDefault();
let selectedOption = document.querySelector('input[type="radio"][name="mokepon"]:checked');
if(selectedOption && selectedOption.value){
console.log('Selected: ' + selectedOption.value);
}
});
<form id="mokepon-form">
<input type="radio" name="mokepon" id="hipodoge" value="hipodoge">
<label for="hipodoge">Hipodoge</label>
<input type="radio" name="mokepon" id="capipego" value="capipego">
<label for="capipego">Capipego</label>
<input type="radio" name="mokepon" id="ratigueya" value="ratigueya">
<label for="ratigueya">Ratigueya</label>
<button type="submit">Seleccionar</button>
</form>
I want to make the parent label element bold on a radio / checkbox check. It's working for checkboxes, but the radio's label stays bold.
HTML:
<h4>Radios:</h4>
<div class="checkgroup">
<label for="green"><input type="radio" name="test" id="green">Green</label>
<label for="blue"><input type="radio" name="test" id="blue">Blue</label>
<label for="red"><input type="radio" name="test" id="red">Red</label>
</div>
<hr />
<h4>Checkboxes:</h4>
<div class="checkgroup">
<label for="green-check"><input type="checkbox" id="green-check">Green</label>
<label for="blue-check"><input type="checkbox" id="blue-check">Blue</label>
<label for="red-check"><input type="checkbox" id="red-check">Red</label>
</div>
JavaScript:
function makeLabelBold() {
const radios = document.querySelectorAll("input[type='radio']");
const checkboxes = document.querySelectorAll("input[type='checkbox']");
radios.forEach((radio) => {
radio.addEventListener("click", function () {
this.checked
? (this.parentElement.style.fontWeight = "700")
: (this.parentElement.style.fontWeight = "400");
});
});
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("click", function () {
this.checked
? (this.parentElement.style.fontWeight = "700")
: (this.parentElement.style.fontWeight = "400");
});
});
}
makeLabelBold();
I tried using a change event instead of a click, but that didn't work. Any ideas? Here's a Pen to try out.
Codepen:
Codepen for testing
You can do this without JavaScript. You can use :checked CSS selector. Something like this:
input:checked + span {
font-weight: 700;
}
<h4>Radios:</h4>
<div class="checkgroup">
<label for="green"><input type="radio" name="test" id="green"><span>Green</span></label>
<label for="blue"><input type="radio" name="test" id="blue"><span>Blue</span></label>
<label for="red"><input type="radio" name="test" id="red"><span>Red</span></label>
</div>
<hr />
<h4>Checkboxes:</h4>
<div class="checkgroup">
<label for="green-check"><input type="checkbox" id="green-check"><span>Green</span></label>
<label for="blue-check"><input type="checkbox" id="blue-check"><span>Blue</span></label>
<label for="red-check"><input type="checkbox" id="red-check"><span>Red</span></label>
</div>
If you would like to use JavaScript anyway:
Radio lists doesn't fire event for each of its radio box but only for the one which has been really changed (which you have clicked / as long as we are not changing its value programmaticaly). What I did:
replaced this with e.target to get radio which you have clicked.
get it's name attribute with getAttribute("name")
find all radios with same name attribute`
remove style from all radios with this attribute
apply style on currently selected radio
function makeLabelBold() {
const radios = document.querySelectorAll("input[type='radio']");
const checkboxes = document.querySelectorAll("input[type='checkbox']");
radios.forEach((radio) => {
radio.addEventListener("click", function (e) {
const inputsName = e.target.getAttribute("name");
const sameNameRadios = document.querySelectorAll("[name='"+inputsName+"']");
sameNameRadios.forEach(radio=>{
radio.parentElement.style.fontWeight = "400";
});
e.target.parentElement.style.fontWeight = "700";
});
});
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("click", function () {
this.checked
? (this.parentElement.style.fontWeight = "700")
: (this.parentElement.style.fontWeight = "400");
});
});
}
makeLabelBold();
<h4>Radios:</h4>
<div class="checkgroup">
<label for="green"><input type="radio" name="test" id="green">Green</label>
<label for="blue"><input type="radio" name="test" id="blue">Blue</label>
<label for="red"><input type="radio" name="test" id="red">Red</label>
</div>
<hr />
<h4>Checkboxes:</h4>
<div class="checkgroup">
<label for="green-check"><input type="checkbox" id="green-check">Green</label>
<label for="blue-check"><input type="checkbox" id="blue-check">Blue</label>
<label for="red-check"><input type="checkbox" id="red-check">Red</label>
</div>
Without changing the HTML:
(function()
{
const
radios = document.querySelectorAll('input[type="radio"]')
, checkboxes = document.querySelectorAll('input[type="checkbox"]')
;
radios.forEach(radio =>
{
radio.onclick = () =>
radios.forEach( r =>
r.closest('label').style.fontWeight = r.checked ? '700' : '400' )
});
checkboxes.forEach(checkbox =>
{
checkbox.onclick = () =>
checkbox.closest('label').style.fontWeight = checkbox.checked ? '700' : '400'
});
}
)()
<h4>Radios:</h4>
<div class="checkgroup">
<label for="green"><input type="radio" name="test" id="green">Green</label>
<label for="blue"><input type="radio" name="test" id="blue">Blue</label>
<label for="red"><input type="radio" name="test" id="red">Red</label>
</div>
<hr />
<h4>Checkboxes:</h4>
<div class="checkgroup">
<label for="green-check"> <input type="checkbox" id="green-check">Green</label>
<label for="blue-check"> <input type="checkbox" id="blue-check" >Blue </label>
<label for="red-check"> <input type="checkbox" id="red-check" >Red </label>
</div>
you can olso do:
(function()
{
const radios_checkboxes = document.querySelectorAll('input[type="radio"], input[type="checkbox"]');
radios_checkboxes.forEach(rc =>
{
rc.onclick =()=>
radios_checkboxes.forEach(elm =>
elm.closest('label').style.fontWeight = elm.checked ? '700' : '400' )
});
}
)();
I would like to enable an input when the radio is checked and then disable it when he's unchecked.
HTML
<input id="nam" class="col-md-4 form-check-input" type="radio" name="nam" checked="" data-waschecked="true" onclick="check()"> <
<input id="price" class="form-control" name="price" value="" disabled="disabled">
JS
$(function(){
$('input[name="nam"]').click(function(){
var $radio = $(this);
if ($radio.data('waschecked') == true)
{
$radio.prop('checked', false);
$radio.data('waschecked', false);
}
else
$radio.data('waschecked', true);
$radio.siblings('input[type="radio"]').data('waschecked', false);
});
});
function check() {
var check = document.getElementById('nam').checked;
if (check === true){
document.getElementById('price').removeAttr('disabled');
}
else if (check === false){
document.getElementById('price').attr('disabled','disabled');
}
}
Any ideas?
Thank in advance.
const toggleDisabled = (sel) => {
const EL_target = document.querySelector(sel);
EL_target.disabled = !EL_target.disabled;
};
const ELS_toggle = document.querySelectorAll("[data-toggle]");
ELS_toggle.forEach(el => el.addEventListener("change", function() {
toggleDisabled(this.dataset.toggle);
}));
<input data-toggle="#input-1" type="checkbox">
<input id="input-1" name="price" value="">
Is this what you want?
<input id="price" class="form-control" name="price" disabled>
<input type ="checkbox" onchange = "document.querySelector('#price').disabled = !this.checked">
I used to have radio buttons, but I changed the script to use bootstrap checkboxes. But it is not changing the state when using bootstrap switches.
This is snippet of my code:
<div class="form-group">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="upd_active" class="updactive" id="upd_yes" value="1" checked> Yes </label>
<label class="radio-inline">
<input type="radio" name="upd_active" class="updactive" id="upd_no" value="0"> No </label>
</div>
</div>
<script>
function action(){}
var parentflag = $('#upd_yes').parents('.form-group');
parentflag.find('span').removeClass('checked');
if(is_active == "1"){
$("#upd_no").attr('checked', false);
$("#upd_yes").attr('checked', true);
$('#upd_yes').parent().addClass('checked');
}
else{
$("#upd_yes").attr('checked', false);
$("#upd_no").attr('checked', true);
$('#upd_no').parent().addClass('checked');
}
}
</script>
<div class="form-group">
<label class="col-md-3 control-label">IsActive<span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="checkbox" name="upd_active" class="make-switch updactive" id="upd_yes" value="1" checked>
</div>
</div>
<script>
function action(){
var parentflag = $('#upd_yes').parents('.form-group');
parentflag.find('span').removeClass('checked');
if(is_active == "1"){
$("#upd_yes").attr("checked",true);
$('#upd_yes').parent().addClass('checked');
}
else{
$("#upd_yes").attr("checked",false);
$('#upd_yes').parent().removeClass('checked');
}
}
</script>
How can I fix this?
Am able to find 2 issues(actually not issues) as below
is_active is not declared so you cannot check it with if statement
Most importantly your action() function not at all initiated.
So i added below code and updated the snippet.
var is_active = 0;
action();
var is_active = 0;
action();
function action() {
var parentflag = $('#upd_yes').parents('.form-group');
parentflag.find('span').removeClass('checked');
if (is_active == "1") {
$("#upd_yes").attr("checked", true);
$('#upd_yes').parent().addClass('checked');
} else {
$("#upd_yes").attr("checked", false);
$('#upd_yes').parent().removeClass('checked');
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-md-3 control-label">IsActive<span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="checkbox" name="upd_active" class="make-switch updactive" id="upd_yes" value="1" checked>
</div>
</div>
I have to add the class 'revealed' to a div, once the radio button with the label 'yes' has been selected. So far I have my code set up so that I apply a 'required' class to the input that will be revealed, but I need to have a way to add the class 'revealed' to the 'reveal-if-active' div. This entire HTML structure will repeat as there will be multiple yes/no questions after this first one. So each 'reveal-if-active' div must be unique.
Here's the HTML structure that I am required to use:
<div class="form-group two-column">
<input id="a1" type="radio" name="ayesno" value="1">
<label for="a1">yes</label>
</div>
<div class="form-group two-column">
<input id="a2" type="radio" name="ayesno" value="2">
<label for="a2">no</label>
</div>
<div class="reveal-if-active">
<label for="how-many-people">If <strong>yes</strong> how many people?</label>
<input type="text" name="a-how-many-people" class="require-if-active" data-require-pair="#a1" required="">
</div>
Here's the JS I have so far:
var FormStuff = {
init: function() {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
$(".require-if-active").each(function() {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
$('[data-id=' + $('input:checked').prop('id') + ']').addClass('reveal');
} else {
el.prop("required", false);
el.removeClass("revealed");
}
});
}
};
FormStuff.init();
You may use el.closest('div.reveal-if-active'):
var FormStuff = {
init: function () {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function () {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function () {
$(".require-if-active").each(function () {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
el.closest('div.reveal-if-active').addClass("revealed");
} else {
el.prop("required", false);
el.closest('div.reveal-if-active').removeClass("revealed");
}
});
}
};
$(function () {
FormStuff.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group two-column">
<input id="a1" type="radio" name="ayesno" value="1">
<label for="a1">yes</label>
</div>
<div class="form-group two-column">
<input id="a2" type="radio" name="ayesno" value="2">
<label for="a2">no</label>
</div>
<div class="reveal-if-active">
<label for="i1">If <strong>yes</strong> how many people?</label>
<input id="i1" type="text" name="a-how-many-people" class="require-if-active" data-require-pair="#a1" required="">
</div>