We Keep Coding

Removing a class and adding another class (Appending the HTML tag onclick)

Would I be able to add a remove button to replace the add button as of the image below and remove the values in that row from the array object that I have declared whenever I remove a certain row?
Image of the html (Partly)
Before Clone
After Clone
Desired Result
Html page
<div id="selections">
<div class="form-group row controls selection">
<label for="selection01" class="col-sm-2 col-form-label">Selection Pair</label>
<div class="col-sm-2">
<select class="form-control selection01" id="selection010" placeholder="Selection 01" onchange="addNewSelection()"></select>
</div>
<div class="col-sm-2">
<select class="form-control selection02" id="selection020" placeholder="Selection 02" onchange="addNewSelection()"></select>
</div>
<div class="col-sm-2">
<input type="number" min="0.00" max="10000.00" step="1.00" class="form-control" id="productQuantity0" placeholder="Quantity">
</div>
<div class="col-sm-2">
<input type="button" class="btn btn-success" id="addSelection" value="Add Selection" onclick="addNewSelectionPair()"></button>
</div>
</div>
</div>
Script
function addNewSelectionPair() {
// Get all selections by class
var selection = document.getElementsByClassName('selection');
// Get the last one
var lastSelection = selection[selection.length - 1];
// Clone it
var newSelection = lastSelection.cloneNode(true);
// Update the id values for the input
newSelection.children[1].children[0].id = 'selection01' + selection.length;
newSelection.children[2].childrne[0].id = 'selection02' + selection.length;
newSelection.children[3].children[0].id = 'productQuantity' + selection.length;
// Add it to selectionss
document.getElementById('selections').appendChild(newSelection)
}
function getValues() {
// Get all selections by class
var selections = document.getElementsByClassName('selection');
var values = [];
for(var i = 0; i < selections.length; i++) {
// Add the values into the array
values.push([
document.getElementById('selection01' + i).value,
document.getElementById('selection02' + i).value
document.getElementById('productQuantity' + i).value
]);
}
return values;
}

This script will duplicate the last row of inputs. It will also collect the inputs and store their values in a 3d array to process.
function addSection() {
//Get all sections by class
var sections = document.getElementsByClassName('section');
//Get the last one
var lastSection = sections[sections.length - 1];
//Clone it
var newSection = lastSection.cloneNode(true);
//Add it do sections
document.getElementById('sections').appendChild(newSection);
//Recalucate the Ids for the removal
//Ids all get shifted after adding or removing a section
calcRemovalIds();
}
function getValues() {
//Get all inputs by class
var sectionsOne = document.getElementsByClassName('section01');
var sectionsTwo = document.getElementsByClassName('section02');
var values = [];
//Loop the inputs
for(var i = 0; i < sectionsOne.length; i++) {
//Add the values to the array
values.push([
sectionsOne[i].value,
sectionsTwo[i].value
]);
}
return values;
}
function removeSection(id = undefined) {
//Get all sections by class
var sections = document.getElementsByClassName('section');
//If there is only one row left, just skip
if (sections.length == 1) return true;
//If not id was given, remove the last row
if (id == undefined) id = sections.length - 1;
//Get the last one
var lastSection = sections[id];
//Remove it
lastSection.parentNode.removeChild(lastSection);
//Recalucate the Ids for the removal
//Ids all get shifted after adding or removing a section
calcRemovalIds();
}
function calcRemovalIds() {
var btns = document.getElementsByClassName('button');
for (var i = 0; i < btns.length; i++) {
//Check if its the last button
if (i + 1 == btns.length) {
//Make it a addSection button
btns[i].innerHTML = '+';
btns[i].setAttribute('onclick', 'addSection()');
} else {
//Make is a removeSection button
btns[i].innerHTML = '-';
btns[i].setAttribute('onclick',
'removeSection(' + i +')'
);
}
}
}
<div>
<div>
<h2>Product</h2>
<input id="product" placeholder="Product" />
</div>
<div id="sections">
<div class="section">
<input class="section01" placeholder="Section One" />
<input class="section02" placeholder="Section Two" />
<button class="button" onclick="addSection()">+</button>
</div>
</div>
</div>
<button onclick="
document.getElementById('values').innerHTML = JSON.stringify(getValues());
">Get Values</button>
<div id="values"></div>

simple jquery dropdownfield update

I'm new to jQuery
I have a dropdown field and input field. Everytime I change the dropdown field, the value from the selected dropdown field needs to update in the total automatically.
The value only changes when i put something in the input field. I tested it with .change but it doesn't work
$(function() {
$('input').keyup(function() { // run anytime the value changes
var firstValue = parseFloat($('#id_turnover').val()) || 0; // get value of field
var secondValue = parseFloat($('#id_invoiced').val()) || 0; // convert it to a float
var thirdValue = parseFloat($('#id_collected').val()) || 0;
var fourthValue = parseFloat($('#id_otherfield').val()) || 0;
var total = firstValue + secondValue + thirdValue; // add them together
$('#added').html(total); // output it
$('#added2').html(total + fourthValue); // add them and output it
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="turnover">
<option value="20" id="id_turnover">kuzkit</option>
<option value="20" id="id_invoiced">testt</option>
<option value="20" id="id_collected">tetetessr</option>
<div id="container">Total<span style="clear:both;" id="added"></span>
<br>
</div>
<input type="text" id="id_otherfield" />
</select>
<div id="container2">Total + random field<span style="clear:both;" id="added2"></span>
<br>
</div>
Here is my fiddle

Add multiple events on multiple elements. Your closing </select> was wrong.
$('input, select').on('input change', function() {
// run anytime the value changes
updateTotals()
});
function updateTotals() {
var firstValue = parseFloat($('#id_turnover').val()) || 0; // get value of field
var secondValue = parseFloat($('#id_invoiced').val()) || 0; // convert it to a float
var thirdValue = parseFloat($('#id_collected').val()) || 0;
var fourthValue = parseFloat($('#id_otherfield').val()) || 0;
var total = firstValue + secondValue + thirdValue; // add them together
$('#added').text(total); // output it
$('#added2').text(total + fourthValue); // add them and output it
}
$('input, select').on('input change', function() { // run anytime the value changes
updateTotals()
});
function updateTotals() {
var firstValue = parseFloat($('#id_turnover').val()) || 0; // get value of field
var secondValue = parseFloat($('#id_invoiced').val()) || 0; // convert it to a float
var thirdValue = parseFloat($('#id_collected').val()) || 0;
var fourthValue = parseFloat($('#id_otherfield').val()) || 0;
var total = firstValue + secondValue + thirdValue; // add them together
$('#added').text(total); // output it
$('#added2').text(total + fourthValue); // add them and output it
}
* {
float: left;
clear: left;
margin: 10px 0;
}
#container {
clear: both;
margin: 10px 0;
}
#container2 {
clear: both;
margin: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="turnover">
<option value="20" id="id_turnover">kuzkit</option>
<option value="20" id="id_invoiced">testt</option>
<option value="20" id="id_collected">tetetessr</option>
</select>
<div id="container">Total<span style="clear:both;" id="added"></span>
</div>
<input type="text" id="id_otherfield" />
<div id="container2">Total + random field<span style="clear:both;" id="added2"></span>
</div>

Creating multiple select list options on the fly and reducing is subsequent select lists

I have been trying to solve the following problem for the last week or so, and after many searches around the internet, and on here, haven't found an exact solution for what I am trying to achieve.
This is my first post on here, and decided to post here as this forum has saved my bacon several times!
This is what I would like to happen:
User selects the number of scouts and leaders from the dropdowns.
The first tshirts (small) is populated with the number of leaders + scouts total.
if the user selects a lesser amount from the small dropdown, then the remaining amount is used to populate the medium select list, and so on upto XXL.
The following bit of code is how far I have got so far, but it seems a bit buggy, the option values append again and again if the user changes their mind, and the medium box is showing the total options rather that total - amount of small selected.
I don't know if this is the best way or if there are any better solutions?
Here goes
<form method='post' id="wawBooking" action='processWAWBooking.php' >
<div id="groupDetails" >
<fieldset>
<legend>Group Details</legend>
<label for="noScouts">Number of scouts:</label>
<select id='noScouts' name="noScouts"></select><br />
<label for="noLeaders">Number of leaders:</label>
<select id='noLeaders' name="noLeaders"></select><br />
</fieldset>
</div>
<div style="clear: both;"></div>
<div id="tshirts">
<fieldset style="height: auto;">
<legend>T-Shirts</legend>
Total: <span id='totalTshirts'></span><br />
Amount left (Total - current total): <span id='amountLeft'></span><br />
Sum of Selected: <span id='liveTotal'></span><br />
<label for='s'>Small</label>
<select id='s'></select><br />
<label for='m'>Medium</label>
<select id='m'> </select><br />
<label for='l'>Large</label>
<select id='l'></select><br />
<label for='xl'>X-Large</label>
<select id='xl'></select><br />
<label for='xxl'>XX-Large</label>
<select id='xxl'></select><br />
</fieldset>
</div>
<input type="reset" value="Reset Form" id="reset" style="float: left;"/>
<input type="button" value="Order t-shirts" id="tshirtOrder" style="float: right;"/>
<input type="submit" value="Submit Booking" style="float: right;"/>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var scouts = 20;
var leaders = 30;
// ignore this bit - using just to demonstrate
for (a = 0; a <= leaders; a++) {
$('#noScouts').append("<option value='" + a + "'>" + a + "</option>");
}
for (b = 0; b <= scouts; b++) {
$('#noLeaders').append("<option value='" + b + "'>" + b + "</option>");
}
// end of ignore section!
$('#wawBooking').change(function(){
var totalTshirts = parseInt($('#noLeaders').val()) + parseInt($('#noScouts').val());
var liveTotal = parseInt($('#s').val())
+ parseInt($('#m').val())
+ parseInt($('#l').val())
+ parseInt($('#xl').val())
+ parseInt($('#xxl').val());
if ($('#noScouts').val() && $('#noLeaders').val() > 0) {
$('#totalTshirts').empty().append(totalTshirts);
$('#liveTotal').empty().append(liveTotal);
for (i = 0; i <= totalTshirts; i++) {
$('#s').append('<option value="' + i + '">' + i + '</option>')
}
if ($('#s').val() > 0 && $('#s').val() < totalTshirts) {
var subSmallMinusTotal = parseInt(totalTshirts) - parseInt($('#s').val());
for (k = 0; k <= subSmallMinusTotal; k++) {
$('#m').append('<option value="' + k + '">' + k + '</option>')
}
}
}
});
</script>
Any suggestions or tips?
Many thanks in advance
Chris

Here's a possible solution. You might be able to tweak it to be more generic and generate the lists off a collection, but I think it'll get you started.
Example (JsFiddle)
HTML
<label for="noScouts">Number of scouts:</label>
<select id='noScouts' name="noScouts"></select><br />
<label for="noLeaders">Number of leaders:</label>
<select id='noLeaders' name="noLeaders"></select><br />
<label for="noSmall">s:</label>
<select id='noSmall' name="noSmall"></select>
<label for="noMed">m:</label>
<select id='noMed' name="noMed"></select>
<label for="noLarge">l:</label>
<select id='noLarge' name="noLarge"></select>
<label for="noXLarge">xl:</label>
<select id='noXLarge' name="noXLarge"></select>
<label for="noXXLarge">xxl:</label>
<select id='noXXLarge' name="noXXLarge"></select>
JS
var sizes = $('#sizes');
var numScouts = new selectRange('#noScouts', { max: 30 });
var numLeaders = new selectRange('#noLeaders', { max: 20 });
var total = new watchVal(0);
var small = new selectRange('#noSmall', { max: 0 });
var med = new selectRange('#noMed', { max: 0 });
var large = new selectRange('#noLarge', { max: 0 });
var xlarge = new selectRange('#noXLarge', { max: 0 });
var xxlarge = new selectRange('#noXXLarge', { max: 0 });
numScouts.change(zSetTotal);
numLeaders.change(zSetTotal);
total.change(function(e, total){
small.setMax(total);
});
small.change(function(){
med.setMax(total.value() - small.value());
});
med.change(function(){
large.setMax(total.value() - med.value() - small.value());
});
large.change(function(){
xlarge.setMax(total.value() - med.value() - small.value() - large.value());
});
xlarge.change(function(){
xxlarge.setMax(total.value() - med.value() - small.value() - large.value() - xlarge.value());
});
function zSetTotal(){
total.value(numScouts.value() + numLeaders.value());
}
function watchVal(initVal){
var _val = initVal;
var $_ctx = $(this);
$_ctx.value = function(newVal){
if(newVal){
_val = newVal;
$_ctx.trigger('change', _val);
}else{
return _val;
}
}
return $_ctx;
}
function selectRange(selector, options){
var _config = {
max: 10
};
var _select = null;
var _ctx = this;
function zInit(){
$.extend(_config, options);
if($(selector).is('select')){
_select = $(selector);
}else{
_select = $('<select />');
_select.appendTo(selector);
}
_ctx.repaint();
}
this.setMax = function(max){
_config.max = max;
this.repaint();
_select.trigger('change');
};
this.repaint = function(){
var prevPos = _select.find('> option:selected').index();
_select.empty();
for (var i = 0; i <= _config.max; i++) {
var option = $("<option />", {
'value': i,
'text': i
});
_select.append(option);
if(i === prevPos){
option.prop('selected', true);
}
}
};
this.value = function(){
return parseInt(_select.val(), 10);
};
this.change = function(fun){
_select.change(fun);
};
zInit();
}
​

jQuery: create multiple input fields on the basis of how many we select

I need to create input fields on the basis of which number was chosen from select menu,
like this code:
<select id="inputs" style="width:60px;">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
When we select 10, input fields will increase to 10 at the same time, When I select 2, it doesn't decrease from 10 to 2 :(
I think the best way might be to use replace() with a loop; unfotunately I couldn't get a solution.
$(document).ready(function() {
var scntDiv = $('#add_words');
var wordscount = 0;
var i = $('.line').size() + 1;
$('#inputs').change(function() {
var inputFields = parseInt($('#inputs').val());
for (var n = i; n < inputFields; ++ n){
wordscount++;
$('<div class="line">Word is ' + wordscount + '<input type="text" value="' + wordscount + '" /><a class="remScnt" href="#">Remove</a></div>').appendTo(scntDiv);
i++;
}
return false;
});
// Remove button
$('#add_words').on('click', '.remScnt', function() {
if (i > 1) {
$(this).parent().remove();
i--;
}
return false;
});
});
​
Could you help me please?

Try
$(function(){
$('#inputs').change(function(){
for(i=0; i < $("select option:selected").text; i++)
{
$('#divIdHere').append('<input blah blah />');
}
})
});
obviously change to suit :)

I realise that you already accepted an answer for this question, but I wasn't content to just leave the question as-is. Also: I was a little bored. Make of that what you will...
So! Here's my (belated) answer.
The benefits of my approach, or the reasoning behind it, are:
You can use the select to remove, and add, rows.
When removing rows using the select to remove rows it first removes those lines with empty inputs, and then removes whatever number of filled in input-containing rows from the end.
It allows you to use the .remScnt links as well.
Hopefully this is of some, even if only academic, use or interest to you:
function makeRow() {
var div = document.createElement('div'),
input = document.createElement('input'),
a = document.createElement('a');
t = document.createTextNode('remove');
div.className = 'line';
input.type = 'text';
a.href = '#';
a.className = 'remScnt';
a.appendChild(t);
div.appendChild(input);
div.insertBefore(a, input.nextSibling);
return div;
}
$('#inputs').change(
function() {
var num = $(this).val(),
cur = $('div.line input:text'),
curL = cur.length;
if (!curL) {
for (var i = 1; i <= num; i++) {
$(makeRow()).appendTo($('body'));
}
}
else if (num < curL) {
var filled = cur.filter(
function() {
return $(this).val().length
}),
empties = curL - filled.length,
dA = curL - num;
if (empties >= num) {
cur.filter(
function() {
return !$(this).val().length;
}).parent().slice(-num).remove();
}
else if (empties < num) {
var remainder = num - empties;
cur.filter(
function() {
return !$(this).val().length;
}).parent().slice(-num).remove();
$('div.line').slice(-remainder).remove();
}
}
else {
var diff = num - curL;
for (var i = 0; i < diff; i++) {
$(makeRow()).appendTo($('body'));
}
}
});
$('body').on('click', '.line a.remScnt', function() {
console.log($(this));
$(this).parent().remove();
});​
JS Fiddle demo.
Please note that I've made little, or (more precisely) no, attempt to ensure cross-browser usability with this. The native DOM methods used in the makeRow() function are used for (minor optimisations of increasing the) speed, using jQuery (with its cross-browser-abstractions might make things even more reliable. And is worth considering.
References:
Native vanilla JavaScript:
node.appendChild().
document.createElement().
document.createTextNode().
element.className().
node.insertBefore().
jQuery stuff:
appendTo().
change().
filter().
parent().
slice().
:text selector.
val().

okay change it a little to allow for a new list to be created.
$(function(){
$('#inputs').change(function(){
$('#divIdHere').empty()
for(i=0; i < $("select option:selected").text; i++)
{
$('#divIdHere').append('<input blah blah />');
}
})
});
that will basically empty out the contents of the div before adding them all back in again :)

you need to make you DIV before use append
just try this html
<select id="inputs" style="width:60px;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="add_words"></div>
and Jquery with this importand line scntDiv.empty();
JQuery
$(document).ready(function() {
var scntDiv = $('#add_words');
var wordscount = 1;
var i = $('.line').size() + 1;
$('#inputs').change(function() {
var inputFields = parseInt($('#inputs').val());
scntDiv.empty()
for (var i = 0; i < inputFields; i++){
scntDiv.append($('<div class="line">Word is ' + wordscount + '<input type="text" value="' + wordscount + '" />'));
}
});
});
​

You could only add new lines to make up the number of lines when the select's value increases and only remove the 'extra' lines when it decreases.
$( document ).ready(
function() {
var divs = $( 'div#add_words' );
$( '#inputs' ).change(
function(evt) {
var n = $( this ).val();
var lines = $( 'div.line' );
var numlines = lines.size();
if( n > numlines ) {
// We want more line. Add some.
while( n > numlines ) {
numlines += 1;
divs.append( '<div class="line">Line ' + numlines + '</div>' );
}
}
else {
// Remove everything after the n'th line.
lines.slice( n ).remove();
}
} )
.change();
} );

Need help in adding selected items from selectbox to div (dynamic addition)

I need to display the selected sub-categories (multi) in the below div and also in some situations I need to close the div elements that are selected wrongly from the select box, so that I can add and delete elements to the div (by the above selectbox).
Even I made the similar code, but its not working for multi selection.
Briefly, I need the selected categories (multi) with close buttons in the below div.
<script type="text/javascript">
function selectlist() {
checkboxhome = document.getElementById("check");
catogery = document.getElementById("cat");
value = catogery.options[catogery.selectedIndex].value;
checkboxhome.innerHTML = "<br/> <p>" + value + "</p>";
}
</script>
<body>
<form action="#" enctype="multipart/form-data">
<select name="cat" id="cat" onchange="selectlist();" multiple="multiple">
<option>Select subcatogery</option>
<option value="fashion">Fashion</option>
<option value="jewelry">Jewelry</option>
<option value="dresses">dresses</option>
<option value="shirts">Shirts</option>
<option value="diamonds">Diamonds</option>
</select>
<div id="check">
</div></form>
</body>
</html>

Loop over the options and check if they are selected, something like this:
function selectlist() {
var checkboxhome = document.getElementById("check");
var category = document.getElementById("cat");
checkboxhome.innerHTML = '';
for (var i = 0; i < category.options.length; i++) {
if (category[i].selected) {
checkboxhome.innerHTML += "<p>" + category.options[i].value + "</p>";
}
}
}

Here is a fiddle of what could work for you: http://jsfiddle.net/maniator/W6gnX/
Javascript:
function selectlist() {
checkboxhome = document.getElementById("check");
catogery = document.getElementById("cat");
value = getMultiple(catogery);
checkboxhome.innerHTML = "<br/> <p>" + value + "</p>";
}
function getMultiple(ob)
{
var arSelected = new Array(), length = ob.length, i = 0, indexes = [];
while (ob.selectedIndex != -1 && i < length)
{
if (ob.selectedIndex != 0 && !in_array(ob.selectedIndex, indexes)) {
indexes.push(ob.selectedIndex)
arSelected.push(ob.options[ob.selectedIndex].value);
}
ob.options[ob.selectedIndex].selected = false;
i++;
}
var count = 0;
while(count < indexes.length){
ob.options[indexes[count]].selected = true;
count ++;
}
return arSelected;
}
function in_array(needle, haystack)
{
for(var key in haystack)
{
if(needle === haystack[key])
{
return true;
}
}
return false;
}