I've 7 checkboxes (A,B,C,D,E,F,G) and when I click one of them, the value is appended to a textarea. If I uncheck one, the value is removed from the textarea. The jquery code is as below:
var checkboxes = $("input[type='checkbox']");
checkboxes.on('change', function() {
$('#recipient').val(
checkboxes.filter(':checked').map(function(item) {
return this.value;
}).get().join('; ')
);
});
The html code is as below:
<div class="col-sm-5">
<div class="form-group">
<label>Recipient</label>
<textarea class="form-control" rows="5" id="recipient"></textarea>
</div>
<div class="form-group">
<label>Message</label>
<textarea class="form-control" rows="5"></textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
<div class="col-sm-5">
<label> </label>
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address Book</h3>
</div>
<div class="panel-body">
<div class="checkbox">
<label>
<input type="checkbox" class="member" value="A">A
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="member" value="B">B
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="C">C
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="D">D
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="E">E
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="F">F
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="G">G
</label>
</div>
</div>
</div>
</div>
</div>
Now, here is a situation where when I click on Checkbox "C", the following checkboxes D,E,F,G should be disabled as well as if anyone of those checkboxes are already in checked state then it should uncheck and trigger the on change event (as highlighted above in the code) which will remove the value of that checked box from the textarea. I have tried to use the trigger("change") option but could not find a luck. Please help me!
Please note, in the code below I've just tried the trigger event with checkbox D alone to see if it works.
$(function(){
$(".firm[value='C']").change(function(){
$(".firm[value='D']").prop('checked', false).trigger("change");
$(".firm[value='D'], .firm[value='E'], .firm[value='F'], .firm[value='G']").attr("disabled", $(this).is(":checked"));
});
});
This seems to work for me:
$(".firm[value='C']").change(function(){
$(".firm[value='D'], .firm[value='E'], .firm[value='F'], .firm[value='G']").prop('checked', false).trigger("change");
$(".firm[value='D'], .firm[value='E'], .firm[value='F'], .firm[value='G']").attr("disabled", $(this).is(":checked"));
});
You can see it in action here:
https://jsfiddle.net/aaronfranco/cvhphzgq/2/
Related
I am struggling to enter the form if the the div is not loaded, What I am trying is if the option "Grade B or Less" is selected then form should be able to submit and if "Grade A" is selected then next div to be loaded and then form to be submitted,
Here is my php form
<div class="box box-primary">
<?php if (isset($_POST['status'])) { ?>
<div id="file_updated_box">
<div class="alert alert-info alert-dismissible file_updated">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
<h4><i class="icon fa fa-check"></i><?php echo $_POST['status']; ?></h4>
</div>
</div>
<?php } ?>
<div class="box-header with-border">
<h3 class="box-title">Enter IMEI</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form method="post" action="sonim_harvesting.php">
<div class="box-body">
<div class="row">
<div class="form-group col-md-6">
<label for="imeinum">Job IMEI</label>
<input class="form-control" autofocus autocomplete="off" id="imeinum" name="imeinum" value="<?php if (isset($_POST['imeinum'])) {
echo $_POST['imeinum'];
} ?>" name="imeinum" placeholder="Enter IMEI" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label">Device Power ON:</label>
<div>
<div class="radio">
<label>
<input name="device_power" value="YES" type="radio" class="radio" required>
YES
</label>
</div>
<div class="radio">
<label>
<input name="device_power" value="NO" required type="radio" class="radio">
NO
</label>
</div>
</div>
</div>
<div class="form-group grade">
<label class="control-label">Device Grade:</label>
<div>
<div class="radio">
<label>
<input name="device_grade" id="GradeA" value="A" type="radio" class="radio" required>
Grade A
</label>
</div>
<div class="radio">
<label>
<input name="device_grade" value="B or Less" required type="radio" class="radio">
Grade B or Less
</label>
</div>
</div>
</div>
<div class="form-group function" style="display:none">
<label class="control-label">Is Display Functional? :</label>
<div>
<div class="radio">
<label>
<input name="function" value="YES" type="radio" class="radio" required>
YES
</label>
</div>
<div class="radio">
<label>
<input name="function" value="NO" required type="radio" class="radio">
NO
</label>
</div>
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<input type="submit" class="btn btn-primary" name="jbSubmit" value="Submit" />
</div>
</form>
</div>
and here is my js code
$(document).ready(function() {
$('.grade').hide()
$('.function').hide()
$('input[type="radio"]').click(function() {
$('.grade').show();
});
$('.grade').click(function() {
if ($('#GradeA').is(":checked")) {
$('.function').show()
} else {
}
})
});
I am able to do it with Grade A but If Grade B is selected I am not able to submit the form, Please advice
This is because your radio input with name="function" has the required attribute set. Despite not being visible, the form is still expecting this field to be completed.
The simplest solution here would be to either remove the required attribute or consider setting one of the options as checked by default.
I have a quick wizard that captures customer selection with both checkboxes and radio buttons (only a single instance on each wizard page so only radio or checkboxes)
I'm trying to capture only the selected radio and checkboxes
form.addEventListener("submit", (e) => {
e.preventDefault();
const inputs = [];
form.querySelectorAll("input").forEach((input) => {
const { name, value, status } = input;
inputs.push({ name, value });
});
console.log(inputs);
form.reset();
});
here is the HTML with the 3 step wizard
<section>
<div class="container">
<form>
<div class="step step-1 active">
<h2>How to serve?</h2>
<div class="form-group">
<input type="radio" id="forhere" name="where" value="forhere"
checked>
<label for="forhere">For Here</label>
</div>
<div class="form-group">
<input type="radio" id="togo" name="where" value="togo">
<label for="togo">To Go</label>
</div>
<button type="button" class="next-btn">Next</button>
</div>
<div class="step step-2">
<h2>Size?</h2>
<div class="form-group">
<input type="radio" id="small" name="size" value="small"
checked>
<label for="small">Small</label>
</div>
<div class="form-group">
<input type="radio" id="medium" name="size" value="medium">
<label for="medium">Medium + 0.49c</label>
</div>
<div class="form-group">
<input type="radio" id="large" name="size" value="large">
<label for="large">Large + 0.99c</label>
</div>
<button type="button" class="previous-btn">Prev</button>
<button type="button" class="next-btn">Next</button>
</div>
<div class="step step-3">
<p>Anything Else:</p>
<div class="form-group">
<input type="checkbox" id="extrahot" name="extrahot" checked>
<label for="extrahot">Extra Hot</label>
</div>
<div class="form-group">
<input type="checkbox" id="doubleshot" name="doubleshot">
<label for="doubleshot">Double Shot + $0.49c</label>
</div>
<div class="form-group">
<input type="checkbox" id="whipped" name="whipped">
<label for="whipped">Whipped Cream</label>
</div>
<button type="button" class="previous-btn">Prev</button>
<button type="submit" class="submit-btn">Add To Order</button>
</div>
</form>
</div>
</section>
I'm not set on this as I'm going to be adding this as a popup that I currently use only with a single selection option but need the checkboxes
Thank you
Return just the checked items.
form.querySelectorAll("input:checked")
const elements = form.querySelectorAll('input[type="checkbox"]:checked, input[type="radio"]:checked');
I am builing a multi-step form.
Here is part of it:
<div class="form-group">
<div class="form-check">
<input id="1-1" class="form-check-input" type="radio" name="firstRadioGroup">
<label for="1-1">Radio button 1-1</label>
</div>
<div class="form-check">
<input id="1-2" class="form-check-input" type="radio" name="firstRadioGroup" data-show="#textarea-1">
<label for="1-2">Radio button 1-2</label>
</div>
</div>
<div class="form-group">
<textarea name="textarea-1" id="textarea-1" cols="30" rows="10" style="display: none"></textarea>
</div>
<div class="form-group">
<div class="form-check">
<input id="2-1" class="form-check-input" type="radio" name="secondRadioGroup">
<label for="2-1">Radio button 2-1</label>
</div>
<div class="form-check">
<input id="2-2" class="form-check-input" type="radio" name="secondRadioGroup" data-show="#textarea-2">
<label for="2-2">Radio button 2-2</label>
</div>
</div>
<div class="form-group">
<textarea name="textarea-2" id="textarea-2" cols="30" rows="10" style="display: none"></textarea>
</div>
<div class="form-group">
<div class="form-check">
<input id="checkbox-1" class="form-check-input" type="checkbox" name="secondRadioGroup">
<label for="checkbox-1">Checkbox 1</label>
</div>
<div class="form-check">
<input id="checkbox-2" class="form-check-input" type="checkbox" name="secondRadioGroup">
<label for="checkbox-2">Checkbox 2</label>
</div>
<div class="form-check">
<input id="checkbox-other" class="form-check-input" type="checkbox" name="secondRadioGroup" data-show="#textarea-3">
<label for="checkbox-other">Other</label>
</div>
</div>
<div class="form-group">
<textarea name="textarea-3" id="textarea-3" cols="30" rows="10" style="display: none"></textarea>
</div>
And here is my JS :
$("[data-show]").change(function(){
if($(this).is(":checked")) {
$($(this).data('show')).show();
} else {
$($(this).data('show')).hide();
}
});
What's the problem:
With checkbox it works fine. Showing and hiding on checking/unchecking the checkbox.
With radio buttons it works fine on the show, but it's not hiding on changing from current group of radio buttons.
Here is JSFiddle
EDIT 1:
What I need with radio button groups:
If I check radio-button with
name="radio_group_1" data-show="#id-of-textarea"
a textarea with
id="id-of-textarea"
shows up. If after this I check another radio-button from the same group
name="radio_group_1" NO DATA-ATTRIBUTE HERE
the textarea hides.
The jQuery logic is wrong. Working: https://jsfiddle.net/vutpcu0g/5
You should check the change event on all radios, not just the data-show ones. Then, select the nearest sibling radio to toggle the data-show element.
$("[type=radio],[type=checkbox]").change(function(){
if($(this).is(":checked") && $(this).data("show")) {
$($(this).data('show')).show();
} else {
var sib= $(this).parents('.form-group').find('[data-show]');
$(sib.data("show")).hide();
}
});
You have some errors in your code.Use this script.
$("[type='radio']").change(function(){
$("[type='radio']").each(function(){
if($(this).is(":checked")) {
$($(this).data('show')).show();
} else {
$($(this).data('show')).hide();
}
});
});
Fiddle: https://codepen.io/smitraval27/pen/XEpGNR
In your code you have not given [data-show] to every radio button. Plus on change of radio you have to use each to find out the changes of each and every radio.
I am making a form which is toggle (hide and show) with the help of button, but it is not working. Can anyone please review my code and tell why my script is not working. my code is below
$(document).ready(function () {
$("#add_facility").click(function () {
$("#facility-form").toggle('slow');
});
});
.facility-form {
background-color: #e3edfa;
padding: 4px;
cursor: initial;
display: none;
}
<button class="btn" id="add_facility">
<i class="fa fa-plus" aria-hidden="true"></i>
Add Facilities
</button>
<div class="facility-form">
<form id="facility-form1">
<div class="row">
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" value="">Internet
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Bar
</label>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" value="">Free Wifi
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Spa
</label>
</div>
</div>
</div>
</form>
</div>
You're selecting by id, but your form has a class, not an id; see ***:
$(document).ready(function() {
$("#add_facility").click(function() {
$(".facility-form").toggle('slow'); // ***
});
});
.facility-form {
background-color: #e3edfa;
padding: 4px;
cursor: initial;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="btn" id="add_facility">
<i class="fa fa-plus" aria-hidden="true"></i> Add Facilities
</button>
<div class="facility-form">
<form id="facility-form1">
<div class="row">
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" value="">Internet
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Wifi
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Bar
</label>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" value="">Free Wifi
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Spa
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Parking
</label>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" value="">Indoor Pool
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Family Rooms
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Smoking Rooms
</label>
</div>
</div>
</div>
</form>
</div>
You need to use the class selector not an ID selector
Change this line from,
$("#facility-form").toggle('slow');
To
$(".facility-form").toggle('slow');
Here is an working Fiddle : https://jsfiddle.net/pz6h4g7q/
Hope this helps!
this is mistake
$("#facility-form").toggle('slow');
change to
$(".facility-form").toggle('slow');
Change this:
$("#facility-form").toggle('slow');
to
$(".facility-form").toggle('slow');
facility-form is a class, not an ID.
I am trying to change the radio button that is checked by default and I cannot access the html to do so, but I can use javascript. Here is the html
<div class="row" id="courseSearchAvailability">
<div class="col-xs-12">
<fieldset class="accessibility">
<legend>
Filter By Course Availability
</legend>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="availforreg" id="searchAvailable">
Search scheduled courses
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="all" checked="checked" id="searchAll">
Search all courses
</label>
</div>
</fieldset>
</div>
</div>
I want to make the searchAvailable the default and here is the javascript that I'm using and it doesn't seem to work. I'm new to this so be nice lol.
var sel = document.getElementById('searchAvailable');
sel.searchALL.removeAttribute('checked');
sel.searchAvailable.setAttribute('checked', 'checked');
document.forms[0].reset();
Just these two lines should be enough:
var sel = document.getElementById('searchAvailable');
sel.checked = true;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="courseSearchAvailability">
<div class="col-xs-12">
<fieldset class="accessibility">
<legend>Filter By Course Availability</legend>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="availforreg" id="searchAvailable">Search scheduled courses</label>
</div>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="all" checked="checked" id="searchAll">Search all courses</label>
</div>
</fieldset>
</div>
</div>