Develop Reference

HTML Input Form to a Javascript Variable

I'm trying to implement an HTML form input, of which will take the numerical value and convert it into a variable in Javascript. This will then be used with chartjs to plot an graph.
I have the graph fully functioning if I input the variable separately, as used in the code below. I have been trying to use a function to take the value from the HTML form.
var force = 10
var numberOfPointLoads = 1
var pointLoadLocation = 5
var beamLength = 10
var supportCondition = "simplySupported"
var split = beamLength //No. of Finite Elements
var splitArrayYAxis = Array.from({
length: (split + 1)
}, (x, i) => i);
var yAxis = splitArrayYAxis.map(x => (x * (beamLength / split)));
yAxis.push(pointLoadLocation)
yAxis.push(pointLoadLocation)
yAxis.sort(function(a, b) {
return a - b
});
var splitArrayXAxis = Array.from({
length: (split + 1)
}, (x, i) => i);
var xAxisEnd = splitArrayYAxis.map(x => (x * (beamLength / split)));
xAxisEnd.push(pointLoadLocation)
xAxisEnd.sort(function(a, b) {
return a - b
});
var xAxisStart = xAxisEnd.splice(0, (xAxisEnd.indexOf(pointLoadLocation) + 1));
xAxisEnd.unshift(pointLoadLocation);
var shearForce = force / 2
var xAxisStart = xAxisStart.map(x => (shearForce))
var xAxisEnd = xAxisEnd.map(x => (-shearForce))
var xAxis = xAxisStart.concat(xAxisEnd)
var data = yAxis.map((v, i) => ({
x: v,
y: xAxis[i]
}));
//chart is below this
new Chart(document.getElementById("shearPointLoad"), {
type: "scatter",
data: {
datasets: [{
label: "MyScatter",
lineTension: 0,
data: data
}]
},
options: {
stacked: false,
bezierCurve: false,
title: {
display: true,
text: 'Plot of the Scatter'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="shearPointLoad" width="400" height="250"></canvas> Force Input <input type="text" id="userInput"></input>
<button id="submitter">Submit</button>
<div id="output"></div>
The variable will be equal to the value of the HTML and will be reassigned when updated.
Thanks for any help.
EDIT
let someInput = document.getElementById('someInput')
function onButtonClick() {
let someVariable = parseFloat(someInput.value);
console.info(someVariable);
}
var force = "someVariable"
var numberOfPointLoads = 1
var pointLoadLocation = 5
var beamLength = 10
var supportCondition = "simplySupported"
var split = beamLength //No. of Finite Elements
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="shearPointLoad" width="400" height="250"></canvas>
<input id="someInput" type="number" <input/>
<button onclick="onButtonClick()">Click me</button>

Add onclick event to the button and define a function plotchart():
<button id="submitter" onclick="plotchart()">Submit</button>
Now, to read the input value in the function:
var data = document.getElementById("userInput").value;
Now, wrap all you chart plotting code inside plotchart() function.

You need to use the button event onclick, so every time you click it, you can then grab the input's value using a reference to the element. Like the following snippet:
let someInput = document.getElementById('someInput')
function onButtonClick() {
let someVariable = parseFloat(someInput.value);
console.info(someVariable);
}
<input id="someInput" type="number" />
<button onclick="onButtonClick()">Click me</button>
After this, you may use someVariable for anything you need.
Notes:
Use a type="number" input for better UX (so users can't input text or some other characters)
Consider resetting the input value after clicking the button.

Is there way to get the corresponding item using next and next all expression of jquery

I have module regarding getting the right corresponding parent item and parent child, so to get the each item and the child I use the next and nextAll expression of jquery. I will share to you guys my output right now, and the output I want to be.
This is my output right now (Which this output is wrong)
The output should be look like this
My output in my web app. as you can see on my highlighted items there is no children however in my console log when I submit the button the highlighted item repeat the output on the first item ordered
To append the item to that list I use this code.
$("tr#productClicked").click(function () {
var menu_name = $(this).closest("tr").find(".menu_name").text();
var menu_price = $(this).closest("tr").find(".menu_price").text();
var chain_id = $(this).closest("tr").find(".chain_id").text();
var menu_image = $(this).closest("tr").find(".menu_image").attr('src');
swal({
title: "Are you sure to add " + menu_name + " ?",
text: "Once you will add it will automatically send to the cart",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willInsert) => {
if (willInsert) {
swal("Successfully Added to your form.", {
icon: "success",
});
if(chain_id == 0) {
$("tbody#tbody_noun_chaining_order").
append("<tr class='condimentParent' style='background-color:'black !important',color:'white !important' '><td></td><td>"+menu_name+"</td><td class='total'>"+menu_price+"</td><td><button class='removeorderWithOutCondi btn btn-danger form-control'><i class='far fa-trash-alt'></i></button></td></tr>");
}
else
{
$.ajax({
url:'/get_noun_group_combination',
type:'get',
data:{chain_id:chain_id},
success:function(response){
var noun_chaining = response[0].noun_chaining;
$("tbody#tbody_noun_chaining_order").
append("<tr class='condimentParent' style='background-color:'black !important',color:'white !important' '><td></td><td>"+menu_name+"</td><td class='total'>"+menu_price+"</td><td><button class='removeorderWithCondi btn btn-danger form-control'><i class='far fa-trash-alt'></i></button></td></tr>");
$.each(noun_chaining, function (index, el) {
var stringify_noun_chaining = jQuery.parseJSON(JSON.stringify(el));
// console.log(stringify['menu_cat_image']);
var Qty = stringify_noun_chaining['Qty'];
var Condiments = stringify_noun_chaining['Condiments'];
var Price = stringify_noun_chaining['Price'];
var allow_to_open_condiments = stringify_noun_chaining['allow_to_open_condiments'];
var condiments_section_id = stringify_noun_chaining['condiments_section_id'];
$("tbody#tbody_noun_chaining_order").
append("<tr class='editCondiments'>\
<td class='condiments_order_quantity'>"+Qty+"</td>\
<td>*"+Condiments+"</td><td class='total'>"+Price+"</td>\
<td class='allow_to_open_condiments_conditional' style='display:none;'>"+allow_to_open_condiments+"</td>\
<td class='condi_section_id' style='display:none;'>"+condiments_section_id+"</td>\
</tr>");
})
},
error:function(response){
console.log(response);
}
});
}
}
});
This is my add to cart button when inserting the item to the database.
$('button#add_to_cart').on('click',function () {
var customer_id = $('#hidden_customer_id').val();
$parent = $(this).closest("tr.condimentParent");
var menu= $('#noun_chaining_order').find('tr.condimentParent');
menu.next('.condimentParent').add(menu).each(function(){
if(menu.length > 0 ) {
var $tds_menu = $(this).find("td");
Qty_menu = $tds_menu.eq(0).text(),
Item_menu = $tds_menu.eq(1).text(),
Price_menu = $tds_menu.eq(2).text();
console.log(Item_menu);
var condiments= $('#noun_chaining_order').find('tr.editCondiments');
condiments.nextAll('.editCondiments').add(condiments).each(function(){
var $tds_condiments = $(this).find("td");
Qty_condiments = $tds_condiments.eq(0).text(),
Item_condiments = $tds_condiments.eq(1).text(),
Price_condiments = $tds_condiments.eq(2).text();
console.log(Item_condiments);
});
}
});
});

To solved my problem i use multiple add
$('button#add_to_cart').on('click',function () {
var customer_id = $('#hidden_customer_id').val();
$parent = $(this).closest("tr.condimentParent");
var condiments= $('#noun_chaining_order').find('tr.editCondiments');
var menu= $('#noun_chaining_order').find('tr.condimentParent');
menu.next('.condimentParent').add(menu).add(condiments).each(function(){
var $tds_menu = $(this).find("td");
Qty_menu = $tds_menu.eq(0).text(),
Item_menu = $tds_menu.eq(1).text(),
Price_menu = $tds_menu.eq(2).text();
console.log(Item_menu);
// condiments.nextAll('.editCondiments').add(condiments).each(function(){
// var $tds_condiments = $(this).find("td");
// Qty_condiments = $tds_condiments.eq(0).text(),
// Item_condiments = $tds_condiments.eq(1).text(),
// Price_condiments = $tds_condiments.eq(2).text();
// console.log(Item_condiments);
// });
});
});

How to add unique id's to dynamically added controls(Asp.net MVC)

I'm pretty new to Javascript, and I was wondering how to add unique id's to my generated HTML textboxes. I'm currently using this script to create textboxes:
$(document).ready(function () {
var tbId = 'expense';
var chkId = 'Mastercard';
$("#txt").click(function () {
var br = document.createElement("br");
var ctrl = $('<input/>').attr({ type: 'text', name: 'text', value: 'Indskriv udgift', id: tbId }).addClass("form-control tb_Id");
var ctrl2 = $('<input/>').attr({ type: 'checkbox', name: 'chk', id: chkId }).addClass("chk chk_Id");
$("#ExpenseBoxes").append(br, ctrl, 'Mastercard: ', ctrl2, br);
});
});
And this is the HTML code to add and hold the textboxes:
<input type="button" id="txt" value="Add TextBox"/>
<div id="ExpenseBoxes">
</div>
I want the textbox id's to be named "expense1, expense2, expense3 ~" but I'm not sure how to go about it.

What about using a counter ?
$(document).ready(function () {
var tbId = 'expense';
var chkId = 'Mastercard';
var elementCounter = 0;
$("#txt").click(function () {
var br = document.createElement("br");
var ctrl = $('<input/>').attr({ type: 'text', name: 'text', value: 'Indskriv udgift', id: tbId + (++elementCounter) }).addClass("form-control tb_Id");
var ctrl2 = $('<input/>').attr({ type: 'checkbox', name: 'chk', id: chkId }).addClass("chk chk_Id");
$("#ExpenseBoxes").append(br, ctrl, 'Mastercard: ', ctrl2, br);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="txt" value="Add TextBox"/>
<div id="ExpenseBoxes">
</div>
Just create this var elementCounter = 0;, concat it like id: tbId + (++elementCounter) and you will get incremental ids "expense1", "expense2", "expense3" and so on.

This will work in your case
var brInput = document.createElement("br");
brInput.setAttribute("id", "uniqueIdentifier");

javaScript - Add key & value to Object

There is a forEach in my function for create Object:
Please Run code snippet:
angular.module('myApp', []).controller('myCntl', function($scope) {
$scope.t = '';
var input = "a,b,c,d,e,r \n1,1,1,1,1,1\n2,2,2,2,2,1 \n3,3,3,3,3,1";
var rows = input.split('\n');
var result = {
header: [],
body: []
};
//Get Header
var headerString = rows[0].split(',');
headerString.forEach(function(val) {
result.header.push(val);
});
rows.splice(0, 1);
rows.splice(rows.length - 1, rows.length); //delete "" row, from end array
// Get Body 'a,b,c,d,...'
rows.forEach(function(val, i) {
var bodyString = val.split(',');
var objBody = new Object;
bodyString.forEach(function(val, i) {
var strHeader = result.header[i];
objBody[strHeader] = val;
});
result.body.push(objBody);
});
$scope.result = result.body;
$scope.show = function() {
console.log($scope.result)
$scope.t = $scope.result;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" ng-app="myApp" ng-controller="myCntl">
<button ng-click="show()">click me</button>
<span ng-repeat="item in t">
{{item}}
</span>
</div>
And, this is objBody after forEach:
objBody = {
a: "1",
b: "1",
"c": "1"
}
Now, my problem is in key with double qoutation in last record of objBody.
What is it? and Why?! > ("c")

The problem was arising due to the white space between r and \n in the input string. When you split the string by \n, the rows[0] will be "a,b,c,d,e,r ". And after you split it with comma, then the last element will contain the white space like this "r ".
So just change the following line of code
var input = "a,b,c,d,e,r \n1,1,1,1,1,1\n2,2,2,2,2,1 \n3,3,3,3,3,1";
to
var input = "a,b,c,d,e,r\n1,1,1,1,1,1\n2,2,2,2,2,1\n3,3,3,3,3,1";
to fix the issue.
angular.module('myApp', []).controller('myCntl', function($scope) {
$scope.t = '';
var input = "a,b,c,d,e,r \n1,1,1,1,1,1 \n2,2,2,2,2,1 \n3,3,3,3,3,1";
input = input.replace(" ","");
console.log(input);
var rows = input.split('\n');
var result = {
header: [],
body: []
};
//Get Header
var headerString = rows[0].split(',');
headerString.forEach(function(val) {
result.header.push(val);
});
rows.splice(0, 1);
rows.splice(rows.length - 1, rows.length); //delete "" row, from end array
// Get Body 'a,b,c,d,...'
rows.forEach(function(val, i) {
var bodyString = val.split(',');
var objBody = new Object;
bodyString.forEach(function(val, i) {
var strHeader = result.header[i];
objBody[strHeader] = val;
});
result.body.push(objBody);
});
$scope.result = result.body;
$scope.show = function() {
console.log($scope.result)
$scope.t = $scope.result;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" ng-app="myApp" ng-controller="myCntl">
<button ng-click="show()">click me</button>
<span ng-repeat="item in t">
{{item}}
</span>
</div>
EDIT: You have found some answer. But my way for removing white spaces from the dynamic input string would be
input = input.replace(" ","");

I solved problem with split by regexExp:
var myRegex = new RegExp(/\s*\n/);
var rows = input.split(myRegex);
This command split every ' \n' in string. This work for me.

JavaScript error: NS_ERROR_XPC_BAD_CONVERT_JS

I am getting this JavaScript error, doing some research people are saying something about instantiating an object.
function generateRow() {
var i = pageCounter.getIP_count();
//common sense counting
i++;
var objNEWVIP = document.getElementById("IP_row_new");
var objMODIFYVIP = document.getElementById("IP_row_modify");
//common DOM elements
var memberNum = document.createTextNode('Member IP'+ i + '\u00a0');
var brNode = document.createElement('br');
var nbspSpace = document.createTextNode('\u00a0');
var resolvesTextNode = document.createTextNode('Resolves: \u00a0');
//new_IP_Octet1_Element
var new_IP_Octet1_Element = document.createElement('input');
new_IP_Octet1_Element.setAttribute('type','text');
new_IP_Octet1_Element.setAttribute('maxlength','3');
new_IP_Octet1_Element.setAttribute('size','3');
new_IP_Octet1_Element.setAttribute('name','IP'+i+'_octet1');
new_IP_Octet1_Element.setAttribute('id','IP'+i+'_octet1');
new_IP_Octet1_Element.setAttribute('value','167');
new_IP_Octet1_Element.setAttribute('size','3');
new_IP_Octet1_Element.setAttribute('hostname','IP'+i+'_hostname');
new_IP_Octet1_Element.onchange = function () { resolveMe(this.id); };
//new_IP_Octet1_Element.setAttribute('onchange', 'resolveMe(this.id);');
//new_IP_Octet2_Element
var new_IP_Octet2_Element = document.createElement('input');
new_IP_Octet2_Element.setAttribute('type','text');
new_IP_Octet2_Element.setAttribute('maxlength','3');
new_IP_Octet2_Element.setAttribute('size','3');
new_IP_Octet2_Element.setAttribute('name','IP'+i+'_octet2');
new_IP_Octet2_Element.setAttribute('id','IP'+i+'_octet2');
new_IP_Octet2_Element.setAttribute('value','69');
new_IP_Octet2_Element.setAttribute('size','3');
new_IP_Octet2_Element = function () { resolveMe(this.id); };
//new_IP_Octet2_Element.setAttribute('onchange', 'resolveMe(this.id);');
//new_IP_Octet3_Element
var new_IP_Octet3_Element = document.createElement('input');
new_IP_Octet3_Element.setAttribute('type','text');
new_IP_Octet3_Element.setAttribute('maxlength','3');
new_IP_Octet3_Element.setAttribute('size','3');
new_IP_Octet3_Element.setAttribute('name','IP'+i+'_octet3');
new_IP_Octet3_Element.setAttribute('id','IP'+i+'_octet3');
new_IP_Octet3_Element.setAttribute('value','0');
new_IP_Octet3_Element.setAttribute('size','3');
new_IP_Octet3_Element = function () { resolveMe(this.id); };
//new_IP_Octet3_Element.setAttribute('onchange', 'resolveMe(this.id);');
//new_IP_Octet4_Element
var new_IP_Octet4_Element = document.createElement('input');
new_IP_Octet4_Element.setAttribute('type','text');
new_IP_Octet4_Element.setAttribute('maxlength','3');
new_IP_Octet4_Element.setAttribute('size','3');
new_IP_Octet4_Element.setAttribute('name','IP'+i+'_octet4');
new_IP_Octet4_Element.setAttribute('id','IP'+i+'_octet4');
new_IP_Octet4_Element.setAttribute('value','0');
new_IP_Octet4_Element.setAttribute('size','3');
new_IP_Octet4_Element = function () { resolveMe(this.id); };
//new_IP_Octet4_Element.setAttribute('onchange', 'resolveMe(this.id);');
//make SPAN for DNS reverse resolution
var reverseDNS_Element = document.createElement('span');
reverseDNS_Element.setAttribute('id','IP'+i+'_hostname');
reverseDNS_Element.setAttribute('name','IP'+i+'_hostname');
//output
if (document.getElementById('requesttype').value == "new") {
objNEWVIP.appendChild(memberNum);
objNEWVIP.appendChild(new_IP_Octet1_Element);
objNEWVIP.appendChild(nbspSpace);
objNEWVIP.appendChild(new_IP_Octet2_Element);
objNEWVIP.appendChild(nbspSpace);
objNEWVIP.appendChild(new_IP_Octet3_Element);
objNEWVIP.appendChild(nbspSpace);
objNEWVIP.appendChild(new_IP_Octet4_Element);
objNEWVIP.appendChild(nbspSpace);
objNEWVIP.appendChild(resolvesTextNode);
objNEWVIP.appendChild(reverseDNS_Element);
objNEWVIP.appendChild(brNode);
}
if (document.getElementById('requesttype').value == "modify") {
objMODIFYVIP.appendChild(memberNum);
objMODIFYVIP.appendChild(new_IP_Octet1_Element);
objMODIFYVIP.appendChild(nbspSpace);
objMODIFYVIP.appendChild(new_IP_Octet2_Element);
objMODIFYVIP.appendChild(nbspSpace);
objMODIFYVIP.appendChild(new_IP_Octet3_Element);
objMODIFYVIP.appendChild(nbspSpace);
objMODIFYVIP.appendChild(new_IP_Octet4_Element);
objMODIFYVIP.appendChild(nbspSpace);
objMODIFYVIP.appendChild(resolvesTextNode);
objMODIFYVIP.appendChild(reverseDNS_Element);
objMODIFYVIP.appendChild(brNode);
}
pageCounter.addMethod("ip_count"); //increment after adding row
}
generateRow() function gets called when a user clicks a button.
What object am I instantiating...and how do I do that?
I think the problem lies with
var objNEWVIP = document.getElementById("IP_row_new");
var objMODIFYVIP = document.getElementById("IP_row_modify");
But i am unsure how to create a new object at this location...
Here is the counter function
function counterObj(){
//object to keep track of all counts across all forms
this.ipCountTotal = 0;
this.dnsElementTotal = 0;
this.approverTotal = 0;
//input methods mapping
this.clear = clearing;
this.addMethod = add;
//retreval methods mapping
this.getIP_count = function() { return(this.ipCountTotal);};
this.getDNS_count = function() { return(this.dnsElementTotal);};
this.getApprover_count = function() { return(this.approverTotal);};
//addMethod
function add(strType){
switch(strType) {
case "dns_count":
this.dnsElementTotal++;
break;
case "ip_count":
this.ipCountTotal++;
break;
case "approver_count":
this.approverTotal++;
break;
} //end swtich strType
}
//clear all
function clearing(){
this.ipCountTotal = 0;
this.dnsElementTotal = 0;
this.approverTotal = 0;
}
}
Here is the declaration:
var pageCounter = new counterObj();
pageCounter.clear()
Here are the html DIVs
<div id="ip_row_new" title="please provide the ip address of each endpoint member.">
</div>
and...
<div id="IP_row_modify">
<!-- dynamically adds new rows -->
</div>
Here is the select statement in the HTML that the user will pick....
<select id="requesttype" name="requestType" onChange="checkF5Request(this.value);" tabindex="2">
<option value="...">...</option>
<option value="new">New Request</option>
<option value="modify">Modify Request</option>
<option value="delete">Removal Request</option>
<option value="iRule_redirect">iRule Redirect</option>
</select>
Here is the error:
Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMHTMLDivElement.appendChild]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: https://request.psp :: generateRow :: line 358" data: no]

So your new_IP_Octet2_Element is a function:
new_IP_Octet2_Element = function () { resolveMe(this.id); };
..which cannot be passed to appendChild(), which requires a DOM node.
I'm not sure what's the point of this function, but if you remove it, the error on the objNEWVIP.appendChild(new_IP_Octet2_Element); should go away.

Thank you Nickolay. You got me on the right track.
The problem was with the differences with these four lines.
new_IP_Octet1_Element.onchange = function () { resolveMe(this.id); };
new_IP_Octet2_Element = function () { resolveMe(this.id); };
new_IP_Octet3_Element = function () { resolveMe(this.id); };
new_IP_Octet4_Element = function () { resolveMe(this.id); };
Needed to add the .onchange property the DOM object.
new_IP_Octet1_Element.onchange = function () { resolveMe(this.id); };
new_IP_Octet2_Element.onchange = function () { resolveMe(this.id); };
new_IP_Octet3_Element.onchange = function () { resolveMe(this.id); };
new_IP_Octet4_Element.onchange = function () { resolveMe(this.id); };