Insert JS into table with preexisting data

StackOverflow https://stackoverflow.com/questions/16465234

Domanda

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>
È stato utile?

Soluzione 

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top