Dropdown menu not filling when setting up form for editing

Question

I have been looking at filling out a form with previous information using javascript, and am able to get the textboxes filled, but the dropdown selections are causing issues. I'm following this method of selecting a specific option, but it doesn't seem to work with the rest of my code. It works only if I create a separate page without the for loop to fill out the textboxes. I've checked the names and id's of the selections to see if there was an overlap somewhere else in my code, but that does not appear to be the case. I originally thought that I solved the issue because I misunderstood the difference between the value of the option versus the index of the option. But that changed nothing. I've been using console.log to verify that each step is being called, and that each input is appropriate. I've tried commenting out the code and just setting the element statically.

The issue I'm having is that the drop down boxes don't populate when I select a profile to edit. The textboxes fill with the last saved data, but nothing appears in the dropdowns. What would cause a dropdown to not populate?

This is the 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"/></td></tr>
              <tr><td>Profile Mnemonic</td><td><input type="text" value="" name="profileMnemonic" id="profileMnemonic"/></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 value="4">512 kbps 1/9</option></td></tr>    
            </tbody>
      </table>
       </div>
      </form>
     </div>
     <div class="modal-footer">
        <button type="submit" class="btn btn-default btn-default" data-dismiss="modal" name="updateProfile" id="updateProfile" onclick="saveUpdatedProfile()">Save</button>
     </div>
  </div><!-- /.modal-content -->

And this is the javascript:

function editProfile(){
 $('#editModal').modal();

 var attributeList1 = ["selectedProfileName","profileMnemonic", "txDataRate", "rxDataRate", ... more attributes ...];

 for(var i=0;i<attributeList1.length;i++)

  {

  attr1=attributeList1[i];

  if (attr1 == "txDataRate" || attr1 == "rxDataRate"){

    if (profileData[attr1]==1){
        document.getElementById(attr1).selectedIndex=0;
    }
    else if (profileData[attr1]==2){
        document.getElementById(attr1).selectedIndex=1;
    }
    else if (profileData[attr1]==3){
        document.getElementById(attr1).selectedIndex=2;
    }
    else if (profileData[attr1]==6){
        document.getElementById(attr1).selectedIndex=3;
    }
    else if (profileData[attr1]==5){
        document.getElementById(attr1).selectedIndex=4;
    }
    else {
        document.getElementById(attr1).selectedIndex=5;
    }
  }
  else{
    document.getElementById(attr1).value=profileData[attr1];
      }
  }
 }

Edited to add: I have tried $('#'+attr1+' option:[value='+profileData[attr1]+']').prop('selected',true); to select the correct dropdown option with no change. (Found that suggestion here)

Screenshot of problem showing the filled textboxes and empty dropdowns.

SOLVED! Another function was overwriting the html ID's and thus my if/for statements were not able to change the selected dropdown ID.

I don't see where your JS function editProfile() gets called in the html? — 2147483647, Jan 20 '15 at 19:06
It's called much earlier on in the html by a button. Essentially, the user selects a profile, and then hits the "edit" button which calls the JS function. That part all works just fine. — Shardage, Jan 20 '15 at 19:20
Ok, the first line in your editProfile() functions uses JQuery selector function while else where you use regular JS 'getElementById' selector. Can you change all that to JQuery $ selector and see if it works? — 2147483647, Jan 20 '15 at 19:56
Okay, using `$("#"+attr1).val(profileData[attr1])` I get the same output with the textboxes being filled with the appropriate data, but the drop down menus being empty. — Shardage, Jan 20 '15 at 20:20

Steve · Answer 1 · 2015-01-21T14:27:02.273

try

document.getElementById(attr1).options.selectedIndex = 5;

EDIT*

I made the edits below and called the function from the firebug console with your markup and it selected the options. After this I'm out of ideas. Sorry if it doesn't help and good luck with the fix!

  function editProfile(){


 var attributeList1 = ["selectedProfileName","profileMnemonic", "txDataRate", "rxDataRate"],
     profileData = {"rxDataRate":3,"txDataRate":5,"selectedProfileName":"abcd","profileMnemonic":"efgh"};

 for(var i=0;i<attributeList1.length;i++){

  attr1=attributeList1[i];

  if (attr1 == "txDataRate" || attr1 == "rxDataRate"){

    if (profileData[attr1]==1){
        document.getElementById(attr1).options.selectedIndex=0;
    }
    else if (profileData[attr1]==2){
        document.getElementById(attr1).options.selectedIndex=1;
    }
    else if (profileData[attr1]==3){
        document.getElementById(attr1).options.selectedIndex=2;
    }
    else if (profileData[attr1]==6){
        document.getElementById(attr1).options.selectedIndex=3;
    }
    else if (profileData[attr1]==5){
        document.getElementById(attr1).options.selectedIndex=4;
    }
    else {
        document.getElementById(attr1).options.selectedIndex=5;
    }
  }
  else{
    document.getElementById(attr1).value=profileData[attr1];
      }
  }

}

That does not appear to do anything, either. – Shardage Jan 21 '15 at 13:48 — Shardage, Jan 21 '15 at 13:48

score 0 · Accepted Answer · answered Jan 20 '15 at 22:09

0

Are you if statements working correctly. I mean do you reach to the statement document.getElementById(attr1).selectedIndex=1;. One thing I'll do is to put console.log('selecting 1st index'); and make sure that I get into the if statements, something like this:

if (profileData[attr1]==1){
    console.log('selecting 1st index');
    document.getElementById(attr1).selectedIndex=0;
}

Also, where your profileData are being populated?

answered Jan 20 '15 at 22:09

abinsalm

66
8

Yes, my if statements are working correctly. Console.log shows that it is going to the correct location. – Shardage Jan 21 '15 at 13:42
My profileData is being populated by another function called loadData(), and this works for everything else that requires the profile information. It also populates the text fields fine, just not the dropdowns. – Shardage Jan 21 '15 at 13:54
I think the issue is not in the code we are seeing. I see you are putting your html in a model. When you run it in the browser, check the source from the browser and make sure you don't have duplicate IDs, also check if it is not a browser specific issue. Is there a way you can post a working example? something minimal that we can recreate locally since your code seems fine to us. – abinsalm Jan 21 '15 at 16:00
I agree with that assessment. I've narrowed down the potential issue to this function: `function loadData(){ url1 = "/rest/get/configProfileInfo/"+radioNumber; $.getJSON( url1, function( data ) { $.each( data, function( key, val ) { // store for later user profileData[key]=val; $('#'+key).html(": "+val); }); }); }` – Shardage Jan 21 '15 at 17:04
What is this line for: `$('#' + key).html(": " + val);` – abinsalm Jan 21 '15 at 17:13
Thank you! That line was used on the index.html page and is a remnant which is not needed on the manage profiles page. :D – Shardage Jan 21 '15 at 17:15
If I were in your situation, I'll try to run this code `document.getElementById("rxDataRate").selectedIndex=3;` in the console of the browser and see if it will changed the selected value. If it didn't work, then maybe your id is changed somehow or you have duplicate. Can you right click on the select box and choose "Inspect Element" and post a screen shoot of your source for that element? – abinsalm Jan 21 '15 at 17:18

2147483647 · Answer 3 · 2015-01-21T16:03:11.337

I manually populated your array "profileData" to test the code and it does seem to work. So the problem could be your profileData array being empty when your function runs

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]);
      }      
  }
 }

See JSFiddle : http://jsfiddle.net/angrybird/qvqmL8tv/

It's not empty. It contains [ profileMnemonic "This is a test profile" rxDataRate "1" selectedProfileName "Profile C" selectedSatellite "Satellite 1" txDataRate "6" ] — Shardage, Jan 21 '15 at 15:56

Dropdown menu not filling when setting up form for editing

3 Answers3