Javascript Matrix Calculator with HTML form - javascript

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).

Related

Get Input field array index in jquery

I have array of input field like this;
<input type="text" name="pname[283]" value="" class="input" />
<input type="text" name="pname[678]" value="" class="input" />
<input type="text" name="pname[876]" value="" class="input" />
<input type="text" name="pname[454]" value="" class="input" />
Now i want to get the array indexes of every field inside foreach loop something like this
$('.input').each(function(e) {
console.log('get array indexes'); eg: 283, 678, 876, 454
});
You can parse the name attribute manually.
$('.input').each(function() {
const name = $(this).prop('name');
console.log(name.slice(name.indexOf('[') + 1, -1));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="pname[283]" value="" class="input" />
<input type="text" name="pname[678]" value="" class="input" />
<input type="text" name="pname[876]" value="" class="input" />
<input type="text" name="pname[454]" value="" class="input" />

How to replace the value of an input if it is less than a minimum value established?

How do I make this calculation in javascript, and how do I do it so that the final result has a minimum value of 3500?
<div id="multiplicar-fijos">
<div>
<input type="text" id="multiplicando-fijos" value="" onChange="multiplicar();" />
<input type="text" id="multiplicador-fijos" class="" value="75" onChange="multiplicar();" readonly="readonly" />
<input type="text" id="resultado_1" class="monto" onkeyup="sumar();" readonly="readonly" /><span id="Costo"></span>
</div>
<div>
<input type="text" id="multiplicando-itinerantes" value="" onChange="multiplicar2();" />
<input type="text" id="multiplicador-itinerantes" class="" value="275" onChange="multiplicar2();" readonly="readonly" />
<input type="text" id="resultado_2" class="monto" onkeyup="sumar();" readonly="readonly" />
</div>
<div>
<span>El resultado es: </span> <input type="text" id="Total" onchange="cambio(this)" />
</div>
</div>
You could simply take Math.max with the value and the wanted minimum.
Math.max(value, 3500)

HTML required tag not working for company and name

the required attribute don't seem to work for Company and Phone. It is just working for Name and Email. Can anybody help me with this?
<form>
<input type="text" name="name" value="" placeholder="Name" required />
<input type="text" name="company" value="" placeholder="Company" required />
<input type="text" name="email" value="" placeholder="Email" required />
<input type="text" name="phone" value="" placeholder="Phone" required />
<br />
<div onclick="catalog_popup_submit();"
class="button">Continue</div>
</form>
<form>
<input type="text" name="name" value="" placeholder="Name" required />
<input type="text" name="company" value="" placeholder="Company" required />
<input type="email" name="email" value="" placeholder="Email" required />
<input type="text" name="phone" pattern="[1-9]{1}[0-9]{9}" placeholder="Phone" title="Enter 10 digit mobile number"required />
<input type="submit" value="continue" />
</form>
The problem is with
<div onclick="catalog_popup_submit();"
class="button">Continue</div>
Try to include a submit button in the form.
<html>
<body>
<form>
<input type="text" name="name" value="" placeholder="Name" required />
<input type="text" name="company" value="" placeholder="Company" required />
<input type="email" name="email" value="" placeholder="Email" required />
<input type="text" name="phone" value="" placeholder="Phone" required />
<br />
<input type="submit" value="continue" />
</form>
</body>
</html>
<html>
<body>
<form>
<input type="text" name="name" value="" placeholder="Name" required />
<input type="text" name="company" value="" placeholder="Company" required />
<input type="text" name="email" value="" placeholder="Email" required />
<input type="text" name="phone" value="" placeholder="Phone" required />
<br />
<input type="submit" value="continue" />
</form>
</body>
</html>

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="" />

Is textarea a required field?

I'm building a large form that will compile tour schedules of our clients (comedians). Seen here.
Whenever I delete the larger textarea at the bottom, the form stops work, ie. the submit button doesn't do anything.
Anyone why that might be happening? Thanks.
I don't know exactly what would be helpful, but here's the code for the div containing the form:
<div class="info-avails">
<form action="http://www.standupexperts.com/cgi-sys/formmail.pl" method="post" name="hgmailer" >
<input type="hidden" name="recipient" value="adam#standupexperts.com">
<input type="hidden" name="subject" value="FormMail E-Mail">
<p> Name:<span style="color:white">X-</span> <input type="text" name="name" size="20" value="">
<span style="color:white">X.X</span>Email: <input type="text" name="email" size="30" value=""><br />
Cell #: <span style="color:white">X.</span><input type="text" name="cell" size="20" value="">
Address:<span style="color:white">X</span><input type="text" name="address" size="30" value=""><br />
Website: <input type="text" name="website" size="20" value="">
Video Link:<input type="text" name="videolink" size="30" value=""><br />
<!-- Tell us about your event. <br /> <textarea name="comment" cols="40" rows="6"></textarea> <br /> -->
</p>
<div class="avails-method">
<h3>
Our avails method
</h3>
If you cannot use the form below, you can email your schedule. Use our notation system if you want your avails entered sooner.
<a href="http://www.mediafire.com/file/wqyo8tpwq536048/2013_Comedy_Caravan_Avails_Sheet.doc">
Download</a> our 2013 avails sheet.
<br /><br />
For routing purposes, we want to know the dates you are NOT available and what state you'll be on those dates. <br /><br />
Below, <em>an X is already placed on open/available weeks</em>. For booked dates, please enter days booked and the state.
Example:<ul>
<li>12-3: X (open)</li>
<li>12-10: X 11-14 NC (open except the 10th thru 14th of Dec in NC)</li>
<li>12-17: 19 OH, 22 IN (open except for the 19th of Dec in OH and the 22nd in IN)</li>
<li>We are unable to work with <em>just</em> the day of the week (3/11: Thurs-Sun)</li>
</ul>
</div>
<br class="clear" />
<h4>
2013 Avails/Schedule
</h4>
<div class="year2013">
<div class="jan-apr">
1/07: <input type="text" name="1/07__" size="20" value="X"><br />
1/14: <input type="text" name="1/14__" size="20" value="X"><br />
1/21: <input type="text" name="1/21__" size="20" value="X"><br />
1/28: <input type="text" name="1/28__" size="20" value="X"><br />
2/04: <input type="text" name="2/04__" size="20" value="X"><br />
2/11: <input type="text" name="2/11__" size="20" value="X"><br />
2/18: <input type="text" name="2/18__" size="20" value="X"><br />
2/25: <input type="text" name="2/25__" size="20" value="X"><br />
3/04: <input type="text" name="3/04__" size="20" value="X"><br />
3/11: <input type="text" name="3/11__" size="20" value="X"><br />
3/18: <input type="text" name="3/18__" size="20" value="X"><br />
3/25: <input type="text" name="3/25__" size="20" value="X"><br />
4/01: <input type="text" name="4/01__" size="20" value="X"><br />
4/08: <input type="text" name="4/08__" size="20" value="X"><br />
4/15: <input type="text" name="4/15__" size="20" value="X"><br />
4/22: <input type="text" name="4/22__" size="20" value="X"><br />
4/29: <input type="text" name="4/29__" size="20" value="X"><br />
</div>
<div class="may-aug">
5/06: <input type="text" name="5/06__" size="20" value="X"><br />
5/13: <input type="text" name="5/13__" size="20" value="X"><br />
5/20: <input type="text" name="5/20__" size="20" value="X"><br />
5/27: <input type="text" name="5/27__" size="20" value="X"><br />
6/03: <input type="text" name="6/03__" size="20" value="X"><br />
6/10: <input type="text" name="6/10__" size="20" value="X"><br />
6/17: <input type="text" name="6/17__" size="20" value="X"><br />
6/24: <input type="text" name="6/24__" size="20" value="X"><br />
7/01: <input type="text" name="7/01__" size="20" value="X"><br />
7/08: <input type="text" name="7/08__" size="20" value="X"><br />
7/15: <input type="text" name="7/15__" size="20" value="X"><br />
7/22: <input type="text" name="7/22__" size="20" value="X"><br />
7/29: <input type="text" name="7/29__" size="20" value="X"><br />
8/05: <input type="text" name="8/05__" size="20" value="X"><br />
8/12: <input type="text" name="8/12__" size="20" value="X"><br />
8/19: <input type="text" name="8/19__" size="20" value="X"><br />
8/26: <input type="text" name="8/26__" size="20" value="X"><br />
</div>
<div class="sept-dec">
9/02: <input type="text" name="9/02__" size="20" value="X"><br />
9/09: <input type="text" name="9/09__" size="20" value="X"><br />
9/16: <input type="text" name="9/16__" size="20" value="X"><br />
9/23: <input type="text" name="9/23__" size="20" value="X"><br />
9/30: <input type="text" name="9/30__" size="20" value="X"><br />
10/07: <input type="text" name="10/07__" size="19" value="X"><br />
10/14: <input type="text" name="10/14__" size="19" value="X"><br />
10/21: <input type="text" name="10/21__" size="19" value="X"><br />
10/28: <input type="text" name="10/28__" size="19" value="X"><br />
11/04: <input type="text" name="11/04__" size="19" value="X"><br />
11/11: <input type="text" name="11/11__" size="19" value="X"><br />
11/18: <input type="text" name="11/18__" size="19" value="X"><br />
11/25: <input type="text" name="11/25__" size="19" value="X"><br />
12/02: <input type="text" name="12/02__" size="19" value="X"><br />
12/09: <input type="text" name="12/09__" size="19" value="X"><br />
12/16: <input type="text" name="12/16__" size="19" value="X"><br />
12/23: <input type="text" name="12/23__" size="19" value="X"><br />
NYE:<span style="color:white">..</span> <input type="text" name="NYE__" size="19" value="X"><br />
</div>
</div><br class="clear" />
<div class="commentsection">
Anything else you want to add?<br />
<textarea name="comment" cols="50" rows="6"></textarea>
<input type="button" value="SUBMIT" onclick="hgsubmit();" >
<input type="hidden" name="redirect" value="http://www.standupexperts.com">
</div>
</form>
</div>
else if (/\S+/.test(document.hgmailer.comment.value) == false)
alert ("Your email content is needed.");
If you remove the textarea from the form, document.hgmailer.comment no longer exists, and therefore its .value causes an error. So, if you want to delete the textarea, you must also delete this check from your JavaScript.
It is possible that the formmail.pl expects a comment field without which the submission fails validation and is ignored.
Now ideally you would modify the formmail.pl to make this comment field optional. You can also remove the text area and replace it with a <input type="hidden" name="comment" value="" /> field, that will include an empty comment field with every submission.
###Somewhat off-topic###
On the surface this setup does not look very secure to me. Without adequate security, this form could end up being abused by spammers. The main issues are that the target email address is sent from a hidden variable which spammers can easily modify. The subject as well as the contents are also coming from the form. Unless the formmail.pl has some anti-spam measures, and those are configured correctly, you would do well to either add the security or use a different script.
Never mind that, I checked and it only emails local addresses so very little chance of spam.
In the html above, if you change the submit button <input> from button to submit.it wouldn't halt.also try this in firebug or chrome element inspector.
change
<input type="button" value="SUBMIT" onclick="hgsubmit();" >
to
<input type="submit" value="SUBMIT" onclick="hgsubmit();" >
also edit javascript to prevent twice server requestion.let the html mark up do the stuff.

Categories