SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript to button call functions issue

    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!

    Thanks in advance.

    Code:
    <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. #2
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you sir, are cheating... i presume?

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    You'll want to give the fields different names, so that you can then later on refer to their values.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks paul, i spotted this today while finishing off my coding for college. the smallest mistake in javascript creates the biggest nightmare !


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •