Hi guys,

I'm working on a code at the moment which is like a book shop. I want the program to allow the user to enter a book name and price then add it and after adding the books and its corresponding price, the program should calculate the total price.

I have been working on this (so it is rough) but I think I have managed it bar one slight problem. The book name entered comes up as 'undefined' after adding to basket.
I've played about with it but still no luck.

Code:
<html>
<head>


<script type="text/javascript">

var bookname = new Array();
var bookprice = new Array();



//set functions for the book name entry

function insert1(value)
{
bookname[bookname.length]=value;
}



//set function for the book price entry

function insert2(value)
{
bookprice[bookprice.length]=value;
}


//display inserted name

function showname()
{
var string ="<b>Book Name</b><br>";

for(i = 0; i < bookname.length ; i++) 
{
	string = string +  bookname[i]+"<br>"; 
}

if (bookname.length)				
{
document.getElementById('myDiv1').innerHTML = string;				//if name is entered, show value entered on myDiv section
}
}



//display inserted price

function showprice()
{
var string="<b>Book Price</b><br>";

for(i = 0; i < bookprice.length ; i++) 
{
	string = string + " " + bookprice[i]+"<br>";
}

if(bookprice.length)
{
document.getElementById('myDiv2').innerHTML = string;
}
}



//set function to calculate the total price

function totalprice()
{
var total = 0;
for(var i = 0; i < bookprice.length; i++)
{
var thisvalue = parseFloat(bookprice[i]);							//decimal (allows pence cost as well (ie. £5.50))

if(!isNaN(thisvalue))												//!isNaN() = returns true if value is not a number
{
	total += thisvalue;
}
}

alert( "The total price is £"+total.toFixed(2));				//shows price to 2 decimal places
}


</script>
</head>


<body>

<h3>Book Purchase</h3>


<!--positions for book entry-->

<form name="form1">

<table width="407">
<tr>
<td width="154" align="right"><b>Book Name</b>
<td width="9"><b>&nbsp;:</b>
<td width="224">
<input type="text" name="name"/>
</tr>
<tr>
<td width="154" align="right">
<td width="9">
<td width="224">
</tr>
<tr>
<td width="154" align="right">
<td width="9">
<td width="224"> 


</tr>
</table>
</form>

<!--positions for book price-->

<form name="form2">

<table width="407">
<tr>
<td width="154" align="right"><b>Book Price :</b>
<td width="9"><b>&nbsp;£</b>
<td width="224">
<input type="text" name="cost"/>
</tr>
<tr>
<td width="154" align="right">
<td width="9">
<td width="224">
</tr>
<tr>
<td width="154" align="right">
<td width="9">
<td width="224"> 

<input type="button" value="Add To Basket" onclick="insert1(this.form.name.value),showname(); insert2(this.form.cost.value),showprice();"/> 		<!--the button comprimises of two functions (show both name and price together-->
</tr>

</table>
</form>


<tr>
<table width = 100% >
<td width = 300px>
<div id="myDiv1"></div> 
</td>

<td width = 300px>
<div id="myDiv2"></div> 
</td>
<td width 80%>
</td>

</tr>
</table>


<br><br><input type="button" value="Total Price" onclick="totalprice();" />					<!--button to calculate the total price added-->


<input type="button" Value="Print This Screen" onclick="window.print();"/> 						<!--button to print the window-->

  
</body>

</html>
I've put in little comments to help me as I am not an expert in this field and make it simpler for myself!
Can anybody suggest how I may solve this problem?

Any help is much appreciated!