I have a simple JavaScript that when a checkbox is selected then the row color changes. This works well.
However, when a user needs to edit their details they can see the boxes that they have checked (form the MySQL select) however the color has not changed, as the row color only changes when the user un-selects and then re-selects the checkboxes.
How can this be done?
Thanks
Below is the simple JavaScript
function ClickMakeColor(chk,ctrl)
{
if(chk.checked)
{
document.getElementById(ctrl).className = 'CheckBoxOn';
}
else
{
document.getElementById(ctrl).className = 'CheckBoxOff';
}
}
You can use toggle to toggle classes on/off. You didn't provide too much information such as html or what ctrl is, so there isn't much more info that can be given. If you update your question with that, I can give a better answer.
function ClickMakeColor(chk,ctrl) {
let cl = document.getElementById(ctrl).classList
cl.toggle('CheckBoxOn', chk.checked)
cl.toggle('CheckBoxOff', !chk.checked)
}
Related
I'm setting up a system that tracks submissions from my employees in Google Sheets. Each day I check to see if they have submitted the proper paperwork. What I am wanting to accomplish is, when I click (or select) a cell with that employee's name, I want to change the background color when I click (or select) that cell.
Nothing I've tried has worked.
var color = [
["#06c646"]
];
var cell = SpreadsheetApp.getActiveSpreadsheet().getActiveCell();
cell.setBackground(color);
Nothing seems to be doing what I want it to do.
You could try it with jQuery:
$(selector).on("click", function() { // add cell's class/id here
$(this).css({'background-color':'blue'});
});
I am using JsGrid in my asp.net application. I felt it was very awesome grid. Everything worked out very well, but I was stuck at one point.
I have a dropdown on a page which is fetching data from database. and next to that control, i have added JsGrid.
When I change the index of dropdown, and when I click on Add row on my jsgrid, it should set the default value for one of the fields in the grid.
Can anybody please help me out in this regard.
enter image description here
Regards,
Nithin Eate
Redefine insertTemplate of the grid column you want to set default value to and pick up value from your dropdown widget:
insertTemplate: function() {
var input = this.__proto__.insertTemplate.call(this); // original input
// getValueFromDropDown() should read value from your dropdown control
var defaultValue = getValueFromDropDown();
input.val(defaultValue)
return input;
}
The source GitHub issue https://github.com/tabalinas/jsgrid/issues/471
please I have a drop down list like
creation
creation from scratch
creation without data
creation pay
modification
modification/specific
modification/clean
and this script
function checkTicketType(tipo) {
console.log("Tipo cambia: "+tipo);
if (tipo.indexOf('Creation')>-1) {
$('#itemId').parent().show(500);
}
else if (tipo.indexOf('Modification')>-1) {
$('#itemId').parent().hide(500);
}
}
When the creation status are selected the itemId box appear, desappear when the modifications are selected.
My problem I want to use the itemId (it can appear only if the status "modification/specific" is selected no more).
Thank you in advance.
Attach change event to select dropdown. Check for selected text on change event.
If it contains modification hide the itemId box (assuming its text input) else if it contains creation show it.
//Change event for dropdown with id ddForEg
$("#ddForEg").change(function(){
if($("#ddForEg option:selected").text().includes('modification'))
{
alert($("#ddForEg option:selected").text());
$('#itemId').hide();
alert($("#ddForEg").val()); //Another way to see value selected. If you assign value to options. No string operations required in that case.
}
else if($("#ddForEg option:selected").text().includes('creation'))
{
$('#itemId').show();
}
})
Fiddle: https://jsfiddle.net/mwoavoqd/
I created a HTML table that has a radio button, delete button, and a text box in each row. When I select the apply button, I want to get the value of the text box in the same row as the checked radio button. Attached is my fiddle. Any help would be greatly appreciated :)
<input type="text" name="context" class="chooseContext"/>
This is the text that I am wanting to figure out how to alert based on which radio button is selected.
JSFiddle Code
Not sure if it's the most elegant solution but you can do this
//Send selected default to add on
$(".contexts-list tr input[type='radio']:checked").each(function() {
var val = $(this).parents("tr").find("input.chooseContext").val();
alert("Default: " + val);
});
Demo of it working
you can alert it like this:
$('#applyButton').on('click', function(){
var alertTxt = $(':radio:checked').closest('tr').find('.chooseContext').val();
alert(alertTxt);
});
Updated Fiddle
I solve this kind of things by using parents property in jQuery.
so usually when you click on something do a
$(this).parents('tr').find('input[type=text]').val();
So the hint here is to pick up the parent element row and then try finding the desired element in that row to take action.
You can set a number on id of input radio and input text, then you can check what of the radios of the same group is checked, then take the id of this radio and get the val of input text that has the same id. Wait i´m doing the jsfiddle... Regards!
EDIT: Here are users faster than me, Regards!
I am very new to building forms with js. I copied and applied a bit of code to get fields to pop up depending on the Radio button I select. This works great for two radio buttons, but my issues is that I want to include several (5+) and would like to reset the fields with every change.
I was thinking I can input additional code to reset all fields "onchange" but I can't get this piece of code to work... here is what I copied and modified for my use:
works great with 2 buttons as designed:
{
toggleSelectionFields: function() {
var isLaptop = ca_fdIsSelectRadio('showhide','group','short');
if (isLaptop) {
ca_fdHideField('showhide','longfields');
ca_fdShowField('showhide','shortfields');
} else {
ca_fdHideField('showhide','shortfields');
ca_fdShowField('showhide','longfields');
}
}
}
Here is what I tried to do:
{
toggleSelectionFields: function() {
Var discovery = ca_fdIsSelectRadio('phone','deskphone4610','selectproblem','SelectIssue','discovery');
Var headset = ca_fdIsSelectRadio('phone','deskphone4610','selectproblem','SelectIssue','headset');
Var fac = ca_fdIsSelectRadio('phone','deskphone4610','selectproblem','SelectIssue','feature');
Var calls = ca_fdIsSelectRadio('phone','deskphone4610','selectproblem','SelectIssue','calls');
if (discovery)
{ca_fdShowField('phone','deskphone4610','selectproblem','discovermode')}
if (headset)
{ca_fdShowField('phone','deskphone4610','selectproblem','headset')}
if (fac)
{ca_fdShowField('phone','deskphone4610','selectproblem','feature')}
if (calls)
{ca_fdShowField('phone','deskphone4610','selectproblem','calls')}
}
}
}
This appears to be a JavaScript question (not Java) and related to a particular framework (CA Service Catalog), so questions about how to do things with particular CA functions would probably be best answered on the CA Service Management Global User Community message boards.
As a general logic/JavaScript question, though, you need to hide the fields you don't want to see in addition to showing the ones you do want to see. Notice that your first example calls ca_fdHideField to hide one set of fields, then ca_fdShowField to show the other. If you don't want to duplicate a lot of code, you could hide them all before the if statements, then just show the one that corresponds with the radio button that was selected:
ca_fdHideField(...)
ca_fdHideField(...)
...
if (discovery) {
...
}
etc.