The DEMO
should be pretty explanatory.
There are rows with radio buttons and a check box at the end.
Help 1. What I would like is when ONLY the check box is checked, the values of the checked radio button and along with the value of the textarea and dropdown (if Missing radio button is clicked) to be populated in the text area which is at the bottom?
Help 2. Right now when the radio button is clicked, all the checked radio buttons value are showing. Where am I going wrong ?
To help you understand, from the text area, the data which is separated by ~ and | gets passed over to the next stage when the save all button is clicked. Initially when the page loads the radio buttons are pre-checked depending on the previous page but nothing needs to be populated in the bottom text area.
We use jquery 1.6.4
function updateSummary($this){
$this.closest('[id]').find('.r-title, .m-notes-wrapper, .up-arrow, .down-arrow').hide();
var totalRd = $('table').find('input:radio:checked').length;
// Array of clicked items
var clicked = [];
// Set number of selected items
$("#totalRd .rd-count").html(totalRd);
// Show the title and notes next to the radio button
$this.siblings('.r-title, .m-notes-wrapper, .up-arrow, .down-arrow').show();
// Find checked radio buttons that has been clicked
$('table').find("input[type=radio]:checked:enabled").each(function () {
// Find closest ancestor with an id
// See if we have a text box, if so use the text
var $text = $(this).parent().find('textarea.m-notes:visible');
var missingReason = $(this).parent().find('.reason').val();
var selectedId = $(this).closest('[id]').attr('id');
var value = selectedId + "~" + $(this).val();
if ($text.length)
{
value += "~" + missingReason +"~" + $text.val();
}
clicked.push(value);
}); //checked
// Display the selected ids
$("#inputhere").val(clicked.join('|'));
}
// Radio selection changes selected options
$("input:radio").click(function () {
updateSummary($(this));
});
$('textarea.m-notes').bind('keyup', function () {
updateSummary($(this).siblings(':radio'));
});
$('select.reason').change (function () {
updateSummary($(this).siblings(':radio'));
});
$("input:checkbox").change(function(){
updateSummary($(this));
});
Thanks for your help.
You could add a condition when updating your textarea :
if($('table').find("input[type=checkbox][name='" + $(this).attr('name') + "']").is(':checked')) {
var $text = $(this).parent().find('textarea.m-notes:visible');
var missingReason = $(this).parent().find('.reason').val();
var selectedId = $(this).closest('[id]').attr('id');
var value = selectedId + "~" + $(this).val();
if ($text.length)
{
value += "~" + missingReason +"~" + $text.val();
}
clicked.push(value);
}
Related
I have a page region in Oracle Apex, that contains many checkboxes (apex form).
I want a functionality to add a checkbox at the header of every checkbox item, that will Select/Deselect all the checkbox items underneath.
I am new to Apex development, and need help on this.
Here's a solution that assumes the text above the checkboxes is from the item's label (somehow I don't think that's the case). If needed, I can update the answer to better fit your page when I know more about it.
First, go into each checkbox where you want to add this "toggle" functionality. Scroll down to the CSS Classes attribute and put toggle-cb in the field.
Next, go to the page level attributes and add the following code to the Function and Global Variable Declaration attribute:
function enableToggle() {
var $wrapperDiv = $(this);
var $label = $wrapperDiv.find('.t-Form-label');
var $item = $wrapperDiv.find('.apex-item-checkbox');
var buttonHtml = '<button type="button" class="t-Button t-Button--tiny t-Button--simple">Toggle all</button>';
$label.html($label.text() + ' ' + buttonHtml);
$label.find('button').on('click', function(event) {
var $button = $(this);
var $checkboxes = $item.find('input[type="checkbox"]');
var checkedCount = $checkboxes.filter(function() {
return this.checked === true;
}).length;
var check = checkedCount < $checkboxes.length;
$checkboxes.each(function() {
this.checked = check;
});
event.stopPropagation();
$button.blur();
});
}
Finally, add the following code to the Execute when Page Loads attribute of the page:
$('.toggle-cb').each(enableToggle);
This will add a button to each item's label (provided the checkbox has the toggle-cb class) that does the toggle:
See the following to learn more about the code used above:
https://www.youtube.com/watch?v=Pjur4Zkkwsk&list=PLUo-NIMouZ_sgdQpMbXXwhHKpwRggCY34&index=1
I have 2 dropdown groups as shown below
on clicking + button more groups will be created dynamically.
and the subcategory drop down is dynamically populated (from database) in the onchange event of category dropdown
The problem is i want to avoid the duplication of selection in subcategory dropdown
Any ideas given are welcome
EDIT 1:
$('.skill-subcategory').each(function(){
//var value = $(this).val();
var arr = [];
var selectedValue=$(this).attr('selected').value;
arr.push(selectedValue);
});
arr.each(function(i){
//var thisValue= $(this).value;
var selectedValuea = $(this).val();
var otherDropdowns = $('.skill-category').not(this);
otherDropdowns.find('option').prop('disabled', false); //reset all previous selection
console.log("value:" + selectedValuea);
otherDropdowns.find('option[value=' + selectedValuea + ']').prop('disabled', true);
});
});
//if(thisValue == arr[i])
//$(this).attr('disabled', true);
});
note:
.skill-subcategory is the class used in subcategory dropdown
.skill-category is the class used in category dropdown
When I insert some thing in the input box of module 1 and click add module button to clone the required elements that I need it clones also the inserted input I've tried to prevent that using event.preventDefault(); but it's still copying the input box with the inserted input from module 1 however, I can't clear it using the clear button that is located in the input box moreover the appended select options doesn't work and when I select an option it doesn't change.
Here is my demo of what's happening:-
http://jsfiddle.net/0ojjt9Lu/6/
and here is my javascript code:
$(document).ready(function(){
$("#Sadd").click(function(event) {
event.preventDefault();
var lastId = $("#modules h1").length;
var $newLabel = $("#module-1-label").clone();
var $newSc = $("#module-1-scredit").clone();
var $newSgrade = $("#module-1-sgrade").clone();
$newLabel.html("<h1>Module " + (lastId+1) + ":</h1>");
$newSc.find("label").attr("for", "Sc"+(lastId+1));
$newSc.find("input").attr("name", "Sc"+(lastId+1)).attr("id", "Sc"+(lastId+1));
$newSgrade.find("label").attr("for", "Sgrade"+(lastId+1));
$newSgrade.find("select").attr("name", "Sgrade"+(lastId+1)).attr("id", "Sgrade"+(lastId+1));
$("#modules").append($newLabel, $newSc, $newSgrade);
});
$("#Sremove").click(function() {
var lastId = $("#modules h1").length;
if(lastId > 5){
var lastLi = $("#modules h1").last().closest("li");
var lastLi2 = lastLi.next("li");
var lastLi3 = lastLi2.next("li");
lastLi.remove();
lastLi2.remove();
lastLi3.remove();
}
});
});
Use .val("") on the new input to clear the data in on the clone
or do $(clone).find('input').val(""); if there is more than one input
In your case with the select box you need to add the following lines
After you declare (or on the same line) the variables
var $newSc = $("#module-1-scredit").clone().find('input').val("");
var $newSgrade = $("#module-1-sgrade").clone().find('option:selected').removeAttr('selected');
$newSgrade.find('option[value="-1"]').attr('selected',true);
Edit: Had to handle the reselection of the select due to default value being "-1" however you may need to look at the cloning of this select element. Perhaps on the page have the blank question hidden and just clone that.
please view what i have
$("#checkbox").change(function() {
if ($('input#checkbox').is(':checked')) {
var checkvalue = +$(this).val(),
$boxInput = $('input[name="box"]');
$boxInput.val(+$boxInput.val() + checkvalue);
} else {
var checkvalue = +$(this).val(),
$boxInput = $('input[name="box"]');
$boxInput.val(+$boxInput.val() - checkvalue);
}
});
$("#numbers").change(function() {
var firstdropvalue = +$(this).val(),
$boxInput = $('input[name="box"]');
$boxInput.val(+$boxInput.val() + firstdropvalue);
});
$("#morenumbers").change(function() {
var seconddropvalue = +$(this).val(),
$boxInput = $('input[name="box"]');
$boxInput.val(+$boxInput.val() + seconddropvalue);
});
demo:
http://jsfiddle.net/nZ9J8/1/
i want to update an input text box value from multiple dropdowns and a checkbox.
first, i don't want it to keep adding and adding each time a different dropdown selection is made.
here is breakdown...
checkbox = 0 when unchecked, 2 when checked
dropdown one has 0, 1, 2, 3, and 4
dropdown two has 0, 1, 2, 3, and 4
input text box should be checkbox + dropdown one + dropdown two
if checkbox is checked and 2 is selected in both dropdowns then it's 2 + 2 + 2 which should make text field 6.
if checkbox is unchecked and 1 is selected in dropdown one and 3 is selected in dropdown two then it's 0 + 1 + 3 which should make text field 4.
the trick is if a person changes their mind and changes the checkbox or dropdowns, the text field should update accordingly going up or down as needed.
Try this. http://jsfiddle.net/BxSU6/19/
function calculate(){
var checkVal = ($('input#checkbox').is(':checked')) ? $('input#checkbox').val() : 0;
var sum = parseIntX($("#numbers").val()) + parseIntX($("#morenumbers").val()) + parseIntX(checkVal);
$('#box').val(sum);
}
function parseIntX(num){
return (isNaN(parseInt(num))) ? 0 : parseInt(num);
}
$("#numbers, #morenumbers, #checkbox").change(function() {
calculate();
});`
I am not sure if I confused everyone with the above title. My problem is as follows.
I am using standard javascript (no jQuery) and HTML for my code. The requirement is that for the <select>...</select> menu, I have a dynamic list of varying length.
Now if the length of the option[selectedIndex].text > 43 characters, I want to change the option[selectecIndex] to a new text.
I am able to do this by calling
this.options[this.selectedIndex].text = "changed text";
in the onChange event which works fine. The issue here is once the user decides to change the selection, the dropdownlist is showing the pervious-selected-text with changed text. This needs to show the original list.
I am stumped! is there a simpler way to do this?
Any help would be great.
Thanks
You can store previous text value in some data attribute and use it to reset text back when necessary:
document.getElementById('test').onchange = function() {
var option = this.options[this.selectedIndex];
option.setAttribute('data-text', option.text);
option.text = "changed text";
// Reset texts for all other options but current
for (var i = this.options.length; i--; ) {
if (i == this.selectedIndex) continue;
var text = this.options[i].getAttribute('data-text');
if (text) this.options[i].text = text;
}
};
http://jsfiddle.net/kb7CW/
You can do it pretty simply with jquery. Here is a working fiddle: http://jsfiddle.net/kb7CW/1/
Here is the script for it also:
//check if the changed text option exists, if so, hide it
$("select").on('click', function(){
if($('option#changed').length > 0)
{
$("#changed").hide()
}
});
//bind on change
$("select").on('change', function(){
var val = $(":selected").val(); //get the value of the selected item
var text = $(':selected').html(); //get the text inside the option tag
$(":selected").removeAttr('selected'); //remove the selected item from the selectedIndex
if($("#changed").length <1) //if the changed option doesn't exist, create a new option with the text you want it to have (perhaps substring 43 would be right
$(this).append('<option id="changed" value =' + val + ' selected="selected">Changed Text</option>');
else
$('#changed').val(val) //if it already exists, change its value
$(this).prop('selectedIndex', $("#changed").prop('index')); //set the changed text option to selected;
});