0

I have been trying to figure out how to populate a table that has preexisting data with called JS data

For example I have a table with this in place: F2,70,28,09,L,00,00,YR,YR,SD,RD,RD,RD,RD,RD,RD,GR,58,00,TX,TX,TX,TX,TX,TX,TX,TX,TX,TX The L,YR,SD,RD,GR,TX would be areas populated with the JS function

You can see what I am using here:http://www.757goat.org/gto_cluster/Worksheettestjs.php

I need an option at the very bottom of the form that would grab all of the 'hex' and place it into the above in the right areas.

Any ideas??

Thanks in advance -Rob

Here is the code within the above link: I had to pull some out so it would fit, but the ones I pulled are just repetitions of sdtxt

    <script language="JavaScript" type="text/javascript">

<!--
function displaySelectedItem(val,id){
    document.getElementById(id).value = val;
}
//-->

</script>

</head>

<body>

<div class="container">
  <div class="sidebar1">
    <ul class="nav">
      <li><a href="/gto_cluster">Instructions</a></li>
      <li><a href="/gto_cluster/Worksheet.php">GTO Cluster Worksheet</a></li>
      <li><a href="#">Other Strings</a></li>
      <li><a href="#">Beta</a></li>
    </ul>
    <!-- end .sidebar1 --></div>
    <div class="content" ice:editable="*">

<fieldset>
    <legend>Logos</legend>
    <p>
        <label>Choose Desired Logo</label>
        <select id="Logo">
            <option value="00">Holden</option>
            <option value="01">HSV</option>
            <option value="02">Chevrolet</option>
            <option value="02">Chevrolet</option>
            <option value="04">CSV</option>
            <option value="05">Pontiac</option>
        </select>
        <input type="button" value="Show Hex" onclick="displaySelectedItem(document.getElementById('Logo').value,'Logo2');" />
    </p>
    <p>
        <input type="text" id="Logo2" />
    </p>
</fieldset>
         <fieldset>
          <legend>Year of Vehicle</legend>
          <p>
             <label>Enter Desired Year</label>
             <select id = "year">
               <option value = "07,D4">2004</option>
               <option value = "07,D5">2005</option>
               <option value = "07,D6">2006</option>
             </select>
             <input type="button" value="Show Hex" onclick="displaySelectedItem(document.getElementById('year').value,'year2');" />
    </p>
    <p>
        <input type="text" id="year2" />
    </p>
       </fieldset>
         <fieldset>
          <legend>Shutdown Text</legend>
          <p>
             <label>Choose A Shutdown Text</label>
             <select id = "shutdown">
               <option value = "0D">Custom Text</option>
               <option value = "00">XU6</option>
               <option value = "01">Clubsport</option>
               <option value = "02">Slubsport R8</option>
               <option value = "03">GTS</option>
               <option value = "04">Senator</option>
               <option value = "05">Sen. Singature</option>
               <option value = "06">Maloo</option>
               <option value = "07">Coupe</option>
               <option value = "08">GTS-R</option>
               <option value = "09">Build No.</option>
               <option value = "0A">HSV</option>
               <option value = "0B">Grange</option>
               <option value = "0C">Maloo R8</option>
             </select>
                  <input type="button" value="Show Hex" onclick="displaySelectedItem(document.getElementById('shutdown').value,'shutdown2');" />
    </p>
    <p>
        <input type="text" id="shutdown2" />
    </p>
       </fieldset>
         <fieldset>
          <legend>RPM Values for Shift Light & Change Gear Message</legend>
          <p>
             <label>Desired 'Cold Temp' Redline</label>
             <select id = "coldtemp">
               <option value = "14">1000</option>
               <option value = "15">1050</option>
               <option value = "16">1100</option>
               <option value = "17">1150</option>
               <option value = "18">1200</option>
               <option value = "19">1250</option>
               <option value = "1A">1300</option>
               <option value = "1B">1350</option>
               <option value = "1C">1400</option>
               <option value = "1D">1450</option>
               <option value = "1E">1500</option>
               <option value = "1F">1550</option>
               <option value = "20">1600</option>
               <option value = "21">1650</option>
               <option value = "22">1700</option>
               <option value = "23">1750</option>
               <option value = "24">1800</option>
               <option value = "25">1850</option>
               <option value = "26">1900</option>
               <option value = "27">1950</option>
               <option value = "28">2000</option>
               <option value = "29">2050</option>
               <option value = "2A">2100</option>
               <option value = "2B">2150</option>
               <option value = "2C">2200</option>
               <option value = "2D">2250</option>
               <option value = "2E">2300</option>
               <option value = "2F">2350</option>
               <option value = "30">2400</option>
               <option value = "31">2450</option>
               <option value = "32">2500</option>
               <option value = "33">2550</option>
               <option value = "34">2600</option>
               <option value = "35">2650</option>
               <option value = "36">2700</option>
               <option value = "37">2750</option>
               <option value = "38">2800</option>
               <option value = "39">2850</option>
               <option value = "3A">2900</option>
               <option value = "3B">2950</option>
               <option value = "3C">3000</option>
               <option value = "3D">3050</option>
               <option value = "3E">3100</option>
               <option value = "3F">3150</option>
               <option value = "40">3200</option>
               <option value = "41">3250</option>
               <option value = "42">3300</option>
               <option value = "43">3350</option>
               <option value = "44">3400</option>
               <option value = "45">3450</option>
               <option value = "46">3500</option>
                </select>
                  <input type="button" value="Show Hex" onclick="displaySelectedItem(document.getElementById('coldtemp').value,'coldtemp2');" />
    </p>
    <p>
        <input type="text" id="coldtemp2" />
    </p>

              <label>Desired 1st Gear Redline</label>
             <select id = "1gear">
               <option value = "6E">5500</option>
               <option value = "6F">5550</option>
               <option value = "70">5600</option>
               <option value = "71">5650</option>
               <option value = "72">5700</option>
                <option value = "73">5750</option>
               <option value = "74">5800</option>
               <option value = "75">5850</option>
               <option value = "76">5900</option>
               <option value = "77">5950</option>
                <option value = "78">6000</option>
               <option value = "79">6050</option>
               <option value = "7A">6100</option>
               <option value = "7B">6150</option>
               <option value = "7C">6200</option>
                <option value = "7D">6250</option>
               <option value = "7E">6300</option>
               <option value = "7F">6350</option>
               <option value = "80">6400</option>
               <option value = "81">6450</option>
                <option value = "82">6500</option>
               <option value = "83">6550</option>
               <option value = "84">6600</option>
               <option value = "85">6650</option>
               <option value = "86">6700</option>
                <option value = "87">6750</option>
               <option value = "88">6800</option>
               <option value = "89">6850</option>
               <option value = "8A">6900</option>
               <option value = "8B">6950</option>
                <option value = "8C">7000</option>
               <option value = "8D">7050</option>
               <option value = "8E">7100</option>
               <option value = "8F">7150</option>
             </select>
             <input type="button" value="Show Hex" onclick="displaySelectedItem(document.getElementById('1gear').value,'1gear2');" />
    </p>
    <p>
        <input type="text" id="1gear2" />
    </p>

             <label>Desired 2nd Gear Redline</label>
             <select id = "2gear">
               <option value = "6E">5500</option>
               <option value = "6F">5550</option>
               <option value = "70">5600</option>
               <option value = "71">5650</option>
               <option value = "72">5700</option>
                <option value = "73">5750</option>
               <option value = "74">5800</option>
               <option value = "75">5850</option>
               <option value = "76">5900</option>
               <option value = "77">5950</option>
                <option value = "78">6000</option>
               <option value = "79">6050</option>
               <option value = "7A">6100</option>
               <option value = "7B">6150</option>
               <option value = "7C">6200</option>
                <option value = "7D">6250</option>
               <option value = "7E">6300</option>
               <option value = "7F">6350</option>
               <option value = "80">6400</option>
               <option value = "81">6450</option>
                <option value = "82">6500</option>
               <option value = "83">6550</option>
               <option value = "84">6600</option>
               <option value = "85">6650</option>
               <option value = "86">6700</option>
                <option value = "87">6750</option>
               <option value = "88">6800</option>
               <option value = "89">6850</option>
               <option value = "8A">6900</option>
               <option value = "8B">6950</option>
                <option value = "8C">7000</option>
               <option value = "8D">7050</option>
               <option value = "8E">7100</option>
               <option value = "8F">7150</option>
             </select>
             <input type="button" value="Show Hex" onclick="displaySelectedItem(document.getElementById('2gear').value,'2gear2');" />
    </p>
    <p>
        <input type="text" id="2gear2" />
    </p>

             <label>Desired 3rd Gear Redline</label>
             <select id = "3gear">
               <option value = "6E">5500</option>
               <option value = "6F">5550</option>
               <option value = "70">5600</option>
               <option value = "71">5650</option>
               <option value = "72">5700</option>
                <option value = "73">5750</option>
               <option value = "74">5800</option>
               <option value = "75">5850</option>
               <option value = "76">5900</option>
               <option value = "77">5950</option>
                <option value = "78">6000</option>
               <option value = "79">6050</option>
               <option value = "7A">6100</option>
               <option value = "7B">6150</option>
               <option value = "7C">6200</option>
                <option value = "7D">6250</option>
               <option value = "7E">6300</option>
               <option value = "7F">6350</option>
               <option value = "80">6400</option>
               <option value = "81">6450</option>
                <option value = "82">6500</option>
               <option value = "83">6550</option>
               <option value = "84">6600</option>
               <option value = "85">6650</option>
               <option value = "86">6700</option>
                <option value = "87">6750</option>
               <option value = "88">6800</option>
               <option value = "89">6850</option>
               <option value = "8A">6900</option>
               <option value = "8B">6950</option>
                <option value = "8C">7000</option>
               <option value = "8D">7050</option>
               <option value = "8E">7100</option>
               <option value = "8F">7150</option>
             </select>
             <input type="button" value="Show Hex" onclick="displaySelectedItem(document.getElementById('3gear').value,'3gear2');" />
    </p>
    <p>
        <input type="text" id="3gear2" />
    </p>

             <label>Desired 4th Gear Redline</label>
             <select id = "4gear">
               <option value = "6E">5500</option>
               <option value = "6F">5550</option>
               <option value = "70">5600</option>
               <option value = "71">5650</option>
               <option value = "72">5700</option>
                <option value = "73">5750</option>
               <option value = "74">5800</option>
               <option value = "75">5850</option>
               <option value = "76">5900</option>
               <option value = "77">5950</option>
                <option value = "78">6000</option>
               <option value = "79">6050</option>
               <option value = "7A">6100</option>
               <option value = "7B">6150</option>
               <option value = "7C">6200</option>
                <option value = "7D">6250</option>
               <option value = "7E">6300</option>
               <option value = "7F">6350</option>
               <option value = "80">6400</option>
               <option value = "81">6450</option>
                <option value = "82">6500</option>
               <option value = "83">6550</option>
               <option value = "84">6600</option>
               <option value = "85">6650</option>
               <option value = "86">6700</option>
                <option value = "87">6750</option>
               <option value = "88">6800</option>
               <option value = "89">6850</option>
               <option value = "8A">6900</option>
               <option value = "8B">6950</option>
                <option value = "8C">7000</option>
               <option value = "8D">7050</option>
               <option value = "8E">7100</option>
               <option value = "8F">7150</option>
             </select>
             <input type="button" value="Show Hex" onclick="displaySelectedItem(document.getElementById('4gear').value,'4gear2');" />
    </p>
    <p>
        <input type="text" id="4gear2" />
    </p>

             <label>Desired 5th Gear Redline</label>
             <select id = "5gear">
               <option value = "6E">5500</option>
               <option value = "6F">5550</option>
               <option value = "70">5600</option>
               <option value = "71">5650</option>
               <option value = "72">5700</option>
                <option value = "73">5750</option>
               <option value = "74">5800</option>
               <option value = "75">5850</option>
               <option value = "76">5900</option>
               <option value = "77">5950</option>
                <option value = "78">6000</option>
               <option value = "79">6050</option>
               <option value = "7A">6100</option>
               <option value = "7B">6150</option>
               <option value = "7C">6200</option>
                <option value = "7D">6250</option>
               <option value = "7E">6300</option>
               <option value = "7F">6350</option>
               <option value = "80">6400</option>
               <option value = "81">6450</option>
                <option value = "82">6500</option>
               <option value = "83">6550</option>
               <option value = "84">6600</option>
               <option value = "85">6650</option>
               <option value = "86">6700</option>
                <option value = "87">6750</option>
               <option value = "88">6800</option>
               <option value = "89">6850</option>
               <option value = "8A">6900</option>
               <option value = "8B">6950</option>
                <option value = "8C">7000</option>
               <option value = "8D">7050</option>
               <option value = "8E">7100</option>
               <option value = "8F">7150</option>
             </select>
             <input type="button" value="Show Hex" onclick="displaySelectedItem(document.getElementById('5gear').value,'5gear2');" />
    </p>
    <p>
        <input type="text" id="5gear2" />
    </p>
         </p>
       </fieldset>
        <fieldset>
          <legend>Gear Change & Shift Light</legend>
          <p>
             <label>Do You Want To Enable?</label>
             <select id = "shiftlight">
               <option value = "01">Yes</option>
               <option value = "00">No</option>
             </select>
                  <input type="button" value="Show Hex" onclick="displaySelectedItem(document.getElementById('shiftlight').value,'shiftlight2');" />
    </p>
    <p>
        <input type="text" id="shiftlight2" />
    </p>
       </fieldset>
       <fieldset>
          <legend>Custom Shutdown Text Characters
          <br /><i>Must choose "Custom Text" in "Shutdown Text" option above</i></legend>
          <p>
             <label>Enter Shutdown String, One Character Per Box</label>
             <br />
             <select id = "sdtxt1">
               <option value = "2D">-</option>
               <option value = "00">blank</option>
               <option value = "61">A</option>
               <option value = "62">B</option>
               <option value = "63">C</option>
               <option value = "64">D</option>
               <option value = "65">E</option>
               <option value = "66">F</option>
               <option value = "67">G</option>
               <option value = "68">H</option>
               <option value = "69">I</option>
               <option value = "4A">J</option>
               <option value = "6B">K</option>
               <option value = "6C">L</option>
               <option value = "6D">M</option>
               <option value = "6E">N</option>
               <option value = "6F">O</option>
               <option value = "70">P</option>
               <option value = "71">Q</option>
               <option value = "72">R</option>
               <option value = "73">S</option>
               <option value = "74">T</option>
               <option value = "75">U</option>
               <option value = "76">V</option>
               <option value = "77">W</option>
               <option value = "78">X</option>
               <option value = "79">Y</option>
               <option value = "7A">Z</option>
                <option value = "30">0</option>
               <option value = "31">1</option>
               <option value = "32">2</option>
               <option value = "33">3</option>
               <option value = "34">4</option>
               <option value = "35">5</option>
               <option value = "36">6</option>
               <option value = "37">7</option>
               <option value = "38">8</option>
               <option value = "39">9</option>
                <option value = "21">!</option>
               <option value = "40">@</option>
               <option value = "23">#</option>
               <option value = "24">$</option>
               <option value = "25">%</option>
               <option value = "5E">^</option>
               <option value = "26">& </option>
               <option value = "2A">*</option>
               <option value = "28">(</option>
               <option value = "29">)</option>
            </select>
            <input type="button" value="Show Hex" onclick="displaySelectedItem(document.getElementById('sdtxt1').value,'sdtxt12');" />
    </p>
    <p>
        <input type="text" id="sdtxt12" />
    </p>
               <select id = "sdtxt2">
              <option value = "2D">-</option>
               <option value = "00">blank</option>
               <option value = "61">A</option>
               <option value = "62">B</option>
               <option value = "63">C</option>
               <option value = "64">D</option>
               <option value = "65">E</option>
               <option value = "66">F</option>
               <option value = "67">G</option>
               <option value = "68">H</option>
               <option value = "69">I</option>
               <option value = "4A">J</option>
               <option value = "6B">K</option>
               <option value = "6C">L</option>
               <option value = "6D">M</option>
               <option value = "6E">N</option>
               <option value = "6F">O</option>
               <option value = "70">P</option>
               <option value = "71">Q</option>
               <option value = "72">R</option>
               <option value = "73">S</option>
               <option value = "74">T</option>
               <option value = "75">U</option>
               <option value = "76">V</option>
               <option value = "77">W</option>
               <option value = "78">X</option>
               <option value = "79">Y</option>
               <option value = "7A">Z</option>
                <option value = "30">0</option>
               <option value = "31">1</option>
               <option value = "32">2</option>
               <option value = "33">3</option>
               <option value = "34">4</option>
               <option value = "35">5</option>
               <option value = "36">6</option>
               <option value = "37">7</option>
               <option value = "38">8</option>
               <option value = "39">9</option>
                <option value = "21">!</option>
               <option value = "40">@</option>
               <option value = "23">#</option>
               <option value = "24">$</option>
               <option value = "25">%</option>
               <option value = "5E">^</option>
               <option value = "26">& </option>
               <option value = "2A">*</option>
               <option value = "28">(</option>
               <option value = "29">)</option>
            </select>
            <input type="button" value="Show Hex" onclick="displaySelectedItem(document.getElementById('sdtxt2').value,'sdtxt22');" />
    </p>
    <p>
        <input type="text" id="sdtxt22" />
    </p>
               <select id = "sdtxt3">
               <option value = "2D">-</option>
               <option value = "00">blank</option>
               <option value = "61">A</option>
               <option value = "62">B</option>
               <option value = "63">C</option>
               <option value = "64">D</option>
               <option value = "65">E</option>
               <option value = "66">F</option>
               <option value = "67">G</option>
               <option value = "68">H</option>
               <option value = "69">I</option>
               <option value = "4A">J</option>
               <option value = "6B">K</option>
               <option value = "6C">L</option>
               <option value = "6D">M</option>
               <option value = "6E">N</option>
               <option value = "6F">O</option>
               <option value = "70">P</option>
               <option value = "71">Q</option>
               <option value = "72">R</option>
               <option value = "73">S</option>
               <option value = "74">T</option>
               <option value = "75">U</option>
               <option value = "76">V</option>
               <option value = "77">W</option>
               <option value = "78">X</option>
               <option value = "79">Y</option>
               <option value = "7A">Z</option>
                <option value = "30">0</option>
               <option value = "31">1</option>
               <option value = "32">2</option>
               <option value = "33">3</option>
               <option value = "34">4</option>
               <option value = "35">5</option>
               <option value = "36">6</option>
               <option value = "37">7</option>
               <option value = "38">8</option>
               <option value = "39">9</option>
                <option value = "21">!</option>
               <option value = "40">@</option>
               <option value = "23">#</option>
               <option value = "24">$</option>
               <option value = "25">%</option>
               <option value = "5E">^</option>
               <option value = "26">& </option>
               <option value = "2A">*</option>
               <option value = "28">(</option>
               <option value = "29">)</option>
            </select>
            <input type="button" value="Show Hex" onclick="displaySelectedItem(document.getElementById('sdtxt3').value,'sdtxt32');" />
    </p>
    <p>
        <input type="text" id="sdtxt32" />
    </p>
       </fieldset>

         <!-- end .content --></div>
  <!-- end .container --></div>
</body>
</html>
rfeni
  • 17
  • 7
  • There's no `` in your HTML.
     – Barmar May 09 '13 at 15:20
  • I haven't added a table yet.. It'd be more of a preexisting text box with the above line in it – rfeni May 09 '13 at 15:26
  • Split the text into an array using `str.split(',')`, replace the array elements with the values of the appropriate select menus, use `array.join(',')` to turn it back into a string, and put this in the text box. – Barmar May 09 '13 at 16:24
  • I apologize in advance, as Java is new to me. I checked W3Schools and i'm not following how those two arrays work. So, I would do str.split(insert text string from OP here) and in the YR,SD etc. do array.join? – rfeni May 09 '13 at 17:03

1 Answers1

0
function displayHexTable() {
    var hexString = document.getElementById('hexTable').value;
    var hexArray = hexString.split(',');
    hexArray[4] = document.getElementById('Logo').value;
    var years = document.getElementById('year').value.split(',');
    hexArray[8] = years[0];
    hexArray[9] = years[1];
    /* repeat above for other fields */
    var newHexString = hexArray.join(',');
    document.getElementById('hexTable').value = newHexString;
}

Add the above function as the onclick handler for the button.

See my FIDDLE

Barmar
  • 741,623
  • 53
  • 500
  • 612
  • http://jsfiddle.net/0352Goat/F3dNz/ I tried created a table and have it called by the button so that I can add the onclick, but this is really kicking my butt. Should be simple and I know i'm overlooking something here.. – rfeni May 09 '13 at 18:04
  • Added fiddle to demonstrate. – Barmar May 09 '13 at 18:19
  • Alright - saw you string -think I understand it. hexArray[] = the place in the string it should be entered, correct? I've set it up like so but only the 'Logo' updates http://jsfiddle.net/0352Goat/QMvqh/ – rfeni May 09 '13 at 18:45
  • I changed your fiddle to use `No Wrap` for the JS (when you use `onLoad` the function is inside another function, and can't be accessed from `onclick` attributes), it seems to work for all the fields. http://jsfiddle.net/barmar/QMvqh/1/ – Barmar May 09 '13 at 18:58
  • That seems to have done it! The only issue is with hexArray[8], it should overwrite YR but instead it puts it to the left - I tried removing the year or moving it and it just overwrote the data thats next to it currently – rfeni May 09 '13 at 19:12
  • I didn't notice that some of your values have more than one hex number. You need to split the value, then put each piece into a different element of `hexArray[]`. – Barmar May 09 '13 at 19:16
  • How do I split the value? Do I just do another – rfeni May 09 '13 at 19:20
  • You use the `split()` function, just like before. See my updated answer. – Barmar May 09 '13 at 19:20
  • Okay, got that to work. You've been so much help, learned a ton today. The only issue I have now is that you can see where it's overwritting the '58' with TX,TX - I can't find where it would do that or why :\ Starting: F2,70,28,09,L,00,00,YR,SD,RD,RD,RD,RD,RD,RD,GR,58,00,TX,TX,TX,TX,TX,TX,TX,TX,TX,TX Generated: F2,70,28,09,01,00,00,07,D6,09,14,6E,6E,6E,6E,6E,01,00,TX,TX,00,2D,2D,2D,2D,2D,2D,2D,2D,00 http://jsfiddle.net/0352Goat/PbJjx/ – rfeni May 09 '13 at 19:41
  • The original table only has 28 items, indexed 0 through 27. But you're filling in elements up to 29. You jumped from 16 to 20, you should have gone from 16 to 18. – Barmar May 09 '13 at 19:50