We Keep Coding

JQuery - Get values from html array inputs

A user has the capacity to add as many items as possible through html inputs. The inputs look like;
<input class="form-control" name="part_number[]" number" type="text">
<input class="form-control" name="part_number[]" number" type="text">
<input class="form-control" name="part_number[]" number" type="text">
<input class="form-control item" name="description[]" type="text">
<input class="form-control item" name="description[]" type="text">
<input class="form-control item" name="description[]" type="text">
I would like to add the items to my database for storage.. How do i iternate through each input? part number and description belong to a single row.

function getdata() {
var partNumbers = [];
var descriptions = [];
$('[name="part_number[]"]').each(function() {
partNumbers.push(this.value);
})
$('[name="description[]"]').each(function() {
descriptions.push(this.value);
})
var data = {
partNumbers: partNumbers,
descriptions: descriptions
}
$('#output').val(JSON.stringify(data))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="part_number[]" type="text" value="part number 1">
<input class="form-control" name="part_number[]" type="text" value="part number 2">
<input class="form-control" name="part_number[]" type="text" value="part number 3">
<br>
<input class="form-control item" name="description[]" type="text" value="description 1">
<input class="form-control item" name="description[]" type="text" value="description 2">
<input class="form-control item" name="description[]" type="text" value="description 3">
<hr>
<button type="button" onclick="getdata()">get data</button>
<textarea id="output" rows="10" cols="100" placeholder="output"></textarea>

If your inputs are within a form, you can use .serializeArray() and then .reduce() it to create an object which stores keys and array values for multiple input types like below. You can then submit this data to your server to then store in your database:
const data = $("#myform").serializeArray().reduce((acc, o) => {
if (o.name.slice(-2) === "[]") {
acc[o.name] = acc[o.name] || [];
acc[o.name].push(o.value);
} else {
acc[o.name] = o.value;
}
return acc;
}, {});
console.log(data); // data to POST
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
<input class="form-control" name="part_number[]" value="pn1" type="text">
<input class="form-control" name="part_number[]" value="pn2" type="text">
<input class="form-control" name="part_number[]" value="pn3" type="text">
<input class="form-control item" name="description[]" value="desc1" type="text">
<input class="form-control item" name="description[]" value="desc2" type="text">
<input class="form-control item" name="description[]" value="desc3" type="text">
<input class="form-control item" name="single_data" value="non-array data" type="text">
</form>

From your question, I understand that you want the description and part number in a row.
Please find my answer using .each function of jQuery.
The .each() function iterates through all the specified elements and it returns the index position of each element. Here I'm iterating through the part number, so I want to take the corresponding description, that is the description at the index position of part_number. To achieve this am using another jQuery selector :eq(). It will select the element at index n within the matched set.
$(".submit").on("click", function(){
let user_input = [];
$("input[name='part_number[]']").each(function(index){
user_input.push({
part_number: $(this).val(),
description: $(`.item:eq(${index})`).val()
});
});
console.log("final result = ", user_input);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="part_number[]" placeholder="number" type="text">
<input class="form-control" name="part_number[]" placeholder="number" type="text">
<input class="form-control" name="part_number[]" placeholder="number" type="text">
<input class="form-control item" name="description[]" placeholder="description" type="text">
<input class="form-control item" name="description[]" placeholder="description" type="text">
<input class="form-control item" name="description[]" placeholder="description" type="text">
<button type="submit" class="submit"> Save</button>

I would rather fix the HTML than trying to fix the data afterwards.
You have items with the values descriptionand part_number, in order to group the data i would firstly group them visually in your HTML by adding a wrapper around each part_number + description pair:
<div class="item">
<input type="text" name="part_number[]" />
<input type="text" name="decription[]" />
</div>
After that we fix the input names' and add them to a group item:
<div class="item">
<input type="text" name="item[part_number]" />
<input type="text" name="item[decription]" />
</div>
To add multiple item elements in your form you need to add an ID to each item when adding it to your form:
<div class="item">
<input type="text" name="item[0][part_number]" />
<input type="text" name="item[0][decription]" />
</div>
<div class="item">
<input type="text" name="item[1][part_number]" />
<input type="text" name="item[1][decription]" />
</div>
When adding these values to your database you can then iterate over them like so: ( I'm just guessing you will use PHP)
foreach( $_POST['item'] as $item) {
$item['part_number'];
$item['description];
}

Form to a format Javascript can read

I have a .js file that my web app uses to read today's schedule. I want this file to be easily edited, say by an HTML form.
I am trying to make an HTML form that defines all the schedules for the day. A small portion of the form is below.
<form action="/admin/special.php" method="POST">
<div data-role="fieldcontain">
<label for="date">Today's Date</label>
<input type="date" name="date" id="date" value="" /><br /><br />
<label for="code">Code</label>
<input type="text" name="code" id="code" value="" /><br /><br />
<label for="hour">Hour</label>
<input type="text" name="hour" id="hour" value="" />
<label for="minute">Minute</label>
<input type="text" name="minute" id="minute" value="" />
<label for="event">Period Name:</label>
<input type="text" name="event" id="event" value="" /><br /><br />
<input type="submit" value="Save" />
</div>
</form>
How do I turn this into something javascript can understand? My web app's schedule looks like this.
function Schedule() {
scheduletype = "Demo Schedule"
schedule = [
[sc1, 'sc1', 8, 35, "Period 1"],
[sc2, 'sc2', 9, 35, "Period 2"],
[sc3, 'sc3', 10, 35, "Period 3"],
[sc4, 'sc4', 12, 00, "Period 4"],
[sc5, 'sc5', 13, 25, "Period 5"]
];
}
Any help is appreciated.Thank you.

var form = document.querySelector("form");
function getFormData(form) {
return [].filter.call(form.querySelectorAll("input"), function(input) {
return input.type !== "submit";
}).map(function(input) {
return input.type === "number" ? +input.value : input.value;
});
}
form.addEventListener("submit", function(ev) {
console.log(getFormData(form));
ev.preventDefault();
});
<form action="/admin/special.php" method="POST">
<div data-role="fieldcontain">
<label for="date">Today's Date</label>
<input type="date" name="date" id="date" value="" /><br /><br />
<label for="code">Code</label>
<input type="text" name="code" id="code" value="" /><br /><br />
<label for="hour">Hour</label>
<input type="number" name="hour" id="hour" value="" />
<label for="minute">Minute</label>
<input type="number" name="minute" id="minute" value="" />
<label for="event">Period Name:</label>
<input type="text" name="event" id="event" value="" /><br /><br />
<input type="submit" value="Save" />
</div>
</form>

JQuery: Combine sets of field names and values into an object and then push into an array

I have a form with three sets of fields.
Like this:
<form>
<div class="food">
<input type="text" name="" value="" />
<input type="text" name="" value="" />
<textarea name="" value=""></textarea>
</div>
<div class="drinks">
<input type="text" name="" value="" />
<input type="text" name="" value="" />
<textarea name="" value=""></textarea>
</div>
<div class="gifts">
<input type="text" name="" value="" />
<input type="text" name="" value="" />
<textarea name="" value=""></textarea>
</div>
</form>
How do I combine field names and values in each div into their own json object, push the objects into an array, and then add the array to a hidden input field before submission?

You can use map() and get() to create array and inside you can return object for each div.
var data = $('form > div').map(function() {
var obj = {}
$(this).find('input, textarea').each(function() {
obj[$(this).attr('name')] = $(this).attr('value');
})
return obj;
}).get()
console.log(data)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="food">
<input type="text" name="a" value="1" />
<input type="text" name="b" value="11" />
<textarea name="c" value="111"></textarea>
</div>
<div class="drinks">
<input type="text" name="a" value="2" />
<input type="text" name="b" value="22" />
<textarea name="c" value="222"></textarea>
</div>
<div class="gifts">
<input type="text" name="a" value="3" />
<input type="text" name="b" value="33" />
<textarea name="c" value="333"></textarea>
</div>
</form>

How add value to array textbox in jquery?

How can I assign value to array named textbox?
Example:
<input type="text" name="amount[]" value="" />
<input type="text" name="amount[]" value="" />
<input type="text" name="amount[]" value="" />
Add values to Text box using jquery
$('input[name="amount[1]"]').val(20);
$('input[name="amount[2]"]').val(130);
$('input[name="amount[3]"]').val(50);
The above script is not working. Please help me to solve this problem.

You can use eq() or :eq()
$('input[name="amount[]"]').eq(0).val(20);
$('input[name="amount[]"]').eq(1).val(130);
$('input[name="amount[]"]').eq(2).val(50);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="amount[]" value="" />
<input type="text" name="amount[]" value="" />
<input type="text" name="amount[]" value="" />
or
$('input[name="amount[]"]:eq(0)').val(20);
$('input[name="amount[]"]:eq(1)').val(130);
$('input[name="amount[]"]:eq(2)').val(50);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="amount[]" value="" />
<input type="text" name="amount[]" value="" />
<input type="text" name="amount[]" value="" />

Javascript Matrix Calculator with HTML form

I have a website that teaches students finite math http://finitehelp.com.
On the site I have a calculator that does combinations and permutations and now I am trying to include a matrix calculator that will add, subtract, multiply, and inverse matrices.
I am using Javascript and the sylvester library http://sylvester.jcoglan.com/ to do the calculations. I was able to successfully create a program that would take values entered into a form by a user and do the calculations but this only works for a matrix of a specific size (4x4).
What I cannot figure it out is how to only take values from a form which are not null and create a matrix out of them and then output those values into the appropriate fields in the result form.
Some Sylvester methods I am using
// create matrix from embedded array and assign to var A
var A = $M([
[8,3,9],
[2,0,7],
[1,9,3]
]);
// create matrix from embedded array and assign to var B
var B = $M([
[4,1,2],
[1,5,3],
[1,7,2]
]);
// Multiply AB
A.x(B)
// assign product of A.x(B) to var res
var res = A.x(B)
// return the 1,1 element of res
res.e(1,1)
In my form the biggest matrix you can put in is 6x6 because they will never need to calculate matrices larger than this.
What I need the program to do is detect how large the matrices are, create sylvester matrices out of them, and assign them to variables. Once they are variables I can use sylvester to do the operations but I also will need to know how to output the results into a form.
Here is what I have so far
Javascript:
window.onload = function()
{
document.getElementById('mbutton').onclick = doCalc;
document.getElementById('subtbutton').onclick = doCalc;
document.getElementById('addbutton').onclick = doCalc;
}
function doCalc() {
// assign the inputted values to variables
var Aval1 = document.matrixCalc.AR1C1.value,
Aval2 = document.matrixCalc.AR1C2.value,
Aval3 = document.matrixCalc.AR2C1.value,
Aval4 = document.matrixCalc.AR2C2.value,
Bval1 = document.matrixCalc.BR1C1.value,
Bval2 = document.matrixCalc.BR1C2.value,
Bval3 = document.matrixCalc.BR2C1.value,
Bval4 = document.matrixCalc.BR2C2.value;
// make matrices out of the inputted values and assign to variables
var A = $M([
[Aval1,Aval2],
[Aval3,Aval4]
]);
var B = $M([
[Bval1,Bval2],
[Bval3,Bval4]
]);
// if user clicks multiply button make the values of
// the answer form show the appropriate values
if (this.value == "x") {
var res = A.x(B);
document.matrixCalc.PR1C1.value = res.e(1,1);
document.matrixCalc.PR1C2.value = res.e(1,2);
document.matrixCalc.PR2C1.value = res.e(2,1);
document.matrixCalc.PR2C2.value = res.e(2,2);
} else if (this.value == "-") {
var res = A.subtract(B);
document.matrixCalc.PR1C1.value = res.e(1,1);
document.matrixCalc.PR1C2.value = res.e(1,2);
document.matrixCalc.PR2C1.value = res.e(2,1);
document.matrixCalc.PR2C2.value = res.e(2,2);
} else if (this.value == "+") {
document.matrixCalc.PR1C1.value = parseFloat(Aval1) + parseFloat(Bval1);
document.matrixCalc.PR1C2.value = parseFloat(Aval2) + parseFloat(Bval2);
document.matrixCalc.PR2C1.value = parseFloat(Aval3) + parseFloat(Bval3);
document.matrixCalc.PR2C2.value = parseFloat(Aval4) + parseFloat(Bval4);
}
}
HTML form:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="sylvester.src.js"></script>
<script type="text/javascript" src="matrices.js"></script>
</head>
<body>
<form name="matrixCalc" action="">
<div id="matrix-a">
<p>Matrix A</p>
<input type="text" name="AR1C1" size="4" />
<input type="text" name="AR1C2" size="4" />
<input type="text" name="AR1C3" size="4" />
<input type="text" name="AR1C4" size="4" />
<input type="text" name="AR1C5" size="4" />
<input type="text" name="AR1C6" size="4" />
<br/>
<input type="text" name="AR2C1" size="4" />
<input type="text" name="AR2C2" size="4" />
<input type="text" name="AR2C3" size="4" />
<input type="text" name="AR2C4" size="4" />
<input type="text" name="AR2C5" size="4" />
<input type="text" name="AR2C6" size="4" />
<br/>
<input type="text" name="AR3C1" size="4" />
<input type="text" name="AR3C2" size="4" />
<input type="text" name="AR3C3" size="4" />
<input type="text" name="AR3C4" size="4" />
<input type="text" name="AR3C5" size="4" />
<input type="text" name="AR3C6" size="4" />
<br/>
<input type="text" name="AR4C1" size="4" />
<input type="text" name="AR4C2" size="4" />
<input type="text" name="AR4C3" size="4" />
<input type="text" name="AR4C4" size="4" />
<input type="text" name="AR4C5" size="4" />
<input type="text" name="AR4C6" size="4" />
<br/>
<input type="text" name="AR5C1" size="4" />
<input type="text" name="AR5C2" size="4" />
<input type="text" name="AR5C3" size="4" />
<input type="text" name="AR5C4" size="4" />
<input type="text" name="AR5C5" size="4" />
<input type="text" name="AR5C6" size="4" />
<br/>
<input type="text" name="AR6C1" size="4" />
<input type="text" name="AR6C2" size="4" />
<input type="text" name="AR6C3" size="4" />
<input type="text" name="AR6C4" size="4" />
<input type="text" name="AR6C5" size="4" />
<input type="text" name="AR6C6" size="4" />
</div>
<div id="matrix-b">
<p>Matrix B</p>
<input type="text" name="BR1C1" size="4" />
<input type="text" name="BR1C2" size="4" />
<input type="text" name="BR1C3" size="4" />
<input type="text" name="BR1C4" size="4" />
<input type="text" name="BR1C5" size="4" />
<input type="text" name="BR1C6" size="4" />
<br/>
<input type="text" name="BR2C1" size="4" />
<input type="text" name="BR2C2" size="4" />
<input type="text" name="BR2C3" size="4" />
<input type="text" name="BR2C4" size="4" />
<input type="text" name="BR2C5" size="4" />
<input type="text" name="BR2C6" size="4" />
<br/>
<input type="text" name="BR3C1" size="4" />
<input type="text" name="BR3C2" size="4" />
<input type="text" name="BR3C3" size="4" />
<input type="text" name="BR3C4" size="4" />
<input type="text" name="BR3C5" size="4" />
<input type="text" name="BR3C6" size="4" />
<br/>
<input type="text" name="BR4C1" size="4" />
<input type="text" name="BR4C2" size="4" />
<input type="text" name="BR4C3" size="4" />
<input type="text" name="BR4C4" size="4" />
<input type="text" name="BR4C5" size="4" />
<input type="text" name="BR4C6" size="4" />
<br/>
<input type="text" name="BR5C1" size="4" />
<input type="text" name="BR5C2" size="4" />
<input type="text" name="BR5C3" size="4" />
<input type="text" name="BR5C4" size="4" />
<input type="text" name="BR5C5" size="4" />
<input type="text" name="BR5C6" size="4" />
<br/>
<input type="text" name="BR6C1" size="4" />
<input type="text" name="BR6C2" size="4" />
<input type="text" name="BR6C3" size="4" />
<input type="text" name="BR6C4" size="4" />
<input type="text" name="BR6C5" size="4" />
<input type="text" name="BR6C6" size="4" />
<br/>
</div>
<div id="buttons">
<input type="button" id="mbutton" value="x" />
<input type="button" id="addbutton" value="+" />
<input type="button" id="subtbutton" value="-" />
</div>
<div id="matrix-c">
<p>Answer</p>
<input type="text" name="PR1C1" size="4" />
<input type="text" name="PR1C2" size="4" />
<input type="text" name="PR1C3" size="4" />
<input type="text" name="PR1C4" size="4" />
<input type="text" name="PR1C5" size="4" />
<input type="text" name="PR1C6" size="4" />
<br/>
<input type="text" name="PR2C1" size="4" />
<input type="text" name="PR2C2" size="4" />
<input type="text" name="PR2C3" size="4" />
<input type="text" name="PR2C4" size="4" />
<input type="text" name="PR2C5" size="4" />
<input type="text" name="PR2C6" size="4" />
<br/>
<input type="text" name="PR3C1" size="4" />
<input type="text" name="PR3C2" size="4" />
<input type="text" name="PR3C3" size="4" />
<input type="text" name="PR3C4" size="4" />
<input type="text" name="PR3C5" size="4" />
<input type="text" name="PR3C6" size="4" />
<br/>
<input type="text" name="PR4C1" size="4" />
<input type="text" name="PR4C2" size="4" />
<input type="text" name="PR4C3" size="4" />
<input type="text" name="PR4C4" size="4" />
<input type="text" name="PR4C5" size="4" />
<input type="text" name="PR4C6" size="4" />
<br/>
<input type="text" name="PR5C1" size="4" />
<input type="text" name="PR5C2" size="4" />
<input type="text" name="PR5C3" size="4" />
<input type="text" name="PR5C4" size="4" />
<input type="text" name="PR5C5" size="4" />
<input type="text" name="PR5C6" size="4" />
<br/>
<input type="text" name="PR6C1" size="4" />
<input type="text" name="PR6C2" size="4" />
<input type="text" name="PR6C3" size="4" />
<input type="text" name="PR6C4" size="4" />
<input type="text" name="PR6C5" size="4" />
<input type="text" name="PR6C6" size="4" />
</div>
</body>
</html>
Any help would be appreciated. When answering please keep in mind that this is only the second time I've tried to write a program so that little bit extra in the explanation could help a great deal. Thank you.

I think you will find it better to use a textarea and let users type in matrices in a much more natural format. It will require parsing the content, but that's not hard. That way users can create any size matrix. I can post a generic "parse textarea content to make an array" function a little later.
Also, the maths isn't that hard. I did it some time ago (products, addition, determinants) but can't find where I put it. Determinants were the most difficult, if I remember correctly it was a simple matter of splitting larger matrices into 2x2 matrices and adding and subtracting their determinants (everything I needed was on the Wolfram web site).