JSFiddle - React, Tailwind, and code Playground

by Fluke SeaWalker

HTML

<!-- Edit Button to edit a profile -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="editModalLabel">Edit Profile</h4>
     </div>
     <div class="modal-body">
       <form method="get" name="editprofiledata" id="editprofiledata">
        <div >
          <label>Details</label>

          <table  id="tableID" class="table table-bordered table-hover tablewithtooltip">
            <thead>
              <tr style="background-color: #787878 ">
                <th>Attribute</th>
                <th>Value</th>
              </tr>
            </thead>

            <tbody>
              <tr><td>Profile Name</td><td><input type="text" value="" name="selectedProfileName" id="selectedProfileName" onchange="testDropDownAutoFill()"/></td></tr>
              <tr><td>Profile Mnemonic</td><td><input type="text" value="" name="profileMnemonic" id="profileMnemonic" onchange="testDropDownAutoFill()"/></td></tr>
              <tr><td>Tx Data Rate</td><td><select name="txDataRate" id="txDataRate"><option value="1">64  kbps 1/9</option>
                    <option value="2">128 kbps 2/9</option>
                    <option value="3">256 kbps 1/9</option>
                    <option value="6">256 kbps 2/9</option>
                    <option value="5">512 kbps 2/9</option>
                    <option value="4">512 kbps 1/9</option></select></td></tr>
              <tr><td>Rx Data Rate</td><td><select name="rxDataRate" id="rxDataRate"><option value="1">64  kbps 1/9</option>
                   <option value="2">128 kbps 2/9</option>
                   <option value="3">256 kbps 1/9</option>
                   <option value="6">256 kbps 2/9</option>
                   <option value="5">512 kbps 2/9</option>
                   <option...

JavaScript

function testDropDownAutoFill(){
 //$('#editModal').modal();
 var attributeList1 = ["selectedProfileName","profileMnemonic", "txDataRate", "rxDataRate"];   
    var profileData = {
        "txDataRate" : Math.floor(Math.random() * 6) + 1,
        "rxDataRate" : Math.floor(Math.random() * 6) + 1,
    }  
    //console.log(profileData["txDataRate"] +" & " + profileData["rxDataRate"]);
 for(var i=0;i<attributeList1.length;i++)
  {
      var attr1=attributeList1[i];
      if (attr1 == "txDataRate" || attr1 == "rxDataRate"){     
          $("#"+attr1).val(profileData[attr1]);
      }      
  }
 }