I would like to be able to edit a multi-select field when ("Update Data?") Checkbox is checked, and disabled the field again, when checkbox is un-checked.
Important is that checked status always leads to being able to edit, meanwhile un-checked means field is disabled, regardless if I load the form with a checked box or as un-checked as the initial state (I can save either or)
I find several useful answers but struggling with syntax to combine those into my solution.
Below can toggle once, then it gets stuck:
$(function() {
$("#checkbox1").change(function() {
if ($("#field2").attr('disabled', !this.checked)) {
$("#field2").removeAttr("disabled");
} else {
$("#field2").attr("disabled", "disabled");
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
<div id="div_id_product" class="form-group row"> <label for="field2" class="col-form-label col-sm-4">
Multiselect
</label>
<div class="col-sm-7">
<select name="multiselect" class="select2-show-search selectmultiple form-control" id="field2" disabled="disabled" multiple style="width: 100%;">
<option value="1" selected>Product 1 </option>
<option value="3" selected>Product 3</option>
<option value="2">Product 2</option>
</select>
</div>
</div>
<div class="form-group row" id="checkbox1"> <label for="id_to_update" class="col-form-label col-sm-4">
Update Data?
</label>
<div class="col-sm-7">
<div class="input-group"> <input type="checkbox" name="to_update" class="checkboxinput" id="id_to_update"> <span class="input-group-append"></span> </div>
</div>
</div>
</form>
Just change your JS to this. You have the change listener on the wrong id.
The listener should be on #id_to_update (input) instead of #checkbox1 which is the div.
$(function() {
$("#id_to_update").change(function() {
$("#field2").prop('disabled', !this.checked);
});
})
Here is the solution you are looking for
$(function() {
$('#field-editable').change(function() {
$('#firstname').prop('disabled', !this.checked);
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
<label for="field-editable">
<input type="checkbox" id="field-editable">
do you want to edit
</label>
<input type="text" name="firstname" id="firstname" disabled="disabled">
</form>
Related
I have recently migrated from Angular 9 to Angular 12 and observing form control value issue. Below are the details of the issue:
I have a dropdown control, based on the value selected there are
controls which has to update the value according to my model,
When value of dropdown control is changed , my dependent controls
value is not updating according to the model, in code debug my form
is having the value based on the changes done to drop down, even
though this.form.updateValueAndValidity(); applied, changes are not
reflected in the UI.
Here is the HTML file
<div class="form-control">
<label class="form-control-label" for="type">Type</label>
<select id="type" name="Selection" formControlName="Type">
<option value="null" selected="true" id="default">Select type...</option>
<option *ngFor="let item of supportedTypes" [value]="item.Type" id="{{item.Type}}">{item.ShortName}}</option>
</select>
</div>
//Below controls are dependent on the above value selected, for each selection change different values to be display
<div class="form-control">
<label class="form-control-label" for="type">Type</label>
<select id="type" name="Selection" formControlName="Type">
<option value="null" selected="true" id="default">Select type...</option>
<option *ngFor="let item of supportedTypes" [value]="item.Type" id="{{item.Type}}">{{item.ShortName}}</option>
</select>
</div>
<div>
<div class="form-control tooltip">
<label class="form-control-label" for="name">Name</label>
<div class="tooltip">
<input type="text" maxlength=13 formControlName="Name" id="name">
</div>
</div>
<div class="form-control tooltip">
<label class="form-control-label" for="age">Age</label>
<div class="tooltip">
<input type="text" formControlName="Age" NumberOnly="true" id="age">
</div>
</div>
<div class="form-control tooltip">
<label class="form-control-label" for="Height">Height</label>
<div class="tooltip">
<input type="text" formControlName="Height" NumberOnly="true" id="height">
</div>
</div>
<div class="form-control tooltip">
<label class="form-control-label" for="weight">Weight (kg)</label>
<div class="tooltip">
<input type="text" NumberOnly="true" formControlName="Weight" id="weight">
</div>
</div>
</div>
file which has to update the value
this method is for updating my form contols
updateControls(show: boolean, formMeta: object, data?: { [key: string]: string })
{
Object.keys(formMeta).forEach((formName) =>
{
if (!show)
{
//remove control if none selected
this.form.removeControl(formName);
return;
}
//add controls on value change and update the controls
this.form.addControl(formName, formMeta[formName]);
this.form.get(formName).patchValue(data[formName]);
});
this.form.updateValueAndValidity(); //update my form, but it doesn't reflect the updated content in UI
}
I'm trying to find see if we can make a checkbox selected if we chose an option from the dropdown menu. Here's a mock-up code of what I'm trying to modify.
$('.stackoverflow').on('change', function() {
$(this).parent().next().find('input:checkbox').attr("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkboxes">
<div class="checkbox_wrapper">
<input type="checkbox" id="How" /> How</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="Do" /> do</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="I" /> I </div>
<div class="checkbox_wrapper">
<input type="checkbox" id="Force" /> force </div>
<div class="checkbox_wrapper">
<input type="checkbox" id="The" /> the</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="checkbox" /> checkbox
<select class="stackoverflow">
<option value="to">to</option>
<option value="be">be</option>
<option value="selected">selected</option>
<option value="when">when</option>
<option value="we">we</option>
<option value="select">select</option>
<option value="an">an</option>
<option value="option">option</option>
</select>
</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="not this one" /> not this checkbox but the previous one</div>
I'm trying to have the checkbox "checkbox" be selected if I do select an option from the dropdown menu. Is there an easy way to do this? When searching stackoverflow, the closest thing that I found was to have the next one be selected and not the current one. Thank you very much for any help at all.
Just reference the correct checkbox correctly?
In your case, you have this:
$(this).parent().next().find('input:checkbox').attr("checked", true);
this refers to the select
parent refers to <div class="checkbox_wrapper">
next would then refer to <div class="checkbox_wrapper">
and finally find('input:checkbox') would find: <input
type="checkbox" id="not this one" />
Since the checkbox you want is a child of the same parent element that the select is in, the next() method call is what's causing the problem.
So, you could write:
$(this).parent().find('input:checkbox').attr("checked", true);
But, there are many ways to access an element. If it has an id, that is the simplest and most efficient way. So you are better off writing:
$('#checkbox').prop("checked", true);
Also, use .prop instead of .attr as .attr fails when you manually uncheck the checkbox and then select an item from the drop down.
$('.stackoverflow').on('change', function() {
$('#checkbox').prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkboxes">
<div class="checkbox_wrapper">
<input type="checkbox" id="How" /> How</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="Do" /> do</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="I" /> I </div>
<div class="checkbox_wrapper">
<input type="checkbox" id="Force" /> force </div>
<div class="checkbox_wrapper">
<input type="checkbox" id="The" /> the</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="checkbox" /> checkbox
<select class="stackoverflow">
<option value="to">to</option>
<option value="be">be</option>
<option value="selected">selected</option>
<option value="when">when</option>
<option value="we">we</option>
<option value="select">select</option>
<option value="an">an</option>
<option value="option">option</option>
</select>
</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="not this one" /> not this checkbox but the previous one</div>
You have a couple of options to check the checkbox:
$(document).ready(function() {
$(".stackoverflow").on("change", function() {
//$("#checkbox").prop("checked", true);
$(this).prev("input[type='checkbox']").prop("checked", true);
})
})
Here is a fiddle of it working based on your example: https://jsfiddle.net/gz6mab4k/
Hurray, you are using the relative position of your dom elements to locate each other. I assume that's because you're going to get rid of all the IDs and add this structure many times to your page. So you have a small error in the javascript handler, as mentioned in a comment you break stuff by having .next(), which will force the handler to look for a checkbox in the div coming after the select's parent which is the one that contains checkbox id='not this one'. So you want:
$('.stackoverflow').on('change', function() {
$(this) // the select
.parent() // its parent DIV
.find('input:checkbox') // the only checkbox in the parent div
.attr("checked", true);
});
I am need to get the id before and after html element of dropdown list on change. Please see blow source code.
When Fund name selected I need to get the previous selected checkbox id or name ( Cash / Epf ) & after selected checkbox id or name ( No.of Units Reedem / Amount Reedem / All units).
Thanks in advance.
$(document).ready(function () {
$('.units').change(function () {
alert($(this).attr('id'));
alert($(this).before().parent().parent().html());
});
});
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<div class="setup-content" id="form-3">
<div id="repurchase">
<div class="lblHead">REPURCHASE REQUEST</div>
<div class="form-group">
1.<input type="checkbox" name="Fm3CheckBoxList1[]" id="fm3chk11" value="CashPlan" class="singlecheckbox plan" /><label for="fm3chk11">Cash Plan</label>
<input type="checkbox" name="Fm3CheckBoxList1[]" id="fm3chk12" value="EPFPlan" class="singlecheckbox plan" /><label for="fm3chk12">EPF Plan</label>
</div>
<div class="form-group">
<div class="col-lg-6">
<label>Fund Name</label>
<select id="fundId" class="form-control drplst units" AppendDataBoundItems="true">
<option Value=""></option>
<option Value="123">123</option>
<option Value="369">369</option>
</select>
</div>
<div class="col-lg-6">
<div class="clearfix"></div>
<input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk21" value="No_OfUnitToRedeem" class="singlecheckbox" /><label for="fm3chk21">No. of Unit to Redeem</label>
<input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk22" value="Amount_ToRedeem" class="singlecheckbox" /><label for="fm3chk22">Amount to Redeem</label>
<input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk23" value="All_Units" class="singlecheckbox" /><label for="fm3chk23">All Units</label>
<asp:TextBox ID="Fm3TextBox2" runat="server" class="form-control" placeholder="AMOUNT"></asp:TextBox>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
Try this :
$(document).ready(function () {
$('.units').change(function () {
alert($(this).closest('.form-group').prev().find('.singlecheckbox:checked').attr('id'));
alert($(this).parent().next().find('.singlecheckbox:checked').attr('id'));
});
});
This is working for single checked box, if more than one checkbox was chekced, you need to iterate that and doing something with that.
Assuming your plans are mutually exclusive, you would want radio buttons to represent them, unless that F3m... indicates some JS framework that would turn appropriately decorated checkboxes into mutually exclusive selections. Maybe you don't want them to be mutually exclusive. If that's the case I'll update my answer. Either way, you can use another attribute on the group of checkboxes to aggregate them all, such as name. See my changes to the code snippet (below) for using name to find the selected plan. You could assign all checkboxes in a particular group a name, class, or modify their IDs to include some base to use in a selector. You could put them inside a container element (div) for easier reference, and then bind your inputs' events...
var lastPlanSelection = "none";
$('input[name=targetSet]').on('click', function() { lastPlanSelection = $(this).val(); });
Modifying your snippet to find the selected radio button...same principle could be applied to checkboxes using class attribute.
$(document).ready(function () {
$('.units').change(function () {
var selectedPlan = $('input[name=plan]:checked');
alert("Selected Plan: " +
(selectedPlan.length === 1 ? selectedPlan.val() : "none"));
});
});
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<div class="setup-content" id="form-3">
<div id="repurchase">
<div class="lblHead">REPURCHASE REQUEST</div>
<div class="form-group">
1.<input type="radio" id="cashPlan" name="plan" value="Cash"><label for="cashPlan">Cash Plan</label><br/>
<input type="radio" id="epfPlan" name="plan" value="EPFPlan"><label for="epfPlan">EPF Plan</label>
</div>
<div class="form-group">
<div class="col-lg-6">
<label>Fund Name</label>
<select id="fundId" class="form-control drplst units" AppendDataBoundItems="true">
<option Value=""></option>
<option Value="123">123</option>
<option Value="369">369</option>
</select>
</div>
<div class="col-lg-6">
<div class="clearfix"></div>
<input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk21" value="No_OfUnitToRedeem" class="singlecheckbox" /><label for="fm3chk21">No. of Unit to Redeem</label>
<input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk22" value="Amount_ToRedeem" class="singlecheckbox" /><label for="fm3chk22">Amount to Redeem</label>
<input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk23" value="All_Units" class="singlecheckbox" /><label for="fm3chk23">All Units</label>
<asp:TextBox ID="Fm3TextBox2" runat="server" class="form-control" placeholder="AMOUNT"></asp:TextBox>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
I am trying to hide and/or show form elements when a user selects certain values.
For example, if the user selects "yes" to the consent question, I need it to show a few questions, However, if they change their response to the consent question, I need it to hide those questions.
Here is what I have come up with so far...
$(document).ready(function () {
var input = document.getElementById('consent');
var consent_responses = [{ "0": hideConsent },{ "1": showConsent }];
input.addEventListner('click', function () {
var consent_response;
if (consent_responses[this.value]) {
content_response = consent_responses[this.Function()]
}
else {
content_response = consent_responses[this.Function]
}
});
function showConsent(){
$("#date").show(),
$("#referrer").show(),
$("#f_name").show(),
$("#phone_num").show(),
$("#leave_msg").show(),
$("#email").show(),
};
function hideConsent(){
$("#date").hide(),
$("#referrer").hide(),
$("#f_name").hide(),
$("#phone_num").hide(),
$("#leave_msg").hide(),
$("#email").hide(),
}; });
Fiddle here: http://jsfiddle.net/7jX47/1/
You could do it like this: JSFiddle
Basically I only fixed a few typos (did you actually try your code before you posted here?) and added event listeners to the radio buttons with
document.getElementById(...).addEventListener(...)
I also gave your radio buttons unique IDs.
This can be simplified:
var input = document.getElementById('consent');
// Let's use the value as key, and the functions as values
var consent_responses = {
"0" : hideConsent,
"1" : showConsent
};
input.addEventListener("click", function () {
// Get the appropriate function given the value, and invoke it
consent_responses[this.value]();
});
function hideConsent() {
// ...
}
function showConsent() {
// ...
}
It's better to envelop your questions (that needs to be hidden) by a div with a class ".hidden" or style "display: none;". And simplify your code by simply asking that div to show() or hide() when needed.
Like so:
<form id="screening">
<div class="col-md-12 col-sm-12 col-xs-12 nopad" id="create">
<div class="form-group text-center">
<b>Do you agree to answer the screening questions?</b><br />
<div class="radio" id="consent">
<label>
<input type="radio" name="consent" id="consent" value="1">
Yes, I consent
</label>
</div><br />
<div class="radio">
<label>
<input type="radio" name="consent" id="consent" value="0">
No, I do not consent
</label>
</div>
</div>
<!-- simplify by using this -->
<div id="questions" style="display: none;">
<div class="form-group" id="date">
<label for="date">What is today's date?</label>
<input type="date" class="form-control" id="date" name="date" />
</div>
<div class="form-group" id="referrer">
<label for="referrer">How did you hear about us/our studies?</label>
<select class="form-control" name="referrer" id="referrer">
<option></option>
<option value="1">Flyers</option>
<option value="2">Print Media</option>
<option value="3">A friend</option>
<option value="4">Online (e.g., Craigslist)</option>
<option value="5">Other</option>
</select>
</div>
<div class="form-group" id="other_explain">
<label for="other_explain">Please specify other source.</label>
<textarea class="form-control" rows="3" id="other_explain" name="other_explain"></textarea>
</div>
<div class="form-group" id="f_name">
<label for="f_name">What is your first name?</label>
<input type="text" class="form-control" id="f_name" name="f_name" />
</div>
<div class="form-group" id="phone_num">
<label for="phone_num">What is a phone number at which you can be contacted? </label>
<input type="tel" class="form-control" id="phone_num" name="phone_num" />
</div>
<div class="form-group" id="leave_msg">
<label for="leave_msg">If we call and you are not available, may we leave a message?</label><br />
<div class="radio">
<label>
<input type="radio" name="leave_msg" id="leave_msg" value="1">
Yes
</label>
</div><br />
<div class="radio">
<label>
<input type="radio" name="leave_msg" id="leave_msg" value="0">
No
</label>
</div>
</div>
<div class="form-group" id="email">
<label for="email">What is an e-mail at which you can be contacted?</label>
<input type="email" class="form-control" id="email" name="email" />
</div>
</div>
</div>
</form>
and in your javascript instead of using this:
function showConsent(){
$("#date").show(),
$("#referrer").show(),
$("#f_name").show(),
$("#phone_num").show(),
$("#leave_msg").show(),
$("#email").show(),
};
you use:
function showConsent(){
$("#questions").show(),
};
I need some help displaying a div with a form inside of it whenever someone selects a certain option from a tag. My code is this:
<script type="text/javascript">
$(function() {
$('#contactOptionSelect').change(function() {
$('.emailForm').hide();
$('#' + $(this).val()).show();
});
});
</script>
<div class="contactSelect" id="contactOptionSelect">
<label for="selectContact">Contact us: </label>
<select name="selectContact" class="selectContactType" style="width: 150px;"/>
<option class="opt" value="">Please select</option>
<option class="opt" id="helpOpt" value="">Help and Support</option>
<option class="opt" id="emailOpt" value="">Email</option>
<option class="opt" id="visitOpt" value="">Visit us!</option>
<option class="opt" id="phoneOpt" value="">Phone</option>
</select>
</div>
<div class="emailForm" id="emailFormId">
<form id="contactUsForm" method="post" action="">
<div class="formSubject">
<label for="inputSubject">Subject</label>
<input type="text" width="50px" id="inputSubject" />
</div>
<div class="formBody">
<label for="inputBody">Email</label>
<textarea rows="15" cols="50" id="inputBody"></textarea>
</div>
<div class="formSubmit">
<input type="submit" id="inputSubmit" value="Send!"/>
</div>
</form>
</div>
And I want to display the last form when the email option is selected. I kinda want it to work like this: http://www.apple.com/privacy/contact/ High standards I know but whatever haha Thanks in advance for any help!
Are you looking for something like this? http://jsbin.com/okakuy/edit#javascript,html
Whenever the select option is changed, we hide whichever div is visible, and show whichever div has the current select value as its id attribute.
$("#parts").on("change", function(o){
$(".panels")
.find("> div:visible")
.slideUp()
.end()
.find("#" + o.target.value)
.slideDown();
});
Coupled with this markup:
<select id="parts">
<option>foo1</option>
<option>foo2</option>
<option>foo3</option>
</select>
<div class="panels">
<div id="foo1">This is foo1</div>
<div id="foo2">This is foo2</div>
<div id="foo3">This is foo3</div>
</div>