Javascript to button call functions issue

JavaScript
1

Hey i currently have a issue where im entering data into two input box’s and calling them simultaneously using one button, but it only calls one of the input box’s data and uses them in both outputs for the two… kind of hard to describe, iv linked the code below. you will notice the button i have included in the second form “form2” way at the bottom of the code. Im assuming this is my issue… im not quite sure how to alter it to get the two data field inputs to display on one button click simultaneously.

any help ?

ps sorry if its messy! :lol:

Thanks in advance.

<html>
<head>
<title>Book Pricing</title>
<script type="text/javascript">

var array = new Array();  		// makes two arrays for both book names and book prices
var array2 = new Array();


function insert(val)
{
	array[array.length]=val;
}



function insert2(val)
{
	array2[array2.length]=val;
}



function show()
{
	var counter1 = 1
	var string="<b>Book Names</b><br>";
	for(i = 0; i <array.length ; i++)
	{
		string =string+ counter1 + " " + array[i]+"<br>";
		counter1 ++
	}

	if(array.length > 0)
	document.getElementById('myDiv').innerHTML = string; 		// Sends the entered book name to the mydiv section.
}



function show2()
{
	var string="<b>Book Prices</b><br>";
	for(i = 0; i <array2.length ; i++)
	{
		string =string + " " + array2[i]+"<br>";

	}

	if(array2.length > 0)
	document.getElementById('myDiv2').innerHTML = string; 		// Sends the entered book prices to the myDiv2 section.
}




function totalz()
{
	var total = 0;
	for(var i = 0; i < array2.length; i++)
	{
		var thisVal = parseInt(array2[i]);
		if(!isNaN(thisVal))
		{
			total += thisVal;
		}
	}

	document.write(total);
}




function printpage()  		// Function to print the web page.
{
	window.print()  	// Command to open the print page in the web browser.
}


</script>
</head>


<body>


<h2>Book Pricing</h2>
<form name="form1">
<table width="407">
<tr>
<td width="154" align="right"><b>Book Names</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>


<form name="form2">
<table width="407">
<tr>
<td width="154" align="right"><b>Book Prices</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">
<input type="button" Value="Add Book" onclick="insert2(this.form.name.value),show2(),insert(this.form.name.value),show();"/>


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


<table width = 100% >
<tr>
<td width = 300px>
<div id="myDiv"></div>
</td>
<td width = 300px>
<div id="myDiv2"></div>
</td>
<td width 80%>
</td>
</tr>
</table>


<input type="button" value="totals up the price" onclick="totalz();" />


<form>
<input type="button" value="Print this page" onClick="printpage()">
</form>


</html>
2

you sir, are cheating… i presume?

3

You’ll want to give the fields different names, so that you can then later on refer to their values.

4

Thanks paul, i spotted this today while finishing off my coding for college. the smallest mistake in javascript creates the biggest nightmare !