Baseball Statistics Through a Form - html

Question

I am trying to make an application for compiling baseball statistics. I would like to be able to enter information about an at-bat and receive statistics.
I would like to be able to show the amount of times singles double triple home run and divide that by the amount of times the at-bat form has been answered. Basically, I want to show Batting Average by doing (single+double+triple+homerun)/(atbats-walks). I would also like to show groundball/(at-bats-walks), flyball/(atbats-walks), and (((1*single)+(2*double)+(3*triple)+(4*homerun))/(atbats)), etc. I only know Ruby, HTML, and CSS.
Here is my at-bat form page
<style>
h1 {
color: white;
}
.moveloco {
text-align:center;;
color:white;
}
.moveloco2 {
text-align:center;
}
.centit {
text-align:center;
}
</style>
<h1 class= "moveloco">Input Statistics: Location 1</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
<br />
<br />
<div style="background:rgba(255,255,255,0.5)" class="jumbotron">
<h3>What was the Pitch Type?</h3>
<br />
<h3>Where did the Ball Go?</h3>
<br />
<select input id="end_ball_location" name="ebloco">
<option value='lout'>Left Field</option>
<option value='cout'>Center Field</option>
<option value='rout'>Right Field</option>
<option value='lin'>Left Side of the Infield</option>
<option value='min'>Middle of the Infield </option>
<option value='rin'>Right Side of the Infield</option>
</select>
<br />
<br />
<br />
<br />
</div>
</div>
<div class="col-md-4">
<br />
<br />
<br />
<br />
<br />
<img src = "http://i62.tinypic.com/2gt51dc.png" alt="field" height="350" width="400">
<br />
</div>
<br />
<div class="col-md-4">
<br />
<div style="background:rgba(255,255,255,0.5)" class="jumbotron">
<div class='moveloco2'>
<h3>What Type of Hit was It?</h3>
</div>
<br />
<div class='moveloco2'>
<select id="hit_type" name="hit_type">
<option value='gball'>Groundball</option>
<option value='ld'>Line Drive</option>
<option value='flyball'>Fly Ball</option>
</select>
<br />
<br />
</div>
<div class='moveloco2'>
<h3>What was the At Bat Result?</h3>
<br />
<div class='moveloco2'>
<select id="at_bat_result" name="at_bat_result">
<option value='single'>Single</option>
<option value='double'>Double</option>
<option value='triple'>Triple</option>
<option value='homerun'>Home Run</option>
<option value='out'>Out</option>
<option value='walk'>Walk</option>
</select>
<br />
<br />
<br />
</div>
<div class='moveloco2'>
<input type='submit'>
</div>
</div>
</div>
</div>
</div>
application controller
I don't know what to put.
statistics show page
<style>
table, th, td {
border: 1px solid black;
}
.pwsth, .container {
text-align:center;
}
.tfass {
text-align:center;
color:white;
}
.pagination {
}
</style>
<br />
<div class="tfass">
<h1 class="text-center">Batting Statistics</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<br />
<br />
<br />
<br />
<img src = "http://i59.tinypic.com/nvbay1.png" alt="field" height="300" width="300">
</div>
<div class="col-md-4">
<br />
<br />
<br />
<br />
<img src = "http://i62.tinypic.com/2gt51dc.png" alt="field" height="350" width="400">
</div>
<div class="col-md-4">
<div style="background:rgba(255,255,255,0.5)" class="jumbotron">
<div class="asd">
<h3 class="text-center">Pitch Location 1</h3>
<br />
<table style="width:100%">
<tr>
<th class= "pwsth">BA</th>
<th class= "pwsth">SLG</th>
<th class= "pwsth">OPS</th>
</tr>
<tr>
<td class="pwsth">stat</td>
<td class="pwsth">stat</td>
<td class="pwsth">stat</td>
</tr>
<tr>
<th class= "pwsth">GB %</th>
<th class= "pwsth">FB %</th>
<th class= "pwsth">LD %</th>
</tr>
<tr>
<td class="pwsth">stat</td>
<td class="pwsth">stat</td>
<td class="pwsth">stat</td>
</tr>
<tr>
<th class= "pwsth">idk</th>
<th class= "pwsth">idk</th>
<th class= "pwsth">RC</th>
</tr>
<tr>
<td class="pwsth">idk</td>
<td class="pwsth">idk</td>
<td class="pwsth">stat</td>
</tr>
</table>
</div>
<nav class = "nacent">
<ul class="pagination">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<div></div><li>5</li>
<div></div>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<div></div>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<div></div>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<div></div>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>

Answer 1

You would need to use JavaScript or something similar if trying to calculate it client-side. If you don't know JavaScript here's a good start:
http://www.w3schools.com/js/default.asp