I am needing a .li to update its text in response to the user's selections. There are three toggle switches (which currently adjust the .li with no problems), two sets of radio buttons, and an HTML5 slider. The two sets of radio buttons and slider work great together and display the resulting value in a div.
What I now need is for the value that is displayed in the div to be added to the value in the .li and adjusted whenever the user changes a radio selection or moves the slider (just like it does in the value displayed in the div).
I have this .li:
<li id="pricing" class="price"><i>$</i><span>850</span></li>
This code makes the switches change the text in .li according to the position of each switch:
(function($){
$(function(){
$('.cmn-toggle').each(function () {
$(this).change(function() {
var curr_class = '.' + $(this).attr('id');
var price = $(this).attr('data-price');
var price_box = $('.pricing-table li.price span');
$(curr_class).toggleClass('active');
if (price) {
if ($(curr_class).hasClass('active')) {
price_box.html(parseInt(price_box.html()) + parseInt(price));
}
else {
price_box.html(parseInt(price_box.html()) - parseInt(price));
}
}
});
});
});
})(jQuery);
This code takes the value of the user selections from each set of radios and the slider and displays it in the div:
function calculateTotal(){
var multi = document.getElementById('textInput').value;
var arr = document.getElementsByName('selectMedia');
var arry = document.getElementsByName('selectLength');
var tot=0;
for(var i=0; i<arr.length; i++){
if(arr[i].checked){
tot += Number(arr[i].value);
}
}
for(var i=0; i<arry.length; i++){
if(arry[i].checked){
tot += Number(arry[i].value);
}
}
document.getElementById('totalPrice').innerHTML = tot * Number(multi);
}
What do I need now to dynamically update the .li based on the value in totalPrice? If .li is 850 and totalPrice is changed to 37 then .li needs to display 887. If totalPrice is changed to 100 then the .li needs to read 950.
A jsfiddle with the rest of the code used.
Related
I have a table whose rows consist of 3 columns. 1º is a checkbox, 2º contains the colors and the 3º contains the hex.
As the user selects the colors desired by ticking the checkboxes, i imagine the colors being pushed into an arrat, that will be written to a cell as the user clicks on the save button.
I've borrowed this snippet from Mark, but it doesn't seem to run in my context:
var checkboxes = document.getElementsByTagName("input");
var selectedRows = [];
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = function() {
var currentRow = this.parentNode.parentNode;
var secondColumn = currentRow.getElementsByTagName("td")[1];
selectedRows.push(secondColumn);
};
console.log(selectedRows)
}
This is the javascript part running to load and populate the table and I'm not sure where the above snippet woud go into:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
/**
* Run initializations on sidebar load.
*/
$(function() {
// Assign handler functions to sidebar elements here, if needed.
// Call the server here to retrieve any information needed to build
// the dialog, if necessary.
google.script.run
.withSuccessHandler(function (record) { //<-- with this
showRecord(record);
})
.withFailureHandler(
function(msg, element) {
showStatus(msg, $('#button-bar'));
element.disabled = false;
})
.getRecord();
});
/**
* Callback function to display a "record", or row of the spreadsheet.
*
* #param {object[]} Array of field headings & cell values
*/
function showRecord(record) {
if (record.length) {
for (var i = 0; i < record.length-1; i++) {
// Adds a header to the table
if(i==0){
$('#sidebar-record-block').append($($.parseHTML('<div class="div-table-row"><div class="div-table-header">Sel</div><div class="div-table-header">Color</div><div class="div-table-header">Hex</div></div>')));
}
// build field name on the fly, formatted field-1234
var str = '' + i;
var fieldId = 'field-' + ('0000' + str).substring(str.length)
// If this field # doesn't already exist on the page, create it
if (!$('#'+fieldId).length) {
var newField = $($.parseHTML('<div id="'+fieldId+'"></div>'));
$('#sidebar-record-block').append(newField);
}
// Replace content of the field div with new record
$('#'+fieldId).replaceWith('<div id="'+fieldId+'" class="div-table-row"></div>');
$('#'+fieldId).append('<input type="checkbox" class="div-table-td" id=CB"'+fieldId+'"name="checkBox" </input>')
.append($('<div class="div-table-td">' + record[i].heading + '</div>'))
.append('<div class="div-table-td">' + record[i].cellval + '</div>')
}
}
}
</script>
Sample of how to get the checked tickboxes an button click
Assuming all your checkboxes are tied to a row, you can loop through all checkboxes with a query selector,
access their checked status
and save the indices of those checkboxes.
Those indices will be the same as when looping through the corresponding table rows.
Sample implementing a button click event:
var saveButton = document.getElementById("myButtonId");
saveButton.onclick = function(){
var checkedRowIndices = [];
$('input[type=checkbox]').each(function( index ) {
if($(this)[0].checked{
checkedRowIndices.push(index);
}
});
};
//now get the rows with those indeices and do something with them
I have a list of checkbox, on many pages, when I move from one page to other I need to check if any checkbox is in temporary table, if it is to mark it like checked.
$(document).on('click','.page a',function (){
for (i = 0; i < 20; i++) {
var p = $(this).attr('data-page');
//console.log(p);
x = i + 20 * p;
if (keys.indexOf(x) > -1) {
$(':input[value="'+x+'"]').prop('checked',true);
console.log(x);
}
};
});
After I click on next page (where I clicked before on checkbox) I see checked checkbox_id( in this line console.log(x); ) but they are not checked when I get to the page. The result look like this.
For display I use yii2 gridview between tags Pjax.
I have a navigation bar with 5 elements, drop down menu field, textarea and another text field. what i need:
- to disable all navigation bar elements except Home. then when i blur the text field remove attr disabled from them and activate again.
- to separate all the values in the dropdown menu field started with 001 in additional drop down menu under the master in the navigation bar without the third part in the line (url) , append values started with 002 in additional drop down menu under CSS without (url) and 003 under javascript also without (url) .
- when user click in logout option under home window close.
Demo:https://jsfiddle.net/ov43ebko/1/
here are the jQuery I have implemented:
$(document).ready(function(){
$('.css,.jscript,.jquery').attr('disabled','disabled');
$('.logOut').click(function(){
window.close();
});
// to split lines based on semicolon.
function check(){
var lines = $('.hiddenText textarea').val().split(/\n/);
var texts = [];
for (var i=0; i < lines.length; i++) {
texts.push($.trim(lines[i]));
}
for (var i=0; i < texts.length; i++) {
var removed1 = texts[i].split(';');
$(".masters").append($("<ul><li>").text(removed1[0]));
$(".css").append($("<ul><li>").text(removed1[1]));
$(".jscript").append($("<ul><li>").text(removed1[2]));
}
}
// to split dropdown menu choices to lines.
function c1() {
var resultLines = $('.filledField').find('option').size();
var textArea ="";
for (var i = 1; i <= resultLines; i++) {
var xItem = $('.filledField').find('option:nth-child(' + (i) + ')').text();
textArea += xItem ;
//code to split xItem into individual variables
}
$('.hiddenText textarea').val('');
$('.hiddenText textarea').val(textArea);
check();
}
$(".field").blur(function(){
$('.css,.jscript,.jquery').prop("disabled", false);
c1();
});
});
I have created a table which has a checkbox to select, and pagination is also there for the table. My problem is that if I select two boxes from first page and select few more in the second, only the boxes which i selected in the last page are getting displayed and the others are not coming. Please answer me if u are aware.
Here is my code :
function getSelectedEquipmentIds() {
var equipmentIds = "";
var checkboxs = document.getElementsByName("instance");
for ( var i = 0; i < checkboxs.length; i++) {
if (checkboxs[i].checked) {
equipmentIds += checkboxs[i].value + ";";
}
}
return equipmentIds;
}
I have some checkboxes with values which need sum up. When the checkboxes are checked the values get added in an array and displayed. Here is a demo link: http://jsfiddle.net/maxwellpayne/gKWmB/
However when I go to a new row it continues summing my values instead of starting afresh emptying the array on row change.The HTML code is long so please view it at the link provided.
Here is the jquery code summing them up:
var total_array = new Array();
var total_amount = 0;
$("#dailyexpense input[type=checkbox]:checked ").live('change', function() {
var check_id = $(this).attr('id');
var valu = $(this).val();
$("#tdtotals input[type=text]").each(function() {
totals_id = $(this).attr('id');
if (totals_id == check_id) {
total_array.push(valu);
total_amount = eval(total_array.join('+')).toFixed(2);
$(this).val(total_amount);
}
});
});
All help will be appreciated
PS: However is editing the code in jsfiddle and distorting everything, stop it.
Try this:
http://jsfiddle.net/gKWmB/3/
Basically we rethink the structure. If a checkbox value changes we get its parent row. Then we find all checkboxes in that row. Finally we total them and display.
//watch checkboxes
$('tr input[type=checkbox]').change( function(){
var total = 0;
//total all sibling checkboxes
$(this).parents('tr').find('input[type=checkbox]:checked').each( function() {
total += parseInt($(this).val());
});
//display the result
$(this).parents('tr').find('input[type=text]:last').val(total);
});