Operations on Javascript Array Element

Operations on Javascript Array Element - javascript

With the following code, in the function placeOrder() I cannot get the calculations to work using the price[] array elements and the chairAmtA(and the following amount variables I have). It always returns the answer as NaN. What is wrong with the code and how do I fix it?
<title>
Ryan Weiland, Assignment 2
</title>
<!--Load stylesheet-->
<link rel="stylesheet" type="text/css" href="assignment2.css">
<!--Load description variables-->
<script type="text/javascript" src="script.js" >
</script>
<script>
<!--Initilize variables for calculations-->
var chairCost = 50;
var deskCost = 150;
var rockerCost = 250;
var tableCost = 200;
var ftstlCost = 75;
var fname;
var lname;
var streetName;
var cityName;
var state;
var zip;
var phoneOne;
var phoneTwo;
var phoneThree;
var chairAmt;
var deskAmt;
var rockerAmt;
var tableAmt;
var ftstlAmt;
function orderTotal(){
//window.alert("This Function Works");
//Personal Information
var fname = document.items.first.value;
var lname = document.items.last.value;
var streetName = document.items.street.value;
var cityName = document.items.city.value;
var state = document.items.state.value;
var zip = document.items.zipCode.value;
var phoneOne = document.items.pOne.value;
var phoneTwo = document.items.pTwo.value;
var phoneThree = document.items.pThree.value;
//Item Aomount
chairAmt = document.items.chairs.value;
deskAmt = document.items.desks.value;
rockerAmt = document.items.rockers.value;
tableAmt = document.items.tables.value;
ftstlAmt = document.items.ftstls.value;
//Calculations
//Chair Total
var costChairT = chairAmt*chairCost;
//Desk Total
var costDeskT = deskAmt*deskCost;
//Rocker Total
var costRockerT = rockerAmt*rockerCost;
//Table Total
var costTableT = tableAmt*tableCost;
//Footstool Total
var costFtstlT = ftstlAmt*ftstlCost;
//Overall Total Cost
var totalCost = costChairT + costDeskT + costRockerT + costTableT + costFtstlT;
//Personal Total
var personalTotal = fname + " " + lname + "\n" + streetName + ", \n" + cityName + " " + state + ", \n" + zip + "\nPhone Number: " + phoneOne + "- " + phoneTwo + "- " +phoneThree + "\n";
//New window with everything retrieved
window.alert(personalTotal + "Total Cost: $" + totalCost);
}
function placeOrder(chairsAmt, desksAmt, rockersAmt, tablesAmt, ftstlsAmt) {
//window.alert("placeOrder runs");
var order = [];
//Prices in array
var prices = [50, //Chair
150, //Desk
250, //Rocking Chair
200, //Table
75]; //Footstool
//Personal Information
order[0] = document.items.first.value;
order[1] = document.items.last.value;
order[2] = document.items.street.value;
order[3] = document.items.city.value;
order[4] = document.items.state.value;
order[5] = document.items.zipCode.value;
order[6] = document.items.pOne.value;
order[7] = document.items.pTwo.value;
order[8] = document.items.pThree.value;
//Item Aomount
var chairAmtA = document.items.chairs.value;
var deskAmtA = document.items.desks.value;
var rockerAmtA = document.items.rockers.value;
var tableAmtA = document.items.tables.value;
var ftstlAmtA = document.items.ftstls.value;
var prices = "Prices\nChair: " + prices[0] + "\nDesk: " + prices[1] + "\nRocking Chair: " + prices[2] + "\nTable: " + prices[3] + "\nFootstool: " + prices[4] + "\n\n";
//Chair Total
var chairCostA = chairAmtA * prices[0];
//Desk Total
var deskCostA = deskAmtA * prices[1];
//Rocker Total
var rockerCostA = rockerAmtA * prices[2];
//Table Total
var tableCostA = tableAmtA * prices[3];
//Footstool Total
var ftstlCostA = ftstlAmtA * prices[4];
//Overall Total Cost
var totalCostA = chairCostA + deskCostA + rockerCostA + tableCostA + ftstlCostA;
//Personal Total
personalTotalA= order[0] + " " + order[1] + "\n"
+ order[2] + ", " + order[3] + "\n"
+ order[4] + ", " + order[5] + "\n"
+ "Phone Number: " + order[6] + "-" + order[7] + "-" + order[8] + "\n\n";
//Quantity ordered
var quantity = "Chairs Ordered: " + chairAmtA + "\nDesks Ordered: " + deskAmtA + "\nRocking Chairs Ordered: " + rockerAmtA + "\nTables Ordered: " + tableAmtA + "\nFootstools Ordered: " + ftstlAmtA + "\n\n";
//New window with everything retrieved
var x = window.confirm(personalTotalA + quantity + prices + "\nTotal Cost: $" + totalCostA);
if(x ==true)
window.alert("Your order has been placed!");
else
window.alert("Your order has been cancled.");
}
</script>
<h1>Swanson's Woodworking</h1>
<h2>Customer Order Form</h2>
<br />
<!--List of items-->
<form name="items">
<br />
<br />
<!--Chair-->
Click the button for a description.
<input type="radio" name="items" onclick="document.item.itemDesc2.value=chairDesc" />
<b>Chair($50)</b>
<br />
<!--Desk-->
Click the button for a description.
<input type="radio" name="items" onclick="document.item.itemDesc2.value=deskDesc" />
<b>Desk($150)</b>
<br />
<!--Rocking Chair-->
Click the button for a description.
<input type="radio" name="items" onclick="document.item.itemDesc2.value=rockerDesc" />
<b>Rocking Chair($250)</b>
<br />
<!--Table-->
Click the button for a description.
<input type="radio" name="items" onclick="document.item.itemDesc2.value=tableDesc" />
<b>Table($200)</b>
<br />
<!--Footstool-->
Click the button for a description.
<input type="radio" name="items" onclick="document.item.itemDesc2.value=ftstlDesc" />
<b>Footstool($75)</b>
<br />
<!--Textarea for descriptions-->
<p>
<textarea name="itemDesc2" cols="30" rows="5" style="background-color: transparent; border: 1; font-size:20px; overflow: hidden; color: #5e0000">
</textarea>
</p>
<!--Information Form-->
<!--Personal Information-->
First Name: <input type="text" name="first">
<br /><br />
Last Name : <input type="text" name="last">
<br /><br />
Street Address:<input type="text" name="street">
<br /><br />
City: <input type="text" name="city">
<br /><br />
State: <input type="text" name="state">
<br /><br />
Zip Code: <input type="text" name="zipCode">
<br /><br />
Phone Number: (<input type="text" name="pOne" size="3">) - <input type="text" name="pTwo" size="3"> - <input type="text" name="pThree" size="4">
<br /><br />
<!--List of items-->
Chairs Desired: <input type="number" name="chairs">
<br /><br />
Desks Desired: <input type="number" name="desks">
<br /><br />
Rocking Chairs Desired: <input type="number" name="rockers">
<br /><br />
Tables Desired: <input type="number" name="tables">
<br /><br />
Footstools Desired: <input type="number" name="ftstls">
<br /><br />
</form>
<!--Calculate your total order.-->
<input type = "button" onclick = "orderTotal()" value = "Calculate your total order" > <!--Button for total-->
<br /><br >
<input type = "button" onclick = "placeOrder()" value = "Place Order" > <!--Button for total-->

Looks like youre trying to subtract two strings:
console.log("12"-"13");
You need to convert all inputs ( they are strings) to numbers:
val=input.value.toNumber();
Or:
val=(+input.value);

Related

Having some problem in displaying the output of javascript

can anyone tell me what is wrong with my coding and why it is not displaying the output and keeps showing me the prompt only? there is something wrong in my if statements and I can't figure out what it is I tried many things but it still now working any suggestions? it supposes to be the same as the picture the final output and the prompt must show only when I write zero days like the picture prompt
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:orange;
margin:20px;
}
</style>
<title> Assignment2</title>
</head>
<body>
<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>
<form>
<label><b> GUEST:</b> </label>
<input type="text" id="fname" size="20" >
<input type="text" id="lname" size="20" >
<br>
<label style="margin-left:65px"> First Name </label>
<label style="margin-left:105px"> Last Name </label>
<br><br>
<label ><b>Arrival Date:</b></label>
<input type="date" id="date">
<br><br>
<label><b>Room Type:</b></label>
<select id="room">
<option value=30>King $30</option>
<option value=20>Double $20</option>
<option value=10>Single $10</option>
</select>
<br><br>
<label><b> Number of Days:</b></label>
<input type="text" size="12" id="days">
<br><br>
<label><b> Any Special Request:</b></label>
<br>
<textarea rows="5" cols="50" id="request"></textarea>
<br>
<button type="reset" STYLE="background-color:red;border:offset;" > CLEAR </button>
<button type="submit" onClick="myFunction()" STYLE="background-color:red;border:offset;" > BOOK </button>
</form>
<p style="background-color:blue;" id="result"> </p>
<script>
var Fname= document.getElementById("fname").value;
var Lname= document.getElementById("lname").value;
var date= document.getElementById("date").value;
var days= document.getElementById("days").value;
var request= document.getElementById("request").value;
var total="";
function myFunction(){
var n = Number(document.getElementById("days").value);
var val= Number( document.getElementById("room").value);
var total="";
if (n<=0){
n=prompt(" minimum reservation period is 1 day try again");
}
else if (val == "King $30") {
total = n * 30;
}
else if (val == "Double $20") {
total = n * 20;
}
else if (val == "Single $10") {
total = n * 10;
} else {
}
document.getElementById("result").innerHTML = " Dear " + Fname + Lname + " , thank you for booking with us."+
"<br>"+" Expected Arrival Date: " + date +
"<br>" + " Booked: " + val + " for " + n + "days " +
"<br>" +"Amount:=$ " + total +
"<br>" + " Any Special Request: " + request ;
};
</script>
</body>
</html>

Do not use form with no action
Check this out:
function myFunction() {
var Fname = document.getElementById("fname").value;
var Lname = document.getElementById("lname").value;
var date = document.getElementById("date").value;
var days = document.getElementById("days").value;
var request = document.getElementById("request").value;
var val = Number(document.getElementById("room").value);
var n = Number(document.getElementById("days").value);
var total = "";
if (n < 3) {
console.log(n);
n = alert("Minimum reservation period is 2 daye try again");
} else if (val == "King $30") {
total = n * 30;
} else if (val == "Double 20") {
total = n * 20;
} else if (val == "Single 10") {
total = n * 10;
} else {
}
document.getElementById("result").innerHTML = " Dear " + Fname + ' ' + Lname + " , thank you for booking with us.";
document.getElementById("result1").innerHTML = " Expected Arrival Date: " + date;
document.getElementById("result2").innerHTML = " Booked: " + val + " for " + days + "days ";
document.getElementById("result3").innerHTML = " Amount:=$ " + total;
document.getElementById("result4").innerHTML = " Any Special Request: " + request;
window.location.hash = '#result';
};
<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>
<label><b> GUEST:</b> </label>
<input type="text" id="fname" size="20">
<input type="text" id="lname" size="20">
<br>
<label style="margin-left:65px"> First Name </label>
<label style="margin-left:105px"> Last Name </label>
<br><br>
<label><b>Arrival Date:</b></label>
<input type="date" id="date">
<br><br>
<label><b>Room Type:</b></label>
<input list="room">
<datalist id="room">
<option value="King $30">
<option value="Double $20">
<option value="Single $10">
</datalist>
<br><br>
<label><b> Number of Days:</b></label>
<input type="number" id="days">
<br><br>
<label><b> Any Special Request:</b></label>
<br>
<textarea rows="5" cols="50" id="request"></textarea>
<br>
<button type="reset" STYLE="background-color:red;border:offset;"> CLEAR </button>
<button type="submit" onClick="myFunction()" STYLE="background-color:red;border:offset;"> BOOK </button>
<p style="background-color:blue;" id="result"> </p>
<p style="background-color:blue;" id="result1"> </p>
<p style="background-color:blue;" id="result2"> </p>
<p style="background-color:blue;" id="result3"> </p>
<p style="background-color:blue;" id="result4"> </p>

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: orange;
margin: 20px;
}
</style>
<title> Assignment2</title>
</head>
<body>
<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>
<label><b> GUEST:</b> </label>
<input type="text" id="fname" size="20">
<input type="text" id="lname" size="20">
<br>
<label style="margin-left:65px"> First Name </label>
<label style="margin-left:105px"> Last Name </label>
<br><br>
<label><b>Arrival Date:</b></label>
<input type="date" id="date">
<br><br>
<label><b>Room Type:</b></label>
<select id="room">
<option value=30>King $30</option>
<option value=20>Double $20</option>
<option value=10>Single $10</option>
</select>
<br><br>
<label><b> Number of Days:</b></label>
<input type="text" size="12" id="days">
<br><br>
<label><b> Any Special Request:</b></label>
<br>
<textarea rows="5" cols="50" id="request"></textarea>
<br>
<button type="reset" STYLE="background-color:red;border:offset;"> CLEAR </button>
<button type="submit" onClick="myFunction()" STYLE="background-color:red;border:offset;"> BOOK </button>
<p style="background-color:blue;" id="result"> </p>
<script>
function myFunction() {
var n = Number(document.getElementById("days").value);
var val = Number(document.getElementById("room").value);
var Fname = document.getElementById("fname").value;
var Lname = document.getElementById("lname").value;
var date = document.getElementById("date").value;
var days = document.getElementById("days").value;
var request = document.getElementById("request").value;
var total = "";
if (n <= 0) {
n = prompt(" minimum reservation period is 1 day try again");
} else if (val == "King $30") {
total = n * 30;
} else if (val == "Double $20") {
total = n * 20;
} else if (val == "Single $10") {
total = n * 10;
} else {}
document.getElementById("result").innerHTML = " Dear " + Fname + Lname + " , thank you for booking with us." +
"<br>" + " Expected Arrival Date: " + date +
"<br>" + " Booked: " + val + " for " + n + "days " +
"<br>" + "Amount:=$ " + total +
"<br>" + " Any Special Request: " + request;
window.location.hash = '#result';
};
</script>
</body>
</html>

var Fname = document.getElementById("fname").value;
var Lname = document.getElementById("lname").value;
var date = document.getElementById("date").value;
var days = document.getElementById("days").value;
var request = document.getElementById("request").value;
var total = "";
function myFunction() {
var val = Number(document.getElementById("room").value);
var n = Number(document.getElementById("days").value);
if (n <= 0) {
console.log(n);
prompt(" minimum reservation period is 1 day try again");
} else if (val == "King $30") {
total = n * 30;
} else if (val == "Double $20") {
total = n * 20;
} else if (val == "Single $10") {
total = n * 10;
} else {}
document.getElementById("result").innerHTML = " Dear " + Fname + Lname + " , thank you for booking with us." +
"<br>" + " Expected Arrival Date: " + date +
"<br>" + " Booked: " + val + " for " + n + "days " +
"<br>" + "Amount:=$ " + total +
"<br>" + " Any Special Request: " + request;
};
<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>
<form>
<label><b> GUEST:</b> </label>
<input type="text" id="fname" size="20">
<input type="text" id="lname" size="20">
<br>
<label style="margin-left:65px"> First Name </label>
<label style="margin-left:105px"> Last Name </label>
<br><br>
<label><b>Arrival Date:</b></label>
<input type="date" id="date">
<br><br>
<label><b>Room Type:</b></label>
<select id="room">
<option value=30>King $30</option>
<option value=20>Double $20</option>
<option value=10>Single $10</option>
</select>
<br><br>
<label><b> Number of Days:</b></label>
<input type="number" id="days"><span id="demo"></span>
<br><br>
<label><b> Any Special Request:</b></label>
<br>
<textarea rows="5" cols="50" id="request"></textarea>
<br>
<button type="reset" STYLE="background-color:red;border:offset;"> CLEAR </button>
<button type="submit" onClick="myFunction()" STYLE="background-color:red;border:offset;"> BOOK </button>
</form>
<p style="background-color:blue;" id="result"> </p>
Try this it will work:
your function was unable to access the variables

how can i make the upper case for the full name only

How can I make the output of the first and last name only upper case? Like it is shown in the picture. I tried doing it but it only works when in the input, not the output.
function myFunction(){
var Fname= document.getElementById("fname").value;
var Lname= document.getElementById("lname").value;
var date= document.getElementById("date").value;
var days= document.getElementById("days").value;
var request= document.getElementById("request").value;
var n = document.getElementById("days").value;
var val= document.getElementById("room").value;
var total="";
if (n<=0){
n=prompt(" minimum reservation period is 1 day try again");
}
else if (val == "King $30") {
total = n * 30;
}
else if (val == "Double $20") {
total = n * 20;
}
else {
total = n * 10;
}
document.getElementById("result").innerHTML = " Dear " + Fname + " " + Lname + " , thank you for booking with us."+
"<br>"+" Expected Arrival Date: " + date +
"<br>" + " Booked: " + val + " room for " + n + " days " +
"<br>" +"Amount=$ " + total +
"<br>" + " Any Special Request: " + request ;
return false;
};
body{
background-color:orange;
margin:20px;
}
<body>
<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>
<form>
<label><b> GUEST:</b> </label>
<input type="text" id="fname" size="20" >
<input type="text" id="lname" size="20" >
<br>
<label style="margin-left:65px"> First Name </label>
<label style="margin-left:105px"> Last Name </label>
<br><br>
<label ><b>Arrival Date:</b></label>
<input type="date" id="date">
<br><br>
<label><b>Room Type:</b></label>
<select id="room">
<option></option>
<option value="King " >King $30</option>
<option value="Double ">Double $20</option>
<option value="Single ">Single $10</option>
</select>
<br><br>
<label><b> Number of Days:</b></label>
<input type="text" size="12" id="days">
<br><br>
<label><b> Any Special Request:</b></label>
<br>
<textarea rows="5" cols="50" id="request"></textarea>
<br>
<button type="reset" STYLE="background-color:red;border:offset;" > CLEAR </button>
<button type="submit" onClick="return myFunction()" STYLE="background-color:red;border:offset;" > BOOK </button>
</form>
<p style="background-color:#cce6ff;width:350px;font-weight: bold;" id="result"> </p>

Javascript has provided .toUpperCase() function for String.
var fullName = Fname + " " + Lname;
document.getElementById("result").innerHTML = " Dear " + fullName.toUpperCase() + " , thank you for booking with us."+

Use the following javascript:
The uppercase function converts to uppercase. There is a native method to convert to uppercase called toUpperCase(). More info here
function myFunction() {
var Fname = document.getElementById("fname").value;
var Lname = document.getElementById("lname").value;
var date = document.getElementById("date").value;
var days = document.getElementById("days").value;
var request = document.getElementById("request").value;
var n = document.getElementById("days").value;
var val = document.getElementById("room").value;
var total = "";
if (n <= 0) {
n = prompt(" minimum reservation period is 1 day try again");
} else if (val == "King $30") {
total = n * 30;
} else if (val == "Double $20") {
total = n * 20;
} else {
total = n * 10;
}
document.getElementById("result").innerHTML = " Dear " + capitalize(Fname) + " " + capitalize(Lname) + ", thank you for booking with us." +
"<br>" + " Expected Arrival Date: " + date +
"<br>" + " Booked: " + val + " room for " + n + " days " +
"<br>" + "Amount=$ " + total +
"<br>" + " Any Special Request: " + request;
return false;
};
function capitalize(e) {
return e.toUpperCase()
}
body {
background-color: orange;
margin: 20px;
}
<body>
<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>
<form>
<label><b> GUEST:</b> </label>
<input type="text" id="fname" size="20">
<input type="text" id="lname" size="20">
<br>
<label style="margin-left:65px"> First Name </label>
<label style="margin-left:105px"> Last Name </label>
<br><br>
<label><b>Arrival Date:</b></label>
<input type="date" id="date">
<br><br>
<label><b>Room Type:</b></label>
<select id="room">
<option></option>
<option value="King ">King $30</option>
<option value="Double ">Double $20</option>
<option value="Single ">Single $10</option>
</select>
<br><br>
<label><b> Number of Days:</b></label>
<input type="text" size="12" id="days">
<br><br>
<label><b> Any Special Request:</b></label>
<br>
<textarea rows="5" cols="50" id="request"></textarea>
<br>
<button type="reset" STYLE="background-color:red;border:offset;"> CLEAR </button>
<button type="submit" onClick="return myFunction()" STYLE="background-color:red;border:offset;"> BOOK </button>
</form>
<p style="background-color:#cce6ff;width:350px;font-weight: bold;" id="result"> </p>

More than one form on a single page with conflicting outputs. Need Javascript only solution

I posted a similar question before, but I failed to clarify I want to avoid using jQuery or any outside sources of code. I simply want to be able to have two or more forms existing on a single page that function independent of one another. I assume it's somewhere in my HTML and scripting where I have failed to identify the right output, please help.
<form name="Form1" onsubmit="return false;" action="">
<b><font color="#2C3E60">Name:</font></b><br>
<input type="text" name="name" id="name" placeholder="Name"><br>
<b><font color="#2C3E60">Phone number:</font></b><br>
<input type="text" name="phone" id="phone" placeholder="Phone number"><br>
<b><font color="#2C3E60">Yes/No?:</font></b> <br>
<select type="drop" name="Question1" id="question1">
<option value="Select Yes or No">...</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br>
<b><font color="#2C3E60">Yes/No 2?:</font></b><br>
<select type="drop" name="Question2" id="question2">
<option value="Select Yes, No or n/a">...</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="n/a">n/a</option>
</select>
<br>
<b><font color="#2C3E60">Notes:</font></b><br>
<textarea type="textarea" name="Notes" id="notes" placeholder="Problem"
cols="70" rows="3"></textarea>
<br>
<b><font color="#2C3E60">Issue:</font></b><br>
<textarea type="textarea" name="Issue" id="issue" placeholder="Issue"
cols="70" rows="6"></textarea>
<br>
<b><font color="#2C3E60">Action:</font></b><br>
<textarea type="textarea" name="Action" id="action" placeholder="Action"
cols="70" rows="10"></textarea>
<br>
<textarea type="textarea" name="form1output"
onclick="this.focus();this.select()" id="output" cols="70" rows="25"
placeholder="Output"></textarea>
<br>
<div class="btn-group">
<button value="Combine" onclick="convert()" id="combine1">Combine</button>
<br><br>
</div>
<div class="btn-group">
<button type="reset" value="Reset form">Reset form</button> <br><br>
</div>
</form>
<hr>
<form name="Form2" onsubmit="return false;" action="">
<b><font color="#2C3E60">Name:</font></b><br>
<input type="text" name="Name2" id="name2" placeholder="Name"><br>
<b><font color="#2C3E60">Phone Number:</font></b><br>
<input type="text" name="Currentnumber" id="currentnumber"
placeholder="Corrent phone number"><br>
<b><font color="#2C3E60">Y or N:</font></b> <br>
<select type="drop" name="YESNO" id="yesno">
<option value="Select Yes or No">...</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br>
<b><font color="#2C3E60">Did you offer self serve?:</font></b><br>
<select type="drop" name="Selfserve" id="SSO">
<option value="Select Yes, No or n/a">...</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="n/a">n/a</option>
</select>
<br>
<b><font color="#2C3E60">Problem:</font></b><br>
<textarea type="textarea" name="Problem" id="problem" placeholder="Problem"
cols="70" rows="3"> </textarea>
<br>
<b><font color="#2C3E60">Issue:</font></b><br>
<textarea type="textarea" name="Issue" id="issue2" placeholder="Issue"
cols="70" rows="6"> </textarea>
<br>
<b><font color="#2C3E60">Action:</font></b><br>
<textarea type="textarea" name="Action" id="action2" placeholder="Action"
cols="70" rows="10"></textarea>
<br>
<textarea type="textarea" name="form2output" id="output2"
onclick="this.focus();this.select()" cols="70" rows="25"
placeholder="Output"></textarea>
<br>
<div class="btn-group">
<button value="Combine" onclick="convert2()" id="combine2">Combine</button>
<br><br>
</div>
<div class="btn-group">
<button type="reset" value="Reset form">Reset form</button> <br><br>
</div>
</form>
My first script
<script>
/*Reset command*/
$(document).ready(function(){
$(":reset").css("background-color", "");
});
</script>
<script>
function wordwrap(str, width, brk, cut) {
brk = brk || '\n';
width = width || 60;
cut = cut || false;
if (!str)
return str;
var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' :
'|\\S+?(\\s|$)');
return str.match( RegExp(regex, 'g') ).join(brk);
}
function convert() {
var name = document.getElementById("name").value;
var phone = document.getElementById("phone").value;
var question1 = document.getElementById("question1").value;
var question2 = document.getElementById("question2").value;
var notes = document.getElementById("notes").value;
var issue = document.getElementById("issue").value;
var action = document.getElementById("action").value;
//input = wordwrap(input, 70, true);
var output = "";
output += "Name: " + name + "\n";
output += "Number: " + phone + "\n";
output += "Question 1?: " + question1 + "\n";
output += "Question 2?: " + question2 + "\n\n";
output += "Notes: " + notes + "\n\n";
output += "Issue: " + issue + "\n\n";
output += "Action: " + action + " ";
document.getElementById("output").value = output;
}
function myFunction(x) {
x.classList.toggle("change");
}
</script>
And the second...
<script>
if (!str)
return str;
var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' :
'|\\S+?(\\s|$)');
return str.match( RegExp(regex, 'g') ).join(brk);
}
function convert2() {
var Name2 = document.getElementById("name2").value;
var Currentnumber = document.getElementById("currentnumber").value;
var YESNO = document.getElementById("yesno").value;
var selfserve = document.getElementById("SSO").value;
var problem = document.getElementById("problem").value;
var issue2 = document.getElementById("issue2").value;
var action2 = document.getElementById("action2").value;
//input = wordwrap(input, 70, true);
var output = "";
output += "Name2: " + name2 + "\n";
output += "Current number: " + currentnumber + "\n";
output += "Yes No?: " + yesno + "\n";
output += "Self Serve?: " + selfserve + "\n\n";
output += "Problem: " + problem + "\n\n";
output += "Issue: " + issue2 + "\n\n";
output += "Action: " + action2 + " ";
document.getElementById("output2").value = output;
}
function myFunction(x) {
x.classList.toggle("change");
}
</script>
As I said, I need everything for the code to exist on just the one page.

JQuery is useful in this case to speed up your development process , but if you want this approach with pure JS this can help you
function convert(currentForm){
var fields = currentForm.elements;
var limit = fields.length;
var output = "";
for(var i = 0; i < limit; i++){
var field = fields[i];
if(field.getAttribute("data-use") !== "true"){
continue;
}
var value = null;
if (field.type === "input" || field.type === "textarea"){
value = field.value;
}
if(field.type === "select-one"){
value = field.options[field.selectedIndex].value;
}
var label = field.name + ": " + value + "\n";
output += label;
}
var outputContainer = document.getElementById("output");
outputContainer.innerHTML = output;
return false;
}
You should set data-use="true" attribute for every input/field you want to capture.
In your form tag you should replace onsubmit="return convert(this); instead onsubmit="return false"
Hope it helps you.
Here a demo

your have some syntaxic errors
here a corrected code
function wordwrap(str, width, brk, cut) {
brk = brk || '\n';
width = width || 60;
cut = cut || false;
if (!str)
return str;
var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' :
'|\\S+?(\\s|$)');
return str.match( RegExp(regex, 'g') ).join(brk);
}
function convert() {
var name = document.getElementById("name").value;
var phone = document.getElementById("phone").value;
var question1 = document.getElementById("question1").value;
var question2 = document.getElementById("question2").value;
var notes = document.getElementById("notes").value;
var issue = document.getElementById("issue").value;
var action = document.getElementById("action").value;
//input = wordwrap(input, 70, true);
var output = "";
output += "Name: " + name + "\n";
output += "Number: " + phone + "\n";
output += "Question 1?: " + question1 + "\n";
output += "Question 2?: " + question2 + "\n\n";
output += "Notes: " + notes + "\n\n";
output += "Issue: " + issue + "\n\n";
output += "Action: " + action + " ";
document.getElementById("output").value = output;
}
/////// second
function convert1() {
var name2 = document.getElementById("name2").value;
var currentnumber = document.getElementById("currentnumber").value;
var yesno = document.getElementById("yesno").value;
var selfserve = document.getElementById("SSO").value;
var problem = document.getElementById("problem").value;
var issue2 = document.getElementById("issue2").value;
var action2 = document.getElementById("action2").value;
//input = wordwrap(input, 70, true);
var output = "";
output += "Name2: " + name2 + "\n";
output += "Current number: " + currentnumber + "\n";
output += "Yes No?: " + yesno + "\n";
output += "Self Serve?: " + selfserve + "\n\n";
output += "Problem: " + problem + "\n\n";
output += "Issue: " + issue2 + "\n\n";
output += "Action: " + action2 + " ";
document.getElementById("output2").value = output;
}

Javascript dynamic inputs calculation

I have a form which is dynamic and it calculates duration time. I can insert rows by clicking on Add a new row.
My problem starts from the second row which can not be calculated because it is dynamic. Could you please help me with that.
Thanks
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var FieldCount = 1; //to keep track of text box added
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
FieldCount++;
wrapper.append('From → <input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal()" /> : <input type="text" name="fromminutes" id="fromminutes' + FieldCount + '" onblur="cal()" /> | To → <input type="text" name="tohours" id="tohours' + FieldCount + '" onblur="cal()" /> : <input type="text" name="tominutes" id="tominutes' + FieldCount + '" onblur="cal()" /> | Result → <input type="text" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box
}
});
wrapper.on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
function cal() {
var fromhours = parseInt(document.getElementById('fromhours').value) * 60;
var fromminutes = parseInt(document.getElementById('fromminutes').value);
var tohours = parseInt(document.getElementById('tohours').value) * 60;
var tominutes = parseInt(document.getElementById('tominutes').value);
var resultfrom = fromhours + fromminutes;
var resultto = tohours + tominutes;
var result = resultto - resultfrom;
var hourresult = parseInt(result / 60);
var minutesresult = (result - (hourresult * 60));
document.getElementById('resulthours').value = '0' + hourresult.toFixed(0);
document.getElementById('resultminutes').value = ('0' + minutesresult).slice(-2);
}
input[type=text] {
width: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="margin-left:28px;" type="image" class="add_field_button" value="Add a new row" />
<br />From →
<input type="text" name="fromhours" id="fromhours" onblur="cal()" />:
<input type="text" name="fromminutes" id="fromminutes" onblur="cal()" />| To →
<input type="text" name="tohours" id="tohours" onblur="cal()" />:
<input type="text" name="tominutes" id="tominutes" onblur="cal()" />| Result →
<input type="text" name="resulthours" id="resulthours" />:
<input type="text" name="resultminutes" id="resultminutes" />
<br />
<br />
<div class="input_fields_wrap"></div>
My problem is from the second row I can't get my result to work

You need to refer the current element row id by adding x as follows
wrapper.append('From →
<input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal(x)" /> ...
function cal(x) {
var fromhours = parseInt(document.getElementById('fromhours'+x).value) * 60;
...
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var FieldCount = 1; //to keep track of text box added
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
FieldCount++;
wrapper.append('From → <input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal('+FieldCount +')" /> : <input type="text" name="fromminutes" id="fromminutes' + FieldCount + '" onblur="cal('+FieldCount +')" /> | To → <input type="text" name="tohours" id="tohours' + FieldCount + '" onblur="cal('+FieldCount +')" /> : <input type="text" name="tominutes" id="tominutes' + FieldCount + '" onblur="cal('+FieldCount +')" /> | Result → <input type="text" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box
}
});
wrapper.on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
function cal(x) {
x=x||"";
var fromhours = parseInt(document.getElementById('fromhours'+x).value) * 60;
var fromminutes = parseInt(document.getElementById('fromminutes'+x).value);
var tohours = parseInt(document.getElementById('tohours'+x).value) * 60;
var tominutes = parseInt(document.getElementById('tominutes'+x).value);
var resultfrom = fromhours + fromminutes;
var resultto = tohours + tominutes;
var result = resultto - resultfrom;
var hourresult = parseInt(result / 60);
var minutesresult = (result - (hourresult * 60));
document.getElementById('resulthours'+x).value = '0' + hourresult.toFixed(0);
document.getElementById('resultminutes'+x).value = ('0' + minutesresult).slice(-2);
}
input[type=text] {
width: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="margin-left:28px;" type="image" class="add_field_button" value="Add a new row" />
<br />From →
<input type="text" name="fromhours" id="fromhours" onblur="cal()" />:
<input type="text" name="fromminutes" id="fromminutes" onblur="cal()" />| To →
<input type="text" name="tohours" id="tohours" onblur="cal()" />:
<input type="text" name="tominutes" id="tominutes" onblur="cal()" />| Result →
<input type="text" name="resulthours" id="resulthours" />:
<input type="text" name="resultminutes" id="resultminutes" />
<br />
<br />
<div class="input_fields_wrap"></div>

I am not a JS expert, but could it have something to do with the fact, that you refer to the rows under the same ID attribute? As far as I can see you're not specifying to the code which one of the rows to calculate.
See #Bellash answer for a possible solution

You forgot to pass the fieldCount number inside the cal() function and concatenate it with the field ids, so the cal() function always used the first row of text fields.
I've corrected your snippet for you.
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var FieldCount = 1; //to keep track of text box added
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
FieldCount++;
wrapper.append('From → <input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> : <input type="text" name="fromminutes" id="fromminutes' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> | To → <input type="text" name="tohours" id="tohours' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> : <input type="text" name="tominutes" id="tominutes' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> | Result → <input type="text" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box
}
});
wrapper.on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
function cal(fieldCount) {
console.log(arguments);
var fromhours = parseInt(document.getElementById('fromhours' + fieldCount).value) * 60;
var fromminutes = parseInt(document.getElementById('fromminutes' + fieldCount).value);
var tohours = parseInt(document.getElementById('tohours' + fieldCount).value) * 60;
var tominutes = parseInt(document.getElementById('tominutes' + fieldCount).value);
var resultfrom = fromhours + fromminutes;
var resultto = tohours + tominutes;
var result = resultto - resultfrom;
var hourresult = parseInt(result / 60);
var minutesresult = (result - (hourresult * 60));
document.getElementById('resulthours' + fieldCount).value = '0' + hourresult.toFixed(0);
document.getElementById('resultminutes' + fieldCount).value = ('0' + minutesresult).slice(-2);
}
input[type=text] {
width: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="margin-left:28px;" type="image" class="add_field_button" value="Add a new row" />
<br />From →
<input type="text" name="fromhours" id="fromhours1" onblur="cal(1)" />:
<input type="text" name="fromminutes" id="fromminutes1" onblur="cal(1)" />| To →
<input type="text" name="tohours" id="tohours1" onblur="cal(1)" />:
<input type="text" name="tominutes" id="tominutes1" onblur="cal(1)" />| Result →
<input type="text" name="resulthours" id="resulthours1" />:
<input type="text" name="resultminutes" id="resultminutes1" />
<br />
<br />
<div class="input_fields_wrap"></div>

You have to get the unique id and use that in your calculations. In the JS I replaced the function with an on keyup and added a statement to prevent the NaN
JS
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var FieldCount = 1; //to keep track of text box added
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
FieldCount++;
wrapper.append('From → <input type="text" class="cal" name="fromhours" id="fromhours' + FieldCount + '" /> : <input type="text" class="cal" name="fromminutes" id="fromminutes' + FieldCount + '" /> | To → <input type="text" class="cal" name="tohours" id="tohours' + FieldCount + '" /> : <input type="text" class="cal" name="tominutes" id="tominutes' + FieldCount + '" /> | Result → <input type="text" class="cal" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" class="cal" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box
}
});
wrapper.on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
$('body').on('keyup', '.cal', function () {
var id = $(this).attr('id').substr(-1),
fromhours = ~~$('#fromhours' + id).val(),
fromminutes = ~~$('#fromminutes' + id).val(),
tohours = ~~$('#tohours' + id).val(),
tominutes = ~~$('#tominutes' + id).val();
if (fromhours != '' && fromminutes != '' && tohours != '' && tominutes != '') {
var resultfrom = (fromhours * 60) + fromminutes,
resultto = (tohours * 60) + tominutes,
result = resultto - resultfrom,
hourresult = ~~(result/60),
minuteresult = ~~(result - hourresult * 60);
$('#resulthours' + id).val(hourresult);
$('#resultminutes' + id).val(minuteresult);
}
});
HMTL
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="margin-left:28px;" type="image" class="add_field_button" value="Add a new row" />
<br />From →
<input type="text" class="cal" name="fromhours" id="fromhours1" />:
<input type="text" class="cal" name="fromminutes" id="fromminutes1" /> | To →
<input type="text" class="cal" name="tohours" id="tohours1" />:
<input type="text" class="cal" name="tominutes" id="tominutes1" /> | Result →
<input type="text" class="cal" name="resulthours" id="resulthours1" />:
<input type="text" class="cal" name="resultminutes" id="resultminutes1" />
<br />
<br />
<div class="input_fields_wrap"></div>

On a iterative ajax call only last response showing. why?

On a Java EE application i have the following on click function
function calculateK() {
var matD = "" + $('.dr1c1').val() + "__" + $('.dr1c2').val() + "__" + $('.dr1c3').val()
+ "__" + $('.dr2c1').val() + "__" + $('.dr2c2').val() + "__" + $('.dr2c3').val()
+ "__" + $('.dr3c1').val() + "__" + $('.dr3c2').val() + "__" + $('.dr3c3').val();
var h = '5';
var it = 0;
var cellB = '';
var cellJ = '';
var cellK = '';
for (it = 1; it < 5; it++) {
cellB = '.b' + it;
cellJ = '.jc' + it;
cellK = '.k' + it;
var bb1 = $(cellB + 'r1c1').val();
var bb2 = $(cellB + 'r1c2').val();
var bb3 = $(cellB + 'r2c1').val();
var bb4 = $(cellB + 'r2c2').val();
var bb5 = $(cellB + 'r3c1').val();
var bb6 = $(cellB + 'r3c2').val();
var jj = $(cellJ).val();
$.ajax({
url: '/M08CDECUStructuralOptimiser/ServletMatrix1?action=calculateJ',
data: {matrixB: "" + bb1 + "__" + bb2 + "__" + bb3 + "__" + bb4 + "__" + bb5 + "__" + bb6, matrixD: matD, valJ: jj},
dataType: "json",
success: function(response) {
$(cellK+'1').val(response[0]);
$(cellK+'2').val(response[1]);
$(cellK+'3').val(response[2]);
$(cellK+'4').val(response[3]);
$(cellK+'5').val(response[4]);
$(cellK+'6').val(response[5]);
$(cellK+'7').val(response[6]);
$(cellK+'8').val(response[7]);
$(cellK+'9').val(response[8]);
}
});
}
}
On the servlet
try {
if (action.compareTo("calculateJ") == 0) {
String matrixStringB = request.getParameter("matrixB");
String[] tempStringArray;
tempStringArray = matrixStringB.split("__");
double[][] array = {{Double.parseDouble(tempStringArray[0]), Double.parseDouble(tempStringArray[1])},
{Double.parseDouble(tempStringArray[2]), Double.parseDouble(tempStringArray[3])},
{Double.parseDouble(tempStringArray[4]), Double.parseDouble(tempStringArray[5])}};
Matrix b = new Matrix(array);
Matrix bT = b.transpose();
Matrix c = b.times(bT);
//System.out.println(Arrays.deepToString(c.getArray()));
String matrixStringD = request.getParameter("matrixD");
String[] tempStringArray2;
tempStringArray2 = matrixStringD.split("__");
double[][] arrayD = {{Double.parseDouble(tempStringArray2[0]), Double.parseDouble(tempStringArray2[1]), Double.parseDouble(tempStringArray2[2])},
{Double.parseDouble(tempStringArray2[3]), Double.parseDouble(tempStringArray2[4]), Double.parseDouble(tempStringArray2[5])},
{Double.parseDouble(tempStringArray2[6]), Double.parseDouble(tempStringArray2[7]), Double.parseDouble(tempStringArray2[8])}};
Matrix d = new Matrix(arrayD);
Matrix r1 = c.times(d);
String matrixStringJ = request.getParameter("valJ");
double valj = Double.parseDouble(matrixStringJ);
Matrix r2 = r1.times(valj);
double valh = 1.5;
Matrix r3 = r2.times(valh);
double[][] resultArray = r3.getArray();
double[] oneDArray = new double[resultArray.length * resultArray.length];
//Flatten 2D array to 1D array...
int s = 0;
for (int i = 0; i < resultArray.length; i++) {
for (int j = 0; j < resultArray.length; j++) {
oneDArray[s] = resultArray[i][j];
s++;
}
}
Gson gson = new GsonBuilder().setPrettyPrinting().create();
String json = gson.toJson(oneDArray);
//System.out.println(oneDArray.length);
System.out.println(Arrays.deepToString(r3.getArray()));
out.println(json);
}
} finally {
}
Now on the console i am getting all 4 array and there value properly but on the site only the last k value is showing k41,k42,.......k49
How to fix this?
when i try the js loop as limit it<2 it shows the k11,k12,......k19 value properly.
Html:
<div class="showK" >
<table>
<tr>
<td>
K1
</td>
<td>
<input type="text" class="k11" value="" />
<input type="text" class="k12" value="" />
<input type="text" class="k13" value="" />
<br />
<input type="text" class="k14" value="" />
<input type="text" class="k15" value="" />
<input type="text" class="k16" value="" />
<br />
<input type="text" class="k17" value="" />
<input type="text" class="k18" value="" />
<input type="text" class="k19" value="" />
<br />
</td>
</tr>
<tr>
<td>
K2
</td>
<td>
<input type="text" class="k21" value="" />
<input type="text" class="k22" value="" />
<input type="text" class="k23" value="" />
<br />
<input type="text" class="k24" value="" />
<input type="text" class="k25" value="" />
<input type="text" class="k26" value="" />
<br />
<input type="text" class="k27" value="" />
<input type="text" class="k28" value="" />
<input type="text" class="k29" value="" />
<br />
</td>
</tr>
<tr>
<td>
K3
</td>
<td>
<input type="text" class="k31" value="" />
<input type="text" class="k32" value="" />
<input type="text" class="k33" value="" />
<br />
<input type="text" class="k34" value="" />
<input type="text" class="k35" value="" />
<input type="text" class="k36" value="" />
<br />
<input type="text" class="k37" value="" />
<input type="text" class="k38" value="" />
<input type="text" class="k39" value="" />
<br />
</td>
</tr>
<tr>
<td>
K4
</td>
<td>
<input type="text" class="k41" value="" />
<input type="text" class="k42" value="" />
<input type="text" class="k43" value="" />
<br />
<input type="text" class="k44" value="" />
<input type="text" class="k45" value="" />
<input type="text" class="k46" value="" />
<br />
<input type="text" class="k47" value="" />
<input type="text" class="k48" value="" />
<input type="text" class="k49" value="" />
<br />
</td>
</tr>
</table>
</div>

The ajax call is asynchronous, so when it receives the response of the server the value of the variable cellB, cellK, cellK already were changed in the loop.
The solution for that is to add the call inside a function like the example below when invoke the function doAjaxCall.
function calculateK() {
var matD = "" + $('.dr1c1').val() + "__" + $('.dr1c2').val() + "__" + $('.dr1c3').val()
+ "__" + $('.dr2c1').val() + "__" + $('.dr2c2').val() + "__" + $('.dr2c3').val()
+ "__" + $('.dr3c1').val() + "__" + $('.dr3c2').val() + "__" + $('.dr3c3').val();
var h = '5';
var it = 0;
var cellB = '';
var cellJ = '';
var cellK = '';
for (it = 1; it < 5; it++) {
cellB = '.b' + it;
cellJ = '.jc' + it;
cellK = '.k' + it;
doAjaxCall(cellB, cellJ, cellK);
}
}
function doAjaxCall(cellB, cellJ, cellK){
var bb1 = $(cellB + 'r1c1').val();
var bb2 = $(cellB + 'r1c2').val();
var bb3 = $(cellB + 'r2c1').val();
var bb4 = $(cellB + 'r2c2').val();
var bb5 = $(cellB + 'r3c1').val();
var bb6 = $(cellB + 'r3c2').val();
var jj = $(cellJ).val();
$.ajax({
url: '/M08CDECUStructuralOptimiser/ServletMatrix1?action=calculateJ',
data: {matrixB: "" + bb1 + "__" + bb2 + "__" + bb3 + "__" + bb4 + "__" + bb5 + "__" + bb6, matrixD: matD, valJ: jj},
dataType: "json",
success: function(response) {
$(cellK+'1').val(response[0]);
$(cellK+'2').val(response[1]);
$(cellK+'3').val(response[2]);
$(cellK+'4').val(response[3]);
$(cellK+'5').val(response[4]);
$(cellK+'6').val(response[5]);
$(cellK+'7').val(response[6]);
$(cellK+'8').val(response[7]);
$(cellK+'9').val(response[8]);
}
});
}

We Keep Coding

JavaScript is the programming language of the Web.

Operations on Javascript Array Element - javascript

Looks like youre trying to subtract two strings: console.log("12"-"13"); You need to convert all inputs ( they are strings) to numbers: val=input.value.toNumber(); Or: val=(+input.value);

Related

Having some problem in displaying the output of javascript

how can i make the upper case for the full name only

More than one form on a single page with conflicting outputs. Need Javascript only solution

Javascript dynamic inputs calculation

On a iterative ajax call only last response showing. why?

Categories

Resources