Develop Reference

Need help for array field

This script works fine for me:
<script>
calculate = function(){
var resources = document.getElementById('a1').value;
var minutes = document.getElementById('a2').value;
document.getElementById('a3').value = parseInt(resources)* parseInt(minutes);
}
</script>
<form action="ProvideMedicinProcess.php" class="register" method="POST">
<table id="dataTable" border="1">
<tbody>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td>
<input class="form-control"type="text" required="required" placeholder="Symptoms" name="Symptoms[]">
</td>
<td>
<input class="form-control" type="text" required="required" placeholder="GivenMedicin" name="GivenMedicin[]">
</td>
<td>
<input id="a1" class="form-control" type="text" required="required" placeholder="UnitePrice" name="UnitePrice[]" onblur="calculate()" >
</td>
<td>
<input id="a2" class="form-control" type="text" required="required" placeholder="Quentity" name="Quentity[]" onblur="calculate()" >
</td>
<td>
<input id="a3" class="form-control" type="text" required="required" placeholder="SubTotal" name="SubTotal[]" >
</td>
</tr>
</tbody>
</table>
<input type="button" value="Add" onClick="addRow('dataTable')" />
<input type="button" value="Remove" onClick="deleteRow('dataTable')" />
<input class="submit" type="submit" value="Confirm" />
<input type="hidden" value="<?php echo $PatientIDSearch ?>" name="PatientIDSearch" />
</form>
But I need to calculate All Subtotal

Some issues:
If you add rows, you'll have to avoid that you get duplicate id property values in your HTML. It is probably easiest to just remove them and identify the input elements via their names, which does not have to be unique
It is bad practice to assign to a non-declared variable. Use var, and in the case of functions, you can just use the function calculate() { syntax.
Make the subtotal input elements read-only by adding the readonly attribute, otherwise the user can change the calculated total.
Instead of responding on blur events, you'll get a more responsive effect if you respond to the input event. And I would advise to bind the event handler via JavaScript, not via an HTML attribute.
I would fix some spelling errors in your elements (but maybe they make sense in your native language): Quantity with an 'a', UnitPrice without the 'e'.
You can use querySelectorAll to select elements by a CSS selector, and then Array.from to iterate over them.
See below snippet with 2 rows:
function calculate(){
var unitPrices = document.querySelectorAll('[name=UnitPrice\\[\\]]');
var quantities = document.querySelectorAll('[name=Quantity\\[\\]]');
var subTotals = document.querySelectorAll('[name=SubTotal\\[\\]]');
var grandTotal = 0;
Array.from(subTotals, function (subTotal, i) {
var price = +unitPrices[i].value * +quantities[i].value;
subTotal.value = price;
grandTotal += price;
});
// Maybe you can also display the grandTotal somehwere.
}
document.querySelector('form').addEventListener('input', calculate);
input { max-width: 7em }
<form action="ProvideMedicinProcess.php" class="register" method="POST">
<table id="dataTable" border="1">
<tbody>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Symptoms" name="Symptoms[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Given Medicin" name="GivenMedicin[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Unit Price" name="UnitPrice[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Quantity" name="Quantity[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="SubTotal" readonly name="SubTotal[]" ></td>
</tr>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Symptoms" name="Symptoms[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Given Medicin" name="GivenMedicin[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Unit Price" name="UnitPrice[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Quantity" name="Quantity[]"" ></td>
<td><input class="form-control" type="text" required="required" placeholder="SubTotal" readonly name="SubTotal[]" ></td>
</tr>
</tbody>
</table>
</form>

How can I make my error be posted within my reserved section?

In the reserved area I wish to show errors that will show up if something doesn't go right with input. One prerequisite I have is that there must be some value within first name. If there is no value, within reserved should show "Name must be filled out".
As of right now I have an alert that shows up if the name is not filled out.
How can I make my errors be posted within the "Reserved" section?
JS:
function validateForm()
{
var x = document.forms["application"]["fName"].value;
if (x == null || x == "")
{
alert("Name must be filled out");
return false;
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>int222_162d16 - Assignment 3 - Home Page</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/sitecss.css" type="text/css" media="screen" />
<script src='javascript/myscript.js' type='text/javascript'></script>
</head>
<body>
<form name="application" id="application" method="post" action="https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/cardApplication.cgi" onsubmit="return validateForm();">
<fieldset>
<legend class="t"><img src="https://zenit.senecac.on.ca/~emile.ohan/int222/bank-logo.png" alt="Assignment #3" />Seneca Bank - Credit Card Application</legend>
<div class="clearfix">
<aside class="l">
<fieldset>
<legend>Primary Applicant's Information</legend>
<table>
<tr>
<td>First Name*</td>
<td><input type="text" name="fName" id="fName" size="20" maxlength="20" autofocus="autofocus" ></td>
</tr>
<tr>
<td>Surname*</td>
<td><input type="text" name="sName" id="sName" size="20" maxlength="30"></td>
</tr>
<tr>
<td>Date of Birth*</td>
<td><input type="text" name="dob" id="dob" size="10" placeholder="MMMYYYY" maxlength="7"></td>
</tr>
<tr>
<td>Email Address*</td>
<td><input type="text" name="email" id="email" size="20" maxlength="60"></td>
</tr>
<tr>
<td>Phone No.*</td>
<td><input type="text" name="phone" id="phone" size="20" maxlength="12"></td>
</tr>
</table>
</fieldset>
</aside>
<section class="s">
<fieldset>
<legend>Primary Applicant's Address</legend>
<table>
<tr>
<td>Home Address*</td>
<td>Apt.</td>
</tr>
<tr>
<td><input type="text" name="address" id="address" size="30" maxlength="60"></td>
<td><input type="text" name="apt" id="apt" size="5" maxlength="4"></td>
</tr>
<tr>
<td><br />City* </td>
</tr>
<tr>
<td><input type="text" name="city" id="city" size="20" maxlength="40">
</tr>
<tr>
<td><br />Province*</td>
<td><br />Postal Code</td>
</tr>
<tr>
<td>
<select id="province" name="province" size="2">
<optgroup label="Province">
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland & Labrador">Newfoundland & Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">PE</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
</optgroup>
<optgroup label="Territory">
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Yukon">Yukon</option>
</optgroup>
</select>
</td>
<td>
<input type="text" name="postal" id="postal" size="8" maxlength="7" placeholder="ANA NAN">
</td>
</tr>
</table>
</fieldset>
</section>
<aside class="r">
<fieldset>
<legend>Housing Status</legend>
<table>
<tr>
<td>Do you:</td>
<td>$Monthly Payment* </td>
</tr>
<tr>
<td><input type="checkbox" name="hStatus" id="s01" value="Own" />Own the property</td>
<td><input type="text" name="payment" id="payment" size="8" maxlength="6"></td>
</tr>
<tr>
<td><input type="checkbox" name="hStatus" id="s02" value="Rent" />Rent the property</td>
</tr>
<tr>
<td>Monthly Income*</td>
<td><input type="text" name="income" id="income" size="8" maxlength="6"></td>
</tr>
<tr>
<td>Years at current location*</td>
<td><input type="text" name="currYears" id="currYears" size="3" maxlength="2"></td>
</tr>
<tr>
<td>Pre-authorized Code*</td>
<td><input type="text" name="preCode" id="preCode" size="8"></td>
</tr>
</table>
</fieldset>
</aside>
</div>
<div class="clearfix">
<section class="s">
<fieldset>
<legend>Reserved - See below</legend>
<p><b>If you submit your application with errors and/or omissions, a list of errors and/or omissions will show here. Make the corrections and re-submit.</b></p>
<p><b>If you continue to have a problem submitting your application, make a note of the Reference No. and call us at 1-800-010-2000.</b></p>
<script>document.write</script>
</fieldset>
</section>
<aside class="l">
<fieldset>
<legend>Credit Check / Email Consent</legend>
<p><b>I consent to have a credit check performed</b></p>
<input type="checkbox" class="BoxCheck" name="creditCheck" id="c01" value="Yes" onclick="check(this);" />Yes
<input type="checkbox" class="BoxCheck" name="creditCheck" id="c02" value="No" onclick= "check(this);" />No
<br />
<p><b>I consent to have email messages sent to me</b></p>
<input type="radio" name="emailConsent" id="m01" value="Yes" />Yes
<input type="radio" name="emailConsent" id="m02" value="No" />No
<br />
Submitted on:
<script>
var d = new Date();
document.write(d.toDateString());
</script>
    Ref. # <input type="text" name="refNo" id="refNo" size="8" readonly="readonly"> <br />
<!--Submit Application--> <input type="submit" value="Submit Application">
<!--Start Over--> <input type="reset" value="Start Over">
<input type="hidden" name="hName" id="hName" value="Mahmood"> <br />
<input type="hidden" name="hId" id="hId" value="int222_162d16"> <br />
</fieldset>
</aside>
</div>
</fieldset>
</form>
<footer class=f>
My zenit Account My JavaScript My CSS My Honesty
<script>
var dt=new Date(document.lastModified); // Get document last modified date
document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
</script>
</footer>
</body>
</html>

Option 1:
You can use the "required" property on your input.
Option 2:
1- Create a div with style="display:none" where ever you like in your dom and assign an ID to that div. IE:
<div id="err1" style="display:none"></div>
2- In your javascript, on error:
if (x == null || x == "")
{
var errDiv = document.getElementById("err1");
errDiv.innerHTML = "Please fill input";
errDiv.style.display = 'block';
return false;
}

If I understand you correctly, just add a <span> element to your <section class="s">. Give the span an id like 'err_log' or just 'err' and use this to output the error
function validateForm()
{
var x = document.forms["application"]["fName"].value;
if (x == null || x == "")
{
alert("Name must be filled out");
document.getElementById('youridofthespan').innerHTML='Name must be filled out';
return false;
}else{
document.getElementById('youridofthespan').innerHTML='';
}
}
If you want to show and delete multiple errors, you can simply create on span for every error and do above to use them.
Hope this helps :)

Javascript Validation on certain items

I'm trying to get certain optional fields to be required via JavaScript validation, if any of these are empty then the form should not be sent off. I have tried numerous fixes but the code still does not work. What am I doing wrong? code is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Contact us | Bhutan</title>
<link rel="stylesheet" href="style.css" />
<script>
function validate() {
//checks to see whether the required fields are filled.
//if comment AND checkboxes AND Newsletter are empty the form will not send.
if (document.commentFrm.Comment.value=="" && document.commentFrm.newsletter.checked==false && document.commentFrm.brochure1.checked==false && document.commentFrm.brochure2.checked==false && document.commentFrm.brochure3.checked==false) {
alert("Please enter required information");
return false;
}
return true;
}
</script>
</head>
<body>
<script>
// Script that asks a user for a number and subsequently compares it to a randomly generated number.
num=prompt("Enter a number between 1 and 10");
document.write(num + "<br />");
var x=(Math.floor((Math.random()*10)+1));
if (num==x) {
alert("You have won a place on the shuttle! Your cryogenic chamber is being prepared! ");
}
else
{
alert("Go home. I'm afraid that your number " + num +" is not today's lucky number and you will not be permitted to colonise new planets.");
}
</script>
<!-- Main page header -->
<header>
<h1>Religion and Culture in Bhutan</h1>
</header>
<!-- Page Navigation -->
<nav>
<ul>
<li> Home </li>
<li>Happiness</li>
<li>Face Of Rule</li>
<li>Health</li>
<li>Religion</li>
<li>Contact Us</li>
</ul>
</nav>
<article>
<!-- Form that takes users information and emails it for marketing purposes. -->
<form name="commentFrm" onSubmit="validate()" action="mailto:connor.bulmer#live.co.uk" enctype="text/plain" method="post">
<table>
<tr>
<td>Title: </td>
<td>
<select>
<option value="Mr">Mr</option>
<option value="Mrs" selected>Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
<option value="Prof">Prof</option>
</select>
</td>
</tr>
<tr>
<td>First Name: </td>
<td><input type="text" name="firstname" size="20" maxlength="20" id="firstname" required></td>
<td>Comment:</td>
</tr>
<tr>
<td>Surname: </td>
<td><input type="text" name="surname" size="20" maxlength="20" id="surname" required></td>
<td rowspan="7"><textarea name="comment" rows="12" cols="50"></textarea></td>
<td>Brochure</td>
</tr>
<tr>
<td>Email: </td>
<td><input type="email" name="email" size="50" required></td>
<td> <input type="checkbox" name="brochure1" value="luxury" ></td>
<td>luxury</td>
</tr>
<tr>
<td>Phone: </td>
<td><input type="text" name="phone" size="50" required></td>
<td><input type="checkbox" name="brochure2" value="family" ></td>
<td>family</td>
</tr>
<tr>
<td>Address 1: </td>
<td><input type="text" name="address1" size="50" required></td>
<td><input type="checkbox" name="brochure3" value="18-30"></td>
<td>18-30</td>
</tr>
<tr>
<td>Address 2: </td>
<td><input type="text" name="address2" size="50"></td>
<td>Newsletter</td>
<td><input type="checkbox" name="newsletter" value="newsletter"></td>
</tr>
<tr>
<td>Town: </td>
<td><input type="text" name="town" size="50" required></td>
</tr>
<tr>
<td>Post code: </td>
<td><input type="text" name="postcode" size="50" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" name="submit" onClick="validate()" value="click here to submit" style="float: right;"></td>
</tr>
</table>
</form>
</article>
<!-- Footer leading to contact form -->
<footer>
<p>Developed for Bhutan, get in touch </p>
</footer>
</body>
</html>enter code here

change all && (and) to || (or) in the if;
change onsubmit="validate()" to onsubmit="return validate()"
change .Comment.value to .comment.value since that is the name and JS is case sensitive;
lastly remove onClick="validate()" from the button
More readable: remove all inline handlers, change name="commentFrm" to id="commentFrm" and have this in the head
window.onload=function() {
document.getElementById("commentFrm").onsubmit=function() {
//checks to see whether the required fields are filled.
//if comment OR checkboxes OR Newsletter are empty the form will not send.
if (this.comment.value=="" ||
this.newsletter.checked==false ||
this.brochure1.checked==false ||
this.brochure2.checked==false ||
this.brochure3.checked==false) {
alert("Please enter required information");
return false;
}
return true;
}
}
PS: The prompt script should use innerHTML of some container instead of document.write.

need to calculate 2 input fields and display in 3rd

I want to multiply the quantity by price and 'display' in total. Total needs to be named "amount" in order to transfer the total cost to the gateway. As you can see I'm trying to create a get around to be able to use quantity.
All information here is for test purposes so isn't personal.
<script type="text/javascript">
function totalprice() {
var qty = document.getElementById("quantity").value;
var price = 219999;
var total = (qty * price);
document.getElementById("tot").value = total;
}
</script>
<form action="https://gateway.charityclear.com/hosted/" method="post">
<input type="hidden" name="merchantID" value="0000992">
<input type="hidden" name="countryCode" value="826">
<input type="hidden" name="currencyCode" value="826">
<table>
<tr>
<td>Full Name </td><td><input type="text" name="customerName" value=></td></tr>
<tr>
<td>Full Shipping Address <br>(including Country)<br>(must be same as billing address)</td><td><textarea rows="4" name="customerAddress" value=></textarea></td></tr>
<tr>
<td>Post Code </td><td><input type="text" name="customerPostCode" value=></td> </tr>
<tr>
<td>Email Address </td><td><input type="text" name="customerEmail" value=></td> </tr>
<tr>
<td>Phone Number <br>(required for delivery)</td><td><input type="text" name="customerPhone" value=></td></tr>
<input type="hidden" name="redirectURL" value="http://www.UKRobstep.com/order- successful.html">
<tr><td></td>
</tr>
<tr><td><input type="hidden" name="orderRef" value="Colour">Colour</td>
<td>
<select name="orderRef">
<option value="Select a Colour">Select a Colour
<option value=" Robin M1 in Black">Black
<option value=" Robin M1 in White "> White
<option value=" Robin M1 in Red"> Red
<option value=" Robin M1 in Yellow ">Yellow
<option value=" Robin M1 in Silver/Grey "> Silver/Grey
</select></td>
</tr>
<tr><td>
Quantity</td><td><input type="text" name="quantity" id="quantity" class="field" value="1" /></td></tr>
<tr><td>Price Per Unit</td><td><input type="text" name="price" id="price" class="field" value="£2199.99" readonly="readonly"/>
<input type="hidden" name="amount" id="tot" class="field" value=""/>
</td></tr>
</table>
<INPUT TYPE="image" SRC="http://www.weebly.com/uploads/9/8/2/8/9828047/5792561_orig.png" BORDER="0" ALT="Pay Now" >
</form>
I hope someone can help, Thanks in advance.

use parseInt();
Example
function totalprice()
{
var qty = document.getElementById("quantity").value;
var price = 219999;
var total = (parseInt(qty) * price);
-------------^^^^^^^^^--------------
document.getElementById("tot").value = total;
}

Are you just trying a way to get value after user enters quantity? I'm not sure what you mean by "get around". Here's a way of returning value after enter key is pressed.
<script>
function totalprice() {
var KeyID = event.keyCode;
if(KeyID == 13){
var qty = document.getElementById("quantity").value;
var price = 219999;
var total = (qty * price);
document.getElementById("tot").value = total;
alert(total);
}
else{
}
}
</script>
<form action="https://gateway.charityclear.com/hosted/" method="post">
<input type="hidden" name="merchantID" value="0000992">
<input type="hidden" name="countryCode" value="826">
<input type="hidden" name="currencyCode" value="826">
<table>
<tr>
<td>Full Name </td><td><input type="text" name="customerName" value=></td></tr>
<tr>
<td>Full Shipping Address <br>(including Country)<br>(must be same as billing
address)</td><td><textarea rows="4" name="customerAddress" value=></textarea></td>
</tr>
<tr>
<td>Post Code </td><td><input type="text" name="customerPostCode" value=></td>
</tr>
<tr>
<td>Email Address </td><td><input type="text" name="customerEmail" value=></td> </tr>
<tr>
<td>Phone Number <br>(required for delivery)</td><td><input type="text"
name="customerPhone" value=></td></tr>
<input type="hidden" name="redirectURL" value="http://www.UKRobstep.com/order-
successful.html">
<tr><td></td>
</tr>
<tr><td><input type="hidden" name="orderRef" value="Colour">Colour</td>
<td>
<select name="orderRef">
<option value="Select a Colour">Select a Colour
<option value=" Robin M1 in Black">Black
<option value=" Robin M1 in White "> White
<option value=" Robin M1 in Red"> Red
<option value=" Robin M1 in Yellow ">Yellow
<option value=" Robin M1 in Silver/Grey "> Silver/Grey
</select></td>
</tr>
<tr><td>
Quantity</td><td><input type="text" name="quantity" id="quantity" class="field"
value="1" onkeydown="return totalprice(this, event);" /></td></tr>
<tr><td>Price Per Unit</td><td><input type="text" name="price" id="price"
class="field" value="£2199.99" readonly="readonly"/>
<input type="hidden" name="amount" id="tot" class="field" value=""/>
</td></tr>
</table><INPUT TYPE="image"
SRC="http://www.weebly.com/uploads/9/8/2/8/9828047/5792561_orig.png" BORDER="0"
ALT="Pay Now" > </form>

Is it posible to get all the values of the text boxes with the same name?

I have a doubt in javascript. Is it posible to get the values of text boxes with the same name ?
for example
<INPUT TYPE="text" NAME="inputbox" VALUE="">
<INPUT TYPE="text" NAME="inputbox" VALUE="">
these text boxes have same name, how can i get its values by name ?
OK, lemme come to the real problem i got, hope am explaining correctly.
I have a series of text boxes which i gotta validate now. Its not a big deal to validate textboxe normally.
But this is an array of text boxes where the id of the text boxes will be available only when the fields are added dynamically by clicking on the + button. when the press button is clicked the whole set of text boxes will appear. as many times its clicked, it will get added.
So its imposible to get the values to validate with the ID, so i tried by name.
JAVASCRIPT FUNCTION
function insComep()
{
// $("#doctorPri").validationEngine("updatePromptsPosition")
// jQuery("#doctorPri").validationEngine('attach', {promptPosition : "topRight"});
rl=document.getElementById("compeTable").rows.length;
var a=document.getElementById("compeTable").insertRow(rl);
var g=a.insertCell(0);
var f=a.insertCell(1);
var m=a.insertCell(2);
var n=a.insertCell(3);
var o=a.insertCell(4);
var p=a.insertCell(5);
var q=a.insertCell(6);
var r=a.insertCell(7);
var s=a.insertCell(8);
var t=a.insertCell(9);
//var v=a.insertCel1l(11);
//var u=a.insertCell(12);
g.innerHTML='<select name="competproduct[]" style="width:86px" id="competproduct'+rl+'" class="validate[required]" ><option value="">--Select--</option><?echo $product_str;?></select>';
f.innerHTML='<input type="text" name="competcompany[]" id="competcompany'+rl+'" size="10" class="validate[required]" >';
m.innerHTML='<input type="text" name="competbrand[]" id="competbrand'+rl+'" size="10" class="validate[required]" >';
n.innerHTML='<input type="text" name="competdrug[]" id="competdrug'+rl+'" size="10" class="validate[required]" >';
o.innerHTML='<input type="text" name="competquty[]" id="competquty'+rl+'" size="2" class="validate[required,custom[integer]] text-input" >';
p.innerHTML='<input type="text" name="competprice_frm[]" id="competprice_frm'+rl+'" size="2" class="validate[required,custom[number],funcCall[getPriceFromE]] text-input" />';
q.innerHTML='<input type="text" name="competprice_to[]" id="competprice_to'+rl+'" size="2" class="validate[required,custom[number],funcCall[getPriceTo]] text-input" />';
r.innerHTML='<input type="text" name="competmrp[]" id="competmrp'+rl+'" size="2" class="validate[required,custom[number],funcCall[getMrp]] text-input"/>';
s.innerHTML='<select name="ChemistParma[]" style="width:86px" id="ChemistParma'+rl+'" style="width:86px" ><option value="">--Select--</option><?echo $chemist_str;?></select>';
t.innerHTML='<img src="media/images/details_close.png" onClick="delCompe('+rl+'); "/>';
// jQuery("#doctorPri").validationEngine('attach', {promptPosition : "topRight"});
$("#doctorPri").validationEngine('hideAll');
}
HTML
<table width="100%" id='compeTable' border='0' style='margin-left:auto;margin-right:auto;margin-top:40px;' >
<tr style="border-bottom:1px solid #999999;"><td colspan='4'>
<div style="background:;padding:3px;text-align:left; ">
<font color='black'><strong >Competitor Detail(s):</strong></font><font color="red">*</font>
</div>
</td></tr>
<tr>
<td>Product Name:<font color="red">*</font></td>
<td>Company Name:<font color="red">*</font></td>
<td>Brand Name:<font color="red">*</font></td>
<td>Drug Name:<font color="red">*</font></td>
<td> Quantity:<font color="red">*</font></td>
<td>Pricefrom Dist:<font color="red">*</font></td>
<td >Price to Dist:<font color="red">*</font></td>
<td> MRP:<font color="red">*</font></td>
<td>Chemist<font color="red">*</font><input type='button'value='+' style='width:1px' style='width:1px' onclick='frame5()'/>
</td>
<td></td>
</tr>
<tr><td> </td></tr>
<tr>
<td>
<select name='competproduct[]' id='competproduct' style="width:86px" class="validate[required]" >
<option value=''>-select Product-</option>
<? echo $product_str;?>
</select>
</td>
<td>
<input type="text" name="competcompany[]" id="competcompany" size="10" class="validate[required]" >
</td>
<td ><input type="text" name="competbrand[]" id="competbrand" size="10" class="validate[required]" >
</td>
<td><input type="text" name="competdrug[]" id="competdrug" size="10" class="validate[required]" >
</td>
<td><input type="text" name="competquty[]" id="competquty" size="2" class="validate[required,custom[integer]] text-input" >
</td>
<td>
<input type="text" name="competprice_frm[]" id="competprice_frm" size="2" class="validate[required,custom[number],funcCall[getPriceFromE]] text-input" />
</td>
<td>
<input type="text" name="competprice_to[]" id="competprice_to" size="2" class="validate[required,custom[number],funcCall[getPriceTo]] text-input" />
</td>
<td><input type="text" name="competmrp[]" id="competmrp" size="2" class="validate[required,custom[number],funcCall[getMrp]] text-input" onBlur=''/>
</td>
<td>
<select name='ChemistParma[]' id='ChemistParma' style="width:86px">
<option value=''>-select chemict-</option>
<?echo $chemist_str?>
</select></td>
<td>
<img src="media/images/details_open.png" onClick="insComep()"/>
</td>
</tr>
</table>

It's quite simple,
document.getElementsByName("inputBox");

You can use a multitude of different methods.
1) Manual traversal of childNodes etc, and checking for nodeName. This is pretty involved and requires a lot of boring code, so I won't write an example of that here.
2) document.getElementsByTagName. This can also be used on DOM nodes, so you can do something like document.getElementById("my_form").getElementsByTagName("input"), depending on how the rest of the DOM looks of course.
3) document.querySelectorAll("input"). The string argument is a full CSS selector. Some older browsers doesn't support this though.

Here is example for you with your code:
<div id="inputs">
<INPUT TYPE="text" NAME="inputbox" VALUE="asd">
<INPUT TYPE="text" NAME="inputbox" VALUE="efs">
</div>
<script>
$(document).ready(function () {
var howmany = $('#inputs').children("input").length;
alert(howmany);
for( i=0; i<= howmany-1; i++ ) {
var input = $("#inputs").children("input").eq(i).attr('VALUE');
alert(input);
}
});
</script>