Develop Reference

Javascript multidimensional array loop from form inputs

I am having a problem with the array of an array. I need the function clickMe() to allow me to output an array such as [[1,1,1,1,1],[2,2,2,2,2],etc].
My problem is that right now the values come up as [1,1,1,1,1,2,2,2,2,2,etc]. I know a for loop inside a for loop would be the best way for this, but how would I get the inputs in sections of five?
Once I can figure this out, I should be able to pull from those arrays without any issues. I would prefer to keep this completely in Javascript.
var qNumber;
function onEnter() {
var qNumber = document.getElementsByName("numberBox")[0].value;
if(event.keyCode == 13) {
if (typeof(Storage) !== "undefined") {
localStorage.setItem("qNumber", qNumber);
console.log(qNumber + " stored successfully");
} else {
console.log("Sorry, your browser does not support Web Storage...");
}
var qID = document.getElementById("numBox");
var submitBtn = document.getElementById("submitButton");
var a = qNumber - 1;
var b = 0;
while (b < a) {
var formClone = document.getElementsByClassName("formBox")[0];
var listClone = formClone.cloneNode(true);
var text =b+2;
document.getElementById("forms").append(listClone);
b++;
}
return qID.parentNode.removeChild(qID);
}
return qNumber;
}
function clickMe() {
var q = localStorage.getItem("qNumber");
console.log(q);
var inputNow = [];
var allInputs = [];
var eachArray = [];
var inputNow = document.getElementsByTagName("input");
for(x=0; x < inputNow.length; x++) {
allInputs.push(inputNow[x].value);
console.log(allInputs);
}
localStorage.clear();
}
input{
display: block;
}
<div id="forms">
<span id="numBox">
<label for="numberBox">Number of Forms</label>
<input type="number" name="numberBox" onkeydown="onEnter()" />
</span>
<form id="formBox" name="formBox" action="#" onsubmit="return false;">
<label for="info1">Input 1:</label>
<input type="text" name="info1" />
<label for="info2">Input 2:
</label>
<input type="text" name="info2" />
<label for="info3">Input 3:
</label>
<input type="text" name="info3" />
<label for="info4">Input 4:
</label>
<input type="text" name="info4" />
<label for="info5">Input 5:
</label>
<input type="text" name="info5" />
</form>
</div>
<input type="submit" value="Submit" id="submitButton" onclick="clickMe()" />
<div id="content">
<span id="info1">input1</span>
<br/>
<span id="info2">input2</span>
<br/>
<span id="info3">input3</span>
<br/>
<span id="info4">input4</span>
<br/>
<span id="info5">input5</span>
</div>

You can always do something like:
var allInputs = [];
var groupInputs = [];
for (x=0; x < inputNow.length; x++) {
groupInputs.push(inputNow[x].value);
if (groupInputs.length === 5 || x === inputNow.length - 1) {
allInputs.push(groupInputs);
groupInputs = [];
}
}

Adding digits entered in input boxes with keyup event in angular js

I am looking to display the addition of four values entered in the input boxes
<td><input type="text" value="22" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="one"></td>
<td><input type="text" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="two"></td>
<td><input type="text" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="three"></td>
<td><input type="text" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="four"></td>
And this is my js
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.getkeys = function (event) {
if($scope.one==='' || $scope.two==='' || $scope.three==='' || $scope.four==="" )
{
$scope.one=parseInt("0");
$scope.two=parseInt("0");
$scope.three=parseInt("0")
$scope.four=parseInt("0")
}
$scope.keyval = parseInt($scope.one)+parseInt($scope.two)+parseInt($scope.three)+parseInt($scope.four);
console.log($scope.keyval);
}
});
what i want is as soon as someone enters the value in the input boxes ,sum of all the four gets displayed ,the problem is if firstly user enters value in any box it display NaN ,until all the four values are entered any idea how to achieve it?
And how to know which ng-model value has been entered ,just like this.value in js

This is because the other fields are empty & trying to parseInt & add an empty field value will result in NaN.Alternatively you can pass 0 if field is empty
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.getkeys = function(event) {
if ($scope.one === '' || $scope.two === '' || $scope.three === '' || $scope.four === "") {
$scope.one = parseInt("0");
$scope.two = parseInt("0");
$scope.three = parseInt("0")
$scope.four = parseInt("0")
}
$scope.keyval = parseInt(($scope.one) || 0, 10) + parseInt($scope.two || 0, 10) + parseInt($scope.three || 0, 10) + parseInt($scope.four || 0, 10);
console.log($scope.keyval);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<input type="text" value="22" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="one">
<input type="text" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="two">
<input type="text" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="three">
<input type="text" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="four"></div>
</div>

You don't need to bind a keyUp event, angularjs does that work for us.
Initialize the model one within the controller.
Create a function, i.e getTotal()
Use the object Number to convert the entered values to numbers.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.getTotal = function() {
return Number($scope.one) +
Number($scope.two) +
Number($scope.three) +
Number($scope.four)
};
$scope.one = 22;
$scope.two = 0;
$scope.three = 0;
$scope.four = 0;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" style="width:60px;margin:6px;" ng-model="one">
<input type="text" style="width:60px;margin:6px;" ng-model="two">
<input type="text" style="width:60px;margin:6px;" ng-model="three">
<input type="text" style="width:60px;margin:6px;" ng-model="four">
<p>Total</p>
<span>{{getTotal()}}</span>
</div>

Minior modification on #Ele code.
Change the input type from text to number to facilitate the key up event and disable characters to be entered
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.getTotal = function() {
return Number($scope.one) +
Number($scope.two) +
Number($scope.three) +
Number($scope.four)
};
$scope.one = 22;
$scope.two = 0;
$scope.three = 0;
$scope.four = 0;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="number" style="width:60px;margin:6px;" ng-model="one">
<input type="number" style="width:60px;margin:6px;" ng-model="two">
<input type="number" style="width:60px;margin:6px;" ng-model="three">
<input type="number" style="width:60px;margin:6px;" ng-model="four">
<p>Total</p>
<span>{{getTotal()}}</span>
</div>

getting value from input and displaying in a div

I am trying to get the value of an input and display it in a div under it, while the user is typing. and i want to do it with vanilla js. no j query.
MY HTML:
<div id="userInputBox">
<input id="inputText" type="text"
placeholder="Enter your question" size = "50" onkeyup="myDisplay()"/>
</div>
<div class="displayQuestion"></div>
MY JS:
var input = document.getElementById('inputText').value;
var showQuestion = document.getElementsByClassName('displayQuestion');
function myDisplay(e){
showQuestion.innerHTML = input;
}

Try this:
function myDisplay(e) {
var input = document.getElementById('inputText').value;
var showQuestion = document.getElementById('displayQuestion');
showQuestion.innerHTML = input;
}
<div id="userInputBox">
<input id="inputText" type="text"
placeholder="Enter your question" size = "50" onkeyup="myDisplay(this.value)"/>
</div>
<div id="displayQuestion"></div>

Here you go with VannilaJS way,
Recommendation: Change the name of the function myDisplay() to something meaningful like displayQuestion()
var targetElm = document.getElementsByClassName('displayQuestion');
var inputElm = document.getElementById('inputText');
function myDisplay() {
if(targetElm && targetElm.length > 0){
targetElm[0].innerHTML = inputElm.value;
}
}
<div id="userInputBox">
<input id="inputText" type="text"
placeholder="Enter your question" size ="50" onkeyup="myDisplay()"/>
</div>
<div class="displayQuestion"></div>

Using a checkbox to show entered values in a field to another field when a check box is clicked

Html - Delivery address has to give the entered value to billing address. The javascript and html are in separate files
Other js features are working fine, but its just this one that doesn't seem to work
<div class="textinput">
<label for="deladdress">Delivery Address: </label>
<input id="deladdress" type="text" name="Delivery Address" />
</div>
<div id="buttoncheckarea">
<input id="CheckDelivery" type="checkbox" name="CheckDelivery">
<label id="diff" for="CheckDelivery">Same as delivery address?</label>
</div>
<div class="textinput">
<label for="postcode">Postcode: </label>
<input id="postcode" type="text" name="postcode" />
</div>
<div class="textinput">
<label for="billaddress">Billing Address: </label>
<input id="billaddress" type="text" name="Billing Address" />
</div>
javascript
function deliveryfunc() {
var delivery = document.getElementById("deladdress").value;
var billing = document.getElementById("billaddress").value;
//var checkbox = document.getElementById("CheckDelivery").checked;
if (document.getElementsByName("CheckDelivery").checked == true) {
billing = delivery;
}
}
function init () {
var order = document.getElementById("ordForm");
order.onsubmit = ordervalidation;
order.onclick = radiobuttoncheck;
var checkbutton = document.getElementsByName("CheckDelivery");
checkbutton.onclick = deliveryfunc;
}
window.onload = init;

Try updating your deliveryfunc as below:
function deliveryfunc() {
var delivery = document.getElementById("deladdress");
var billing = document.getElementById("billaddress");
if (document.getElementById("CheckDelivery").checked == true) {
billing.value = delivery.value;
}
}
function init () {
var order = document.getElementById("ordForm");
order.onsubmit = ordervalidation;
order.onclick = radiobuttoncheck;
var checkbutton = document.getElementById("CheckDelivery");
checkbutton.onclick = deliveryfunc;
}
window.onload = init;

Hide and show product list on basis of multiple categories in javascript

<div class="content" data-category="shoes" data-price="1000" data-brand="Andrew">shoe1</div><br />
<div class="content" data-category="shirts" data-price="1200" data-brand="Sunbaby">shirt1</div><br />
<div class="content" data-category="shoes" data-price="2000" data-brand="Andrew">shoe2</div><br />
<div class="content" data-category="shoes" data-price="800" data-brand="Andrew">shoe3</div><br />
<div class="content" data-category="shirts" data-price="1300" data-brand="Sunbaby">shirt2</div><br />
<div class="content" data-category="shirts" data-price="800" data-brand="Sunbaby">shirt3</div><br />
<input type="checkbox" class="category" category="shoes" id="shoes">shoes
<input type="checkbox" class="category" category="shirts" id="shirts">shirts
<input type="radio" name="range" value="0-9000" checked>All
<input type="radio" name="range" value="0-999">0-1000
<input type="radio" name="range" value="1000-2000">1000-2000
Basically if you select a category from checkbox lets say shoes, then divs only with shoes should get displayed. Then if you filter the results with price, some starting and ending limit, it should show shoes category divs falling in that specific range, Not out of that range.
And in between if you select brand checkbox also.then it should match for all the three checkboxes that is from category and brand and price range
For example:- we selected shoes checkbox, it should show shoe divs; then if we select range as 1000-2000, then it should show shoe1 and shoe2 and not shoe3.
if u select shoe category and then if you select brand checkbox as well.it should filter out on both checkbox basis,and then it should look for price range and match the results,filter the divs.
Please help on this.
<script type="text/javascript">
$("input.category").prop("checked", true).change(function (e) {
$("input[name=range]:checked").trigger("change");
});
$("input.brand").prop("checked", true).change(function (e1) {
$("input[name=range]:checked").trigger("change");
});
$("input[name=range]").change(function (e) {
var toggle = this.checked;
var range = this.value.split('-');
var rangeFrom = parseInt(range[0]);
var rangeTo = parseInt(range[1]);
$(".content[data-price]").each(function(){
var $this = $(this);
var categoryActive = $("#" + $this.data("category")).prop("checked");
var brandActive = $("#" + $this.data("brand")).prop("checked");
var price = parseFloat($this.data('price'));
$this.toggle(price >= rangeFrom && price <= rangeTo && categoryActive);
$this.toggle(price >= rangeFrom && price <= rangeTo && $("#" + $this.data("brand")).prop("checked"));
});
});
</script>
i tried this script with my one buddy's help.
Thanks and Google if You can help on this

you can do something like this :
$("#shoes").click(function (e) {
$('.content[data-category=shoes]').toggle();
});

Solution
HTML
<form id="filter">
<div>
<input type="checkbox"
name="brand"
value="Andrew"
checked>Andrew
</input>
<input type="checkbox"
name="brand"
value="Sunbaby"
checked>Sunbaby
</input>
<input type="checkbox"
name="brand"
value="Nike"
checked>Nike
</input>
</div>
<div>
<input type="checkbox"
name="category"
value="shoes"
checked>Shoes
</input>
<input type="checkbox"
name="category"
value="shirts"
checked>
Shirts
</input>
</div>
<div>
<input type="radio"
name="price"
value="0-9000"
checked>All
</input>
<input type="radio"
name="price"
value="0-999">0-1000
</input>
<input type="radio"
name="price"
value="1000-2000">1000-2000
</input>
<div>
</form>
CSS
.hidden {display: none;}
JS/JQUERY
var filterContentForm = function(content, form){
var filter = function() {
var checkBoxGroups = {},
radioGroups = {};
var addRadioGroup = function(name){
radioGroups[name] = {
el: $('input[name='+name+']:checked')
};
var n = radioGroups[name];
n.el
.each(function(){
n.range = $(this).val().split('-');
n.from = Number(n.range[0]);
n.to = Number(n.range[1]);
});
};
$('#filter input[type=radio]')
.each(function(){
addRadioGroup($(this).attr('name'));
});
var addCheckBoxGroup = function(name){
checkBoxGroups[name] = {
el: $('input[name='+name+']:checked'),
ch: []
};
var n = checkBoxGroups[name];
n.el.each(function(){
n.ch.push($(this).val());
});
};
$('#filter input[type=checkbox]')
.each(function(){
addCheckBoxGroup($(this).attr('name'));
});
var contents = $(content), all = 0;
contents.removeClass('hidden')
.each(function(){
var $this = $(this),
price = $this.data('price');
for(var c in radioGroups){
var n = radioGroups[c],
d = Number($this.data(c));
if(d < n.from || d > n.to){
$this.addClass('hidden');
all++;
return;
}
}
var show = 0, i;
for(var c in checkBoxGroups){
var n = checkBoxGroups[c],
d = $this.data(c);
for(i = 0; i < n.ch.length; i++){
if(d === n.ch[i]) {
show++; break;
}
}
}
var l = Object.keys(checkBoxGroups).length;
if(show < l) {
$this.addClass('hidden');
all++;
}
});
if(all > contents.length - 1)
contents.removeClass('hidden');
};
$(form+' input').change(filter);
filter();
};
filterContentForm('.content', '#filter');