Develop Reference

Form Calculation in CodeIgniter

i want to do is after typing quantity, the balance and quantity should do addition and place the answer to balance automatically. this is a piece of codeigniter projet. the balance comes from database.
<form action="addnew" method="post">
<input type="text" name="io" placeholder="IN_OUT"><br>
<input type="date" name="date" placeholder="Date yyyy-mm-dd" value="<?php echo date("Y-m-d") ?>" disabled><br>
<input id="qty" type="number" name="qty" placeholder="Quantity"><?php echo $key->ns_balance; ?><br>
<input type="text" name="breed" placeholder="Breed"><br>
<input type="number" name="es_id" placeholder="Estate"><br>
<input type="number"
name="balance"
placeholder="Balance"
value="" disabled>
<br>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="Reset" value="Reset"
</form>
User interface image

try using this jquery code:
<div id="test"><input id="qty" type="number" name="qty" placeholder="Quantity"><?php echo $key->ns_balance; ?></div>
<input id="balance" type="hidden" value="<?php echo $key->ns_balance; ?>">
$("#qty").on("keyup", function(){
var qty = $("#qty").val();
var balance= parseInt($("#balance").val());
$("#test").text("Balance -"+qty*balance); //you can change the id to place result whereever you want
});

how to match password with confirm password in registration page in jsp page

I have written the following code but on submit it doesn't match password with confirm password..?
what should i do ?
please help..?
<script>
function myFunction(){
var x = document.getElementsByName("pass").value;
var y = document.getElementsByName("pass2").value;
var ok = true;
if(x !== y)
{
alert("Passwords do not match");
}
return ok;
}
</script>
<h1>Hello ! user, Please register here</h1>
<form name="f1" action="redirect.jsp" method="POST" onsubmit="return myFunction()">
First_Name : <input type="text" name="fname" value="" required="" />
<br>
<br>
Last_Name : <input type="text" name="lname" value="" required=""/>
<br>
<br>
Email : <input type="email" name="email" value="" required=""/>
<br>
<br>
Date of birth : <input type="date" name="date" value="" required="" />
<br>
<br>
Password : <input type="password" name="pass" value="" />
<br>
<br>
Confirm Password : <input type="password" name="pass2" value="" />
<br>
<br>
Address :
<br>
<br>
Street_No : <input type="text" name="street" value="" size="15" required=""/>
Near Landmark(if any) : <input type="text" name="landmark" value="" size="20" />
<br>
<br>
City : <input type="text" name="city" value="" required="" />
State : <select name="state" required="" >
<option>Select</option>
<option>Andhra Pradesh</option>
<option>Chattisgarh</option>
<option>Dehradun</option>
<option>Delhi</option>
<option>Uttar Pradesh</option>
<option>Punjab</option>
</select>
Code : <input type="number" name="code" value="" required=""/>
<br>
<br>
Mobile number : <input type="text" name="mobile" value="" size="11" required="" />
<br>
<br>
<input type="submit" value="submit" name="s1" />
<input type="reset" value="reset" />
</form>
</body>
This is my registration page. I would like to match the password and password confirmation fields with javascript, but it's not working.
What should I do?

The getElementsByName returns an array, so you need to grab the first element:
document.getElementsByName("pass")[0].value;
Better if you add ids to your inputs and use getElementById.

number increment button

I have an existing html form which use array to store multiple row values. So I do not have a specific name for the same field for different row. In the PHP page i match the row according to the index.
In the form below, how do I make the button + and - to increase and decrease the value of the quantity of the specific row?
ROW 1
<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button" onclick="inc(this)" value="+"/>
<input type="button" onclick="dec(this)" value="-"/>`
ROW 2
<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button" onclick="inc(this)" value="+"/>
<input type="button" onclick="dec(this)" value="-"/>
ROW 3
<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button" onclick="inc(this)" value="+"/>
<input type="button" onclick="dec(this)" value="-"/>

In my opinion you first should to numerate items:
<input type="text" name="product[]" />
<input id="price-1" type="text" name="price[]" value="" onChange="updatePrice(1)" /> <!-- row number -->
<input id="qty-1" type="text" name="quantity[]" value="" onChange="updatePrice(1)" />
<input type="button" onclick="inc('qty-1')" value="+"/>
<input type="button" onclick="dec('qty-1')" value="-"/>
Then use javascript to manipulate items:
<script>
function inc(id) {
stepQty(id, +1);
}
function dec(id) {
stepQty(id, -1);
}
function stepQty(id, step) {
var value = $('#'+id).val();
$('#'+id).val(value + step);
}
function updatePrice(id) {
var a = $('#price-'+id).val() || 0;
var b = $('#qty-'+id).val() || 0;
$('#'+id).val(a*b);
}
</script>

How do I create a matrix in html and then parse it to javascript?

So, I am fairly new to JavaScript and I want to create a box for the user to input matrix mxn then parse the input to JS. I know how to create row and column in html, but I have no idea with the JS.
This is what I have so far.
<div class="container">
<div class="well well-lg">
<h1 class="text-center">Jacobian Method</h1>
<p>Masukkan matrik</p>
<form id="inputField" role="form">
<input type="text" name="field00" size="3">
<input type="text" name="field01" size="3">
<input type="text" name="field02" size="3">
<input type="text" name="field03" size="3">
<br>
<input type="text" name="field10" size="3">
<input type="text" name="field11" size="3">
<input type="text" name="field12" size="3">
<input type="text" name="field13" size="3">
<br>
<input type="text" name="field20" size="3">
<input type="text" name="field21" size="3">
<input type="text" name="field22" size="3">
<input type="text" name="field23" size="3">
<br>
<input type="submit" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info">
</form>
<div id="resultField">
</div>
</div>
</div>
<script type="text/javascript">
function calcJacobian(){
var myArr = document.forms.inputField;
var myControls = myArr.elements['p_id'];
for(var i =0; i<myControls.length; i++){
var aControl = myControls[i];
document.getElementById("resultField").append=aControl;
}
}
</script>

After a few adjustments, the code is displayed below. Note that the variable name_value_array holds a map which store all values from the table, having as the key the input name and as stored value the input value.
<div class="container">
<div class="well well-lg">
<h1 class="text-center">Jacobian Method</h1>
<p>Masukkan matrik</p>
<form id="inputField" role="form">
<input type="text" name="field00" size="3">
<input type="text" name="field01" size="3">
<input type="text" name="field02" size="3">
<input type="text" name="field03" size="3">
<br>
<input type="text" name="field10" size="3">
<input type="text" name="field11" size="3">
<input type="text" name="field12" size="3">
<input type="text" name="field13" size="3">
<br>
<input type="text" name="field20" size="3">
<input type="text" name="field21" size="3">
<input type="text" name="field22" size="3">
<input type="text" name="field23" size="3">
<br>
<input type="button" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info">
</form>
<div id="resultField">
</div>
</div>
</div>
<script type="text/javascript">
function calcJacobian() {
var myArr = document.forms.inputField;
var myControls = myArr;
var name_value_array = [];
for (var i = 0; i < myControls.length; i++) {
var aControl = myControls[i];
// don't print the button value
if (aControl.type != "button") {
// store value in a map
name_value_array.push(aControl.value, aControl.name);
document.getElementById("resultField").appendChild(document.createTextNode(aControl.value + " "));
}
}
// show map values as a popup
alert(JSON.stringify(name_value_array));
}
</script>

Try the CSS selector string for 'starts with' aka ^= to grab all values with names starting with field, perhaps make it an array so as to save the name value numbers at the same time:
window.calcJacobian = function() {
var myArr = document.querySelectorAll('input[name^="field"]')
for (var i = 0; i < myArr.length; i++) {
var results = "\nfield: " + myArr[i].name.substring(5) + ", value: " + myArr[i].value;
var text = document.createTextNode(results);
document.querySelector('#resultField').appendChild(text);
}
}
#resultField {
white-space: pre-line;
}
<div class="container">
<div class="well well-lg">
<h1 class="text-center">Jacobian Method</h1>
<p>Masukkan matrik</p>
<form id="inputField" role="form">
<input type="text" name="field00" size="3" />
<input type="text" name="field01" size="3" />
<input type="text" name="field02" size="3" />
<input type="text" name="field03" size="3" />
<br>
<input type="text" name="field10" size="3" />
<input type="text" name="field11" size="3" />
<input type="text" name="field12" size="3" />
<input type="text" name="field13" size="3" />
<br>
<input type="text" name="field20" size="3" />
<input type="text" name="field21" size="3" />
<input type="text" name="field22" size="3" />
<input type="text" name="field23" size="3" />
<br>
<input type="button" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info" />
</form>
<div id="resultField"></div>
</div>
</div>

My javascript calculator is not holding onto values

VERY simple javascript calculator at http://trailmeister.com/calculator.html
The function "Calculate" happens on any variable input change, and the "Calculate" link runs a simple function that fills the value of the form element "tripweight" with an arbitrary value (for now) - it sems to work, then immediately reverts to empty... ideas?
Javascript (form is below):
function calculate(){
safecarry();
//tripweight();
tackweightsub();
}
/* SAFE CARRY */
function safecarry(){
document.forms['calculator'].safecarry.value = document.forms['calculator'].equineweight.value * .2
}
/* TOTAL TRIP WEIGHT*/
function tripweight() {
document.forms['calculator'].tripweight.value = 12
}
// riderweight+tackweightsub+gearweightsub+foodweightsub
/* CAPACITY
function
safecarry-triptotal
*/
/* PERCENTAGE
function
capacity / safecarry
*/
/* TACK WEIGHT SUBTOTAL */
function tackweightsub(){
document.forms['calculator'].tackweightsub.value = parseFloat(saddle.value) + parseFloat(saddlepad.value) + parseFloat(bridle.value) + parseFloat(reins.value) + parseFloat(crupper.value) + parseFloat(saddlebags.value) + parseFloat(cantlebags.value) + parseFloat(pommelbags.value) + parseFloat(packsaw.value) + parseFloat(othertack.value)
}
/* CAMP WEIGHT SUBTOTAL */
function campweightsub(){
document.forms['calculator'].campweightsub.value = parseFloat(sleepingbag.value) + parseFloat(sleepingpad.value) + parseFloat(tent.value) + parseFloat(tarp.value) + parseFloat(waterfilter.value) + parseFloat(campstove.value) + parseFloat(stovefuel.value) + parseFloat(cookpot.value) + parseFloat(highline.value) + parseFloat(othercamp.value)
}
/* FOOD WEIGHT SUBTOTAL*/
function foodweightsub(){
document.forms['calculator'].foodweightsub.value = parseFloat(humanfood.value) + parseFloat(equinefood.value) + parseFloat(otherfood.value)
}
<form class="form" id="calculator" name="calculator">
<h2> PACK WEIGHT CALCULATOR </h2>
<p class="name">Equine Weight: <input onchange="calculate();" name="equineweight" type="text" placeholder="Equine Weight" value="1100" id="equineweight" /></p>
<p class="name">Pounds Your Horse Can Safely Carry: <input readonly="readonly" name="safecarry" type="text" value="220" placeholder="" id="safecarry" /></p>
<p class="name">Riders Weight: <input = name="riderweight" type="text" value="175" placeholder="" id="riderweight" /></p>
<p class="name">Total Weight for your trip: [ calculate ] <input = name="tripweight" type="text" placeholder="" id="tripweight" /></p>
</p>
<hr>
<p class="name">Capacity: <input name="capacity" type="text" value="0" placeholder="" id="capacity" /></p>
<p class="name">Percentage Over Optimal: <input name="percentage" type="text" value="0" placeholder="" id="percentage" /></p>
</p>
<hr>
<p class="name">Tack Weight Subtotal: <input readonly="readonly" name="tackweightsub" type="text" value="43" placeholder="" id="tackweightsub" /></p>
<p class="name">Saddle: <input onchange="calculate();" name="saddle" type="text" value="31" placeholder="" id="saddle" /></p>
<p class="name">Saddle Pad: <input onchange="calculate();" name="saddlepad" type="text" value="5" placeholder="" id="saddlepad" /></p>
<p class="name">Bridle: <input onchange="calculate();" name="bridle" type="text" value="0.75" placeholder="" id="bridle" /></p>
<p class="name">Reins: <input onchange="calculate();" name="reins" type="text" value="1" placeholder="" id="reins" /></p>
<p class="name">Crupper: <input onchange="calculate();" name="crupper" type="text" value="0.5" placeholder="" id="crupper" /></p>
<p class="name">Saddle Bags: <input onchange="calculate();" name="saddlebags" type="text" value="1" placeholder="" id="saddlebags" /></p>
<p class="name">Cantle Bags: <input onchange="calculate();" name="cantlebags" type="text" value="0.75" placeholder="" id="cantlebags" /></p>
<p class="name">Pommel Bags: <input onchange="calculate();" name="pommelbags" type="text" value="0.5" placeholder="" id="pommelbags" /></p>
<p class="name">Pack Saw: <input onchange="calculate();" name="packsaw" type="text" value="2" placeholder="" id="packsaw" /></p>
<p class="name">First Aid Kit: <input onchange="calculate();" name="firstaid" type="text" value="0.5" placeholder="" id="firstaid" /></p>
<p class="name">Other: <input onchange="calculate();" name="othertack" type="text" value="0" placeholder="" id="othertack" /></p>
</p>
<hr>
<p class="name">Camp Weight Subtotal: <input readonly="readonly" name="campweightsub" type="text" value="8" placeholder="" id="campweightsub" /></p>
<p class="name">Sleeping Bag: <input onchange="calculate();" name="sleepingbag" type="text" value="2" placeholder="" id="sleepingbag" /></p>
<p class="name">Sleeping Pad: <input onchange="calculate();" name="sleepingpad" type="text" value="1" placeholder="" id="sleepingpad" /></p>
<p class="name">Tent: <input onchange="calculate();" name="tent" type="text" value="1" placeholder="" id="tent" /></p>
<p class="name">Tarp: <input onchange="calculate();" name="tarp" type="text" value="0.5" placeholder="" id="tarp" /></p>
<p class="name">Water Filter: <input onchange="calculate();" name="waterfilter" type="text" value="0.5" placeholder="" id="waterfilter" /></p>
<p class="name">Camp Stove: <input onchange="calculate();" name="campstove" type="text" value="0.25" placeholder="" id="campstove" /></p>
<p class="name">Stove Fuel: <input onchange="calculate();" name="stovefuel" type="text" value="0.5" placeholder="" id="stovefuel" /></p>
<p class="name">Cook Pot: <input onchange="calculate();" name="cookpot" type="text" value="0.75" placeholder="" id="cookpot" /></p>
<p class="name">Highline Kit: <input onchange="calculate();" name="highline" type="text" value="1" placeholder="" id="highline" /></p>
<p class="name">Other: <input onchange="calculate();" name="othercamp" type="text" value="0" placeholder="" id="othercamp" /></p>
</p>
<hr>
<p class="name">Food Weight Subtotal: <input readonly="readonly" name="foodweightsub" type="text" value="4.5" placeholder="" id="foodweightsub" /></p>
<p class="name">Human Food: <input onchange="calculate();" name="humanfood" type="text" value="2.5" placeholder="" id="humanfood" /></p>
<p class="name">Equine Food: <input onchange="calculate();" name="equinefood" type="text" value="2" placeholder="" id="equinefood" /></p>
<p class="name">Other: <input onchange="calculate();" name="otherfood" type="text" value="0" placeholder="" id="otherfood" /></p>
</p>
<hr>
<div class="ease"></div>
</form>

Your <a> tag is reloading the entire page. To prevent this add "#" to the href attribute. Like this:
[ calculate ]