3 Replies - 858 Views - Last Post: 13 March 2014 - 04:54 AM

#1 MarvinHawkins   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-March 14

How do I get values from an HTML form and pass them to an Array?

Posted 12 March 2014 - 07:42 PM

Hello!

I am very new to the forums and newish to javascript with HTML. I have used javascript before, but the combination of the two is tripping me up. I am working on an assignment and I got stuck. It seems simple enough but the problem breaks down like this:

1) Calculate sales commission + base for n sales rep
2) must be user entered from a form.

The second one is what's killing me. After some googling and book reference. I came up with the code below. One of the arrays is just testing the javascript calculation. It works. The other script was based on a form i found online. The trouble is, when i hit show, the values don't display. What step am i missing? I understand that you need to specify the html element with a getElmentsByID method, but they don't seem to be displaying. Any help would be greatly appreciated. My main question, how do you pass values via user input on a form? How is it captured? How do I parse and display it? (Okay that's like 3 but thanks!)

Hopefully the code is readable.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

function start()
{
	var basePay = 200;
	var commision = .09;
	

	var n1 = [200, 500, 700, 800];
	//This kind of works
	var length = n1.length;
	
	for(var i = 0 ; i<length; ++i )
		{
			n1[i] = n1[i] * commision  + basePay;
		}
	//initialize the second array

	outputArray("Array n1: ", n1, document.getElementById("output1") );
	
	
}


//if the code doesnt work, remove
	//Added remove if breaks
	//Found code
//Set up an array of Sales type	
var sales =new Array();
	

function insert(){
    var salesValue = document.getElementById('sales').value;
    
    sales[sales.length]=salesValue *  commision + basePay  ;
    
  }

///////////Does not beeak

//Should display in HTML the total salesPay per rep
//Currently shows blank


function show() {
  var content="<b>Sales Data for all Employees :</b><br>";
  for(var i = 0; i < sales.length; i++) {
     
	
	  content +=sales[i]+"<br>";
  }
    document.getElementById('display').innerHTML = content; //note that I changed 
                                                    //to 'display' because that's
                                              //what you have in your markup
}


function outputArray(heading, theArray, output)
{
	var content = "<h2>" + heading + "</h2><table>" + 
	"<thead><th>Index</th><th>Value</th></thead><tbody>";
	
	var length = theArray.length;
	
	for (var i = 0; i <length; ++i)
		{
		content += "<tr><td>" + i + "</td><td>" + theArray[i]+"</td></tr>";
		}//end for loop
		 content += "</tbody></table>";
		 output.innerHTML = content;
		 //end function for output array
}

window.addEventListener("load", start, false);



</script>

	<div id = "output1"> </div>
	
	
	<form>
  <h1>Please enter sales data</h1>
  <input id="sales" type=number />

  <input type="button" value="Save" onclick="insert()" />
  <input type="button" value="Show data" onclick="show()" />
</form>

<div id="display"></div>
	
</head>
<body>

</body>
</html>






Is This A Good Question/Topic? 0
  • +

Replies To: How do I get values from an HTML form and pass them to an Array?

#2 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: How do I get values from an HTML form and pass them to an Array?

Posted 12 March 2014 - 09:51 PM

You have a variable scope issue here with commision sales[sales.length]=salesValue * commision + basePay ;

You are looking for a global variable name commision because it is not initialized inside your function.

Try moving your variable declarations of
 var basePay = 200;
 var commision = .09;

to the outside of your function like so

var basePay = 200;
var commision = .09;
    function start()
    {
       // Your code
    }



Now the basePay and commision variables will be available to all your functions.

Added:

Welcome to DIC.
Was This Post Helpful? 1
  • +
  • -

#3 andrewsw   User is offline

  • Bouncy!
  • member icon

Reputation: 6563
  • View blog
  • Posts: 26,615
  • Joined: 12-December 12

Re: How do I get values from an HTML form and pass them to an Array?

Posted 13 March 2014 - 04:28 AM

You also have page-elements in the head-tag, they should be in the body.
Was This Post Helpful? 1
  • +
  • -

#4 MarvinHawkins   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-March 14

Re: How do I get values from an HTML form and pass them to an Array?

Posted 13 March 2014 - 04:54 AM

View Postlaytonsdad, on 12 March 2014 - 09:51 PM, said:

You have a variable scope issue here with commision sales[sales.length]=salesValue * commision + basePay ;

You are looking for a global variable name commision because it is not initialized inside your function.
...


Thanks! and awesome! Works like a glove!

This post has been edited by andrewsw: 13 March 2014 - 04:56 AM
Reason for edit:: Reduced quote

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1