html gurus

Donek · October 30, 2011

I'm working on updating the web site and had an idea that someone might be able to help with. As we offer customization, I thought I'd forgo the waist width on some of the spec sheets and let people enter their desired width. As the math is really simple to calculate the tip and tail widths, it would be nice for that data to simply populate. Is there someone out there who knows enough html and java to make that happen. Here's a sample of the document.

<tr>

<td width="38">Length</td>

<td width="38">Price</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

If it was possible to enter a waist width on the page somewhere and populate the data, that would be pretty cool.

TLN · October 31, 2011

Hello.

I think i can help you.

Mail all the info needed to kovyrshin@gmail.com. Or at least how can i access the code.

I'd possibly do this after my 22th Bday tomorrow.

ktv · October 31, 2011

Sean,

You can do the calculation and changing the text with some javascript like this. Setting the innerHTML is what is changing the text based on the input and the math calculations.

<script type="text/javascript">
function donek(id, nose, tail){
var userInput = document.getElementById(id).value;
var length = id.substring(5);
document.getElementById('nose'+length).innerHTML = parseFloat(userInput) + parseFloat(nose);
document.getElementById('tail'+length).innerHTML = parseFloat(userInput) + parseFloat(tail);
return (false);
}
</script>

And the HTML would be something like this (I just edited your first row). I placed an input button in a cell at the end of the row. When clicked, it calls the javascript function, passing the element ID to get the data from, and the values for the nose and tail calculation, since they were different depending on the length of the board.

<form id="test" name="test">
<table width="300" border="1" cellpadding="0" cellspacing="0" bordercolor="#666666"><br />
     <tr><br />
       <td width="38">Length</td><br />
       <td width="34">Edge</td><br />
       <td width="110">SC (m)</td><br />
       <td width="34">N</td><br />
       <td width="34">W</td><br />
       <td width="34">T</td><br />
       <td width="38">Price</td><br />
       <td/>
     </tr><br />
     <tr><br />
       <td class="style5">170</td><br />
       <td class="style5">133</td><br />
       <td class="style5">10-12</td><br />
       <td class="style5" id="nose170"></td><br />
       <td class="style5"><input type="text" id="waist170" value="Enter Waist Size"/></td><br />
       <td class="style5" id="tail170"></td><br />
       <td class="style5">780</td><br />
       <td class="style5"><input type="button" onClick="return donek('waist170','4.8', '3.3');" value="Get Measurements"/></td>
     </tr><br />
</table></form>

This was a pretty simple way to do it. You can get fancy by having one input text box and one button that on clicking will go through all the IDs in this table, and calculate everything and replace them with the single user's input. It would be setting up to be able to get a list of these in the javascript to iterate through and do the calculations.

Let me know if you have any questions.

Khanh

Sign In

html gurus

Recommended Posts

Donek

Link to comment

Share on other sites

TLN

Link to comment

Share on other sites

ktv

Link to comment

Share on other sites

Join the conversation

Announcements

Recently Browsing

Activity