www.webdeveloper.com
Results 1 to 10 of 10

Thread: adding 2 text inputs to fill another

Hybrid View

  1. #1
    Join Date
    Sep 2012
    Posts
    6

    adding 2 text inputs to fill another

    Been looking around the internet and cannot seem to word my question good enough to produce anything close to what I want to do. I wrote a form for use at a golf course I work at. It is a form for keeping pesticide records. I am trying to figure out how to get in to mutiply 2 text input boxes together and autofill other ones with the result.

    I have to input ounces of chemical used per 1000 ft²
    I have to input acres sprayed

    I would like to have the form autofill sections for Amount of chemical used per acre and total amount of chemical used. I know all the math involved I just can't figure out how to make it do it in html. I can post my code if needed.

  2. #2
    Join Date
    Mar 2009
    Posts
    452
    posting your code will help to slove the problem;

  3. #3
    Join Date
    Sep 2012
    Posts
    6
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head profile="http://dublincore.org">
    <title>Pesticide Record Form</title>
    <meta name="Author" content="Michael L. Ford" />
    
    
    <style type="text/css">
    /* This is an embedded style area */
    
    Body 
    	
    	{
    	background-image: url(grainblue.jpg);
    	background-color: #c5dae3;
    	color: #000000;
            }
    
    <!-- Color set for all heading tags -->
    h1, h2, h3, h4, h5, h6
            
    	{
    	color: #666666;
    	}
    
    
    td      {
    	background-color:white;
    	color:black;
    	}
    
    th	{
    	background-color:white;
    	}
    
    input
        	{
            color:red;
        	}
    
    select
    	{
            color:red;
        	}
    
    </style>
    
    </head>
    <body>
    
    <p align="center"><font size="6"><b><br />Pesticide Records Form</b></font><br /> </p>
    
    <!-- row one -->
    
    <form action="formmail.php">
    
    <table border="1" width="99%" cellspacing="1" cellpadding="12" align="center">
    
    <tr>
    <th colspan="2">Brand Name/ Formulation</th>
    <th>EPA Reg. #</th>
    <th>Amount per <br />1000 FT²</th>
    <th>Amount per <br />Acre</th>
    <th>Total amount <br />Used</th>
    </tr>
    <tr>
    <td  colspan="2"><b><input type="text" size="45" /></b></td>
    <td><b><input type="text" /></b></td>
    <td><b><input type="text" /></b></td>
    <td><b><input type="text" /></b></td>
    <td><b><input type="text" /></b></td>
    </tr>
    
    <tr>
    <td colspan="2"><b><input type="text" size="45" /></b></td>
    <td><b><input type="text" /></b></td>
    <td><b><input type="text" /></b></td>
    <td><b><input type="text" /></b></td>
    <td><b><input type="text" /></b></td>
    </tr>
    
    <tr>
    <td colspan="2"><b><input type="text" size="45" /></b></td>
    <td><b><input type="text" /></b></td> 
    <td><b><input type="text" /></b></td>
    <td><b><input type="text" /></b></td>
    <td><b><input type="text" /></b></td>
    </tr>
    
    <tr> 
    <td colspan="2"><b><input type="text" size="45" /></b></td>
    <td><b><input type="text" /></b></td>
    <td><b><input type="text" /></b></td>
    <td><b><input type="text" /></b></td>
    <td><b><input type="text" /></b></td>
    </tr>
    
    <tr>
    <td colspan="2"><b><input type="text" size="45" /></b></td>
    <td><b><input type="text" /></b></td>
    <td><b><input type="text" /></b></td>
    <td><b><input type="text" /></b></td>
    <td><b><input type="text" /></b></td>
    </tr>
    
    <tr>
    <td colspan="2"><b><input type="text" size="45" /></b></td>
    <td><b><input type="text" /></b></td>
    <td><b><input type="text" /></b></td>
    <td><b><input type="text" /></b></td>
    <td><b><input type="text" /></b></td>
    </tr>
    
    <!-- Applicator -->
    
    <tr>
    <td valign="top" colspan="2"><font size="3"><b><u>Applicator's Licence Number:</u></b></font>
    
    			<select>
      				<option></option>
      				<option></option>
      				<option></option>
      				<option></option>
    			</select>
    
    </td>
    
    <td valign="top" colspan="2"><font size="3"><b><u>Applicators's Name:</u></b></font>
    
    			<select>
      				<option></option>
      				<option></option>
      				<option></option>
      				<option></option>
    			</select>
    
    </td>
    <td valign="top" colspan="2"><font size="3"><b><u>Applicator's Signature:</u></b></font></td>
    </tr>
    
    <!-- Target -->
    
    <tr>
    <td colspan="6"><b><u>Target area:</u></b>
    	
    			<select>
      				<option>Green's</option>
      				<option>Green's &amp; Collars</option>
      				<option>Tee's</option>
      				<option>Fairways</option>
    				<option>Rough</option>
    				<option>Other</option>
    			</select>
    			
    		
    		<b><u>Unit:</u></b>
    			<select>
      				<option>Multipro 1250</option>
      				<option>Kabota 5400</option>
      				<option>Cushman</option>
      				<option>Backpack</option>
    			</select>
    
    &nbsp;  
    
    		<b><u>PSI:</u></b>
    			<select>
      				<option>40</option>
      				<option>42</option>
      				<option>44</option>
      				<option>46</option>
    				<option>48</option>
      				<option>50</option>
      				<option>52</option>
      				<option>54</option>
    				<option>56</option>
      				<option>58</option>
      				<option>60</option>
      				<option>62</option>
    			</select>
    
    &nbsp;  
    
    		<b><u>Speed/RPMS:</u></b>
    			<select>
      				<option>1 mph</option>
      				<option>2 mph</option>
      				<option>3 mph</option>
      				<option>4 mph</option>
    				<option>5 mph</option>
      				<option>6 mph</option>
      				<option>7 mph</option>
      				<option>8 mph</option>
    				<option>1000 RPM</option>
      				<option>1100 RPM</option>
      				<option>1200 RPM</option>
      				<option>1300 RPM</option>
    				<option>1400 RPM</option>
      				<option>1500 RPM</option>
      				<option>1600 RPM</option>
      				<option>1700 RPM</option>
    				<option>1800 RPM</option>
      				<option>1900 RPM</option>
      				<option>2000 RPM</option>
    			</select>
    
    &nbsp;  
    
    		<b><u>Gear:</u></b>
    			<select>
      				<option>1st</option>
      				<option>2nd</option>
      				<option>3rd</option>
      				<option>4th</option>
    			</select>
    
    &nbsp;  
    
    		<b><u>Total Gallons Used:<input type="text" size="15" /></u></b>
    			
    
    
    </td>
    </tr>
    
    <!-- Application date -->
    
    <tr>
    <td valign="top" align="center" colspan="3"><b><u>Application Date:</u></b><br />
    
    <!-- month -->
    			<select>
      				<option>January</option>
      				<option>February</option>
      				<option>March</option>
      				<option>April</option>
    				<option>May</option>
      				<option>June</option>
      				<option>July</option>
      				<option>August</option>
    				<option>September</option>
      				<option>October</option>
      				<option>November</option>
      				<option>December</option>
    			</select>
    
    <!-- Day -->
    
    			
    			<select>
      				<option>1</option>
      				<option>2</option>
      				<option>3</option>
      				<option>4</option>
    				<option>5</option>
      				<option>6</option>
      				<option>7</option>
      				<option>8</option>
    				<option>9</option>
      				<option>10</option>
      				<option>11</option>
      				<option>12</option>
    				<option>13</option>
      				<option>14</option>
      				<option>15</option>
      				<option>16</option>
    				<option>17</option>
      				<option>18</option>
      				<option>19</option>
      				<option>20</option>
    				<option>21</option>
      				<option>22</option>
      				<option>23</option>
      				<option>24</option>
    				<option>25</option>
      				<option>26</option>
      				<option>27</option>
      				<option>28</option>
    				<option>29</option>
      				<option>30</option>
      				<option>31</option>
    			</select>			
    
    <!-- Year -->
    
    			<select>
      				<option>2012</option>
      				<option>2013</option>
      				<option>2014</option>
      				<option>2015</option>
    				<option>2016</option>
      				<option>2017</option>
      				<option>2018</option>
      				<option>2019</option>
    				<option>2020</option>
    			</select>
    </td>
    
    <!-- Wind -->
    
    <td valign="top"  align="center" colspan="3"><b><U>Wind Direction:</u></b> 
    
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    
    <b><u>Wind Speed:</u></b><br />
    
    <!-- Direction -->
    			<select>
      				<option>North</option>
      				<option>North East</option>
      				<option>East</option>
      				<option>South East</option>
    				<option>South</option>
      				<option>South West</option>
      				<option>West</option>
      				<option>North West</option>
    			</select>
    
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    
    <!-- Speed -->
    
    			<select>
      				<option>0-5 MPH</option>
      				<option>5-10 MPH</option>
      				<option>10-15 MPH</option>
      				<option>15-20 MPH</option>
    				<option>20-25 MPH</option>
    			</select>			
    
    
    </td>
    </tr>
    
    <!-- Units -->
    
    <tr>
    <td valign="middle"  align="center" colspan="3"><b><u>Units Treated:</u></b><br />
    			<b>Acres:</b><input type="text" size="15" />
    			<b>FT²:</b><input type="text" size="15" />
    </td>
    
    <!-- Time -->
    
    <td valign="middle"  align="center" colspan="3"><b>Time Started:</b>
    
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
    
    						<b>Time Completed:</b><br />
    
    			<input type="text" size="15" /> 
    		
    			<select>
      				<option>AM</option>
      				<option>PM</option>
    			</select>
    
    			<input type="text" size="15" />	
    
    			<select>
      				<option>AM</option>
      				<option>PM</option>
    			</select>
    
    </td>
    </tr>
    
    <!-- Temperature -->
    
    <tr>
    <td valign="middle"  align="center" colspan="3"><b><u>Temperature:</u></b>
    
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    
    						<b><u>Humidity</u></b><br />
    
    			<input type="text" size="1" /><b>º Farenheit</b> 
    		
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  
    
    			<input type="text" size="1" /><b>%</b>	
    
    
    </td>
    <td valign="middle"  align="center" colspan="3"><b><u>Notes:</u></b>
    
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    
    						<b><u>Estimated Cost:</u></b><br />
    
    			<input type="text" size="45" /> 
    		
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  
    
    						<b>$</b>
    
    			<input type="text" size="15" />
    							
    
    
    </td>
    </tr>
    
    <!-- picture -->
    
    <tr>
    <td valign="middle"  align="center" colspan="6"><b><img src="imgLg_burl-oaks-golf-course.jpg" alt="map" height="80%" width="100%" /></b></td>
    </tr>
    </table>
    
    </form>
    </body>
    </html>
    Last edited by jedaisoul; 03-22-2014 at 05:10 AM. Reason: code tags added

  4. #4
    Join Date
    Mar 2009
    Posts
    452
    here is the basic idea

    <form name="form">
    <input type="text" name="field1" onKeyUp="form.field3.value=(form.field1.value*form.field2.value);" />
    *
    <input type="text" name="field2" onKeyUp="form.field3.value=(form.field1.value*form.field2.value);" />
    =
    <input type="text" name="field3" />
    </form>

  5. #5
    Join Date
    Sep 2012
    Posts
    6
    Finally got a chance to work on this works great, thanks much. I do have a few more questions I cant seem to figure out. I have been working with the general idea code you gave me and have most of it dialed in. What would be the symbol for divide? Is it / or is that recognized as a html slash? My other question is can I double up the code on one line to have the same field effect 2 fields in different manners? I have tried a few different ways and none seem to work.

    This is kinda what I mean.

    <input type="text" name="field1" onKeyUp="form.field3.value=(form.field1.value*form.field2.value);" onKeyUp="form.field4.value=(form.field1.value+form.field5.value);"/>

    It still does the firs part of the code but it seems like its skipping or not even process the second calculation.

  6. #6
    Join Date
    Mar 2009
    Posts
    452
    as you have many fields on your page and naming them field1,2,3 etc... will increase confusion. so best ideas is to name those fields descriptively. for example amount_per_1000ft1, amount_per_1000ft2 etc...
    then you can calculate easily for every item.

    symbols are for division is / for more http://www.w3schools.com/js/js_operators.asp

  7. #7
    Join Date
    Sep 2012
    Posts
    6
    Working out a few bugs on this form based on input from the people who use it. One thing I am having issues with is I need to add letters in the same text input field after the number and I keep getting NaN as the formula result. I am guessing that this means "not a number". Is there something I can do to have it ignore the letters in the formulation?

  8. #8
    Join Date
    Mar 2009
    Posts
    452
    as you have many fields on your page and naming them field1,2,3 etc... will increase confusion. so best ideas is to name those fields descriptively. for example amount_per_1000ft1, amount_per_1000ft2 etc...
    then you can calculate easily for every item.

    symbols are for division is / for more http://www.w3schools.com/js/js_operators.asp

  9. #9
    Join Date
    Sep 2012
    Posts
    6
    Revising this form again and running into an issue rounding up the product of 2 multiplied values. Here is what the snippet looks like. Works until I try to use the math.ceil or math.round function, then it breaks.

    <td><b><input type="text" name="perft2" onkeyup="form.acre2.value=math.ceil(form.perft2.value*43.56);" /></b></td>
    <td><b><input type="text" name="acre2" /></b></td>

  10. #10
    Join Date
    Sep 2012
    Posts
    6
    I guess real men use capital letters with things like Math.ceil! Figured it out after a good 45 minute battle. LOL

    Now onto the latest issue. I am trying to use the product of that formula to multiply it with another keyed number. I Feel that it has to do with trying to use the value of acre2 in which gets its value from the previous formula thus not being "keyedup". I have searched for a replacement function for onkeyup but I haven't had any luck.


    <td colspan="1"><b><input type="text" size="10" name="perft1" onkeyup="form.acre1.value=Math.ceil(form.perft1.value*43.56);" /></b>&nbsp;&nbsp;Ounces</td>
    <td colspan="1"><b><input type="text" size="10" name="acre1" onkeyup="form.total1.value=Math.ceil(form.acre1.value*form.mixed.value);" /></b>&nbsp;&nbsp;Ounces</td>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles