From cb2a5cbe1fb5f0b3fb8bea31f310f5805e5667c5 Mon Sep 17 00:00:00 2001
From: Ivan Kohler <ivan@freeside.biz>
Date: Mon, 22 May 2017 18:33:28 -0700
Subject: [PATCH] fix DID selection dropdowns, RT#75901

---
 httemplate/elements/select-areacode.html | 31 +++++++++++++++++--------------
 httemplate/elements/select-exchange.html | 25 ++++++++++++++-----------
 httemplate/elements/select-phonenum.html | 19 ++++++++-----------
 3 files changed, 39 insertions(+), 36 deletions(-)

diff --git a/httemplate/elements/select-areacode.html b/httemplate/elements/select-areacode.html
index 612f03a8b..11b618847 100644
--- a/httemplate/elements/select-areacode.html
+++ b/httemplate/elements/select-areacode.html
@@ -6,10 +6,9 @@
 
 <SCRIPT TYPE="text/javascript">
 
-  function opt(what,value,text) {
+  function jopt(what,value,text) {
     var optionName = new Option(text, value, false, false);
-    var length = what.length;
-    what.options[length] = optionName;
+    what.append(optionName);
   }
 
   function <% $opt{'state_prefix'} %>state_changed(what, callback) {
@@ -30,21 +29,20 @@
 
       var reply = JSON.parse(areacodes);
       // blank the current areacode
-      for ( var i = what.form.<% $opt{'prefix'} %>areacode.length; i >= 0; i-- )
-          what.form.<% $opt{'prefix'} %>areacode.options[i] = null;
+      $('#<% $opt{prefix} %>areacode').empty;
+
       // blank the current exchange too
-      for ( var i = what.form.<% $opt{'prefix'} %>exchange.length; i >= 0; i-- )
-          what.form.<% $opt{'prefix'} %>exchange.options[i] = null;
-      opt(what.form.<% $opt{'prefix'} %>exchange, '', 'Select city / exchange');
+      $('#<% $opt{prefix} %>exchange').empty;
+      jopt( $('#<% $opt{prefix} %>exchnage'), '', 'Select city / exchange' );
+
       // blank the current phonenum too
-      for ( var i = what.form.<% $opt{'prefix'} %>phonenum.length; i >= 0; i-- )
-          what.form.<% $opt{'prefix'} %>phonenum.options[i] = null;
+      $('#<% $opt{prefix} %>phonenum').empty;
       if ( what.form.<% $opt{'prefix'} %>phonenum.type != 'select-multiple' ) {
-        opt(what.form.<% $opt{'prefix'} %>phonenum, '', 'Select phone number');
+        jopt($('<% $opt{'prefix'} %>phonenum'), '', 'Select phone number');
       }
 
 %     if ($opt{empty}) {
-        opt(what.form.<% $opt{'prefix'} %>areacode, '', '<% $opt{empty} %>');
+        jopt($('#<% $opt{'prefix'} %>areacode'), '', '<% $opt{empty} %>');
 %     }
 
       // add the new areacodes
@@ -53,7 +51,7 @@
           var areacodeLabel = areacodeArray[s];
           if ( areacodeLabel == "" )
               areacodeLabel = '(n/a)';
-          opt(what.form.<% $opt{'prefix'} %>areacode, areacodeArray[s], areacodeLabel);
+          jopt($('#<% $opt{'prefix'} %>areacode'), areacodeArray[s], areacodeLabel);
       }
 
       areacodewait.style.display = 'none';
@@ -86,7 +84,12 @@
 
 <DIV ID="areacodeerror" STYLE="display:none; font-weight: bold"><IMG SRC="<%$fsurl%>images/cross.png"></DIV>
 
-<SELECT NAME="<% $opt{'prefix'} %>areacode" onChange="<% $opt{'prefix'} %>areacode_changed(this); <% $opt{'onchange'} %>" <% $opt{'disabled'} %>>
+<SELECT
+  ID       = "<% $opt{prefix} %>areacode"
+  NAME     = "<% $opt{prefix} %>areacode"
+  onChange = "<% $opt{prefix} %>areacode_changed(this); <% $opt{onchange} %>"
+  <% $opt{disabled} %>
+>
   <OPTION VALUE="">Select area code</OPTION>
 </SELECT>
 
diff --git a/httemplate/elements/select-exchange.html b/httemplate/elements/select-exchange.html
index 33def31b9..a8201468f 100644
--- a/httemplate/elements/select-exchange.html
+++ b/httemplate/elements/select-exchange.html
@@ -6,10 +6,9 @@
 
 <SCRIPT TYPE="text/javascript">
 
-  function opt(what,value,text) {
+  function jopt(what,value,text) {
     var optionName = new Option(text, value, false, false);
-    var length = what.length;
-    what.options[length] = optionName;
+    what.append(optionName);
   }
 
   function <% $opt{'prefix'} %>areacode_changed(what, callback) {
@@ -29,17 +28,16 @@
 
       var reply = JSON.parse(exchanges);
       // blank the current exchange
-      for ( var i = what.form.<% $opt{'prefix'} %>exchange.length; i >= 0; i-- )
-          what.form.<% $opt{'prefix'} %>exchange.options[i] = null;
+      $('#<% $opt{prefix} %>exchange').empty;
+
       // blank the current phonenum too
-      for ( var i = what.form.<% $opt{'prefix'} %>phonenum.length; i >= 0; i-- )
-          what.form.<% $opt{'prefix'} %>phonenum.options[i] = null;
+      $('#<% $opt{prefix} %>phonenum').empty;
       if ( what.form.<% $opt{'prefix'} %>phonenum.type != 'select-multiple' ) {
-        opt(what.form.<% $opt{'prefix'} %>phonenum, '', 'Select phone number');
+        jopt($('#<% $opt{'prefix'} %>phonenum'), '', 'Select phone number');
       }
 
 %     if ($opt{empty}) {
-        opt(what.form.<% $opt{'prefix'} %>exchange, '', '<% $opt{empty} %>');
+        jopt($('#<% $opt{'prefix'} %>exchange'), '', '<% $opt{empty} %>');
 %     }
 
       // add the new exchanges
@@ -48,7 +46,7 @@
           var exchangeLabel = exchangeArray[s];
           if ( exchangeLabel == "" )
               exchangeLabel = '(n/a)';
-          opt(what.form.<% $opt{'prefix'} %>exchange, exchangeArray[s], exchangeLabel);
+          jopt($('#<% $opt{'prefix'} %>exchange'), exchangeArray[s], exchangeLabel);
       }
 
       exchangewait.style.display = 'none';
@@ -82,7 +80,12 @@
 
 <DIV ID="exchangeerror" STYLE="display:none; font-weight: bold"><IMG SRC="<%$fsurl%>images/cross.png"></DIV>
 
-<SELECT NAME="<% $opt{'prefix'} %>exchange" onChange="<% $opt{'prefix'} %>exchange_changed(this); <% $opt{'onchange'} %>" <% $opt{'disabled'} %>>
+<SELECT
+  ID       = "<% $opt{prefix} %>exchange"
+  NAME     = "<% $opt{prefix} %>exchange"
+  onChange = "<% $opt{prefix} %>exchange_changed(this); <% $opt{onchange} %>"
+  <% $opt{disabled} %>
+>
   <OPTION VALUE="">Select city / exchange</OPTION>
 </SELECT>
 
diff --git a/httemplate/elements/select-phonenum.html b/httemplate/elements/select-phonenum.html
index dd1b84736..c9254ad60 100644
--- a/httemplate/elements/select-phonenum.html
+++ b/httemplate/elements/select-phonenum.html
@@ -37,10 +37,9 @@ passing the exchange (or region) and
 
 <SCRIPT TYPE="text/javascript">
 
-  function opt(what,value,text) {
+  function jopt(what,value,text) {
     var optionName = new Option(text, value, false, false);
-    var length = what.length;
-    what.options[length] = optionName;
+    what.append(optionName);
   }
 
   function <% $opt{'prefix'} %><% $previous %>_changed(what, callback) {
@@ -58,12 +57,11 @@ passing the exchange (or region) and
 
       var reply = JSON.parse(phonenums);
       // blank the current phonenum
-      for ( var i = what.form.<% $opt{'prefix'} %>phonenum.length; i >= 0; i-- )
-          what.form.<% $opt{'prefix'} %>phonenum.options[i] = null;
+      $('#<% $opt{prefix} %>phonenum').empty;
 
 %     if ($opt{empty}) {
         if ( what.form.<% $opt{'prefix'} %>phonenum.type != 'select-multiple' ){
-          opt(what.form.<% $opt{'prefix'} %>phonenum, '', '<% $opt{empty} %>');
+          jopt($('#<% $opt{'prefix'} %>phonenum'), '', '<% $opt{empty} %>');
         }
 %     }
 
@@ -73,7 +71,7 @@ passing the exchange (or region) and
           var phonenumLabel = phonenumArray[s];
           if ( phonenumLabel == "" )
               phonenumLabel = '(n/a)';
-          opt(what.form.<% $opt{'prefix'} %>phonenum, phonenumArray[s], phonenumLabel);
+          jopt($('#<% $opt{'prefix'} %>phonenum'), phonenumArray[s], phonenumLabel);
       }
 
       //var phonenumFormLabel = document.getElementById('<% $opt{'prefix'} %>phonenumlabel');
@@ -131,11 +129,10 @@ passing the exchange (or region) and
 	what = document.getElementById('<% $opt{prefix} %>phonenum');
 
 	// blank the current phonenum
-      for ( var i = what.form.<% $opt{'prefix'} %>phonenum.length; i >= 0; i-- )
-          what.form.<% $opt{'prefix'} %>phonenum.options[i] = null;
+        $('#<% $opt{prefix} %>phonenum').empty;
 
 %     if ($opt{empty}) {
-        opt(what.form.<% $opt{'prefix'} %>phonenum, '', '<% $opt{empty} %>');
+        jopt($('#<% $opt{'prefix'} %>phonenum'), '', '<% $opt{empty} %>');
 %     }
 
       // add the new phonenums
@@ -144,7 +141,7 @@ passing the exchange (or region) and
           var phonenumLabel = phonenumArray[s];
           if ( phonenumLabel == "" )
               phonenumLabel = '(n/a)';
-          opt(what.form.<% $opt{'prefix'} %>phonenum, phonenumArray[s], phonenumLabel);
+          jopt($('#<% $opt{'prefix'} %>phonenum'), phonenumArray[s], phonenumLabel);
       }
 
       what.form.<% $opt{'prefix'} %>phonenum.disabled = '';
-- 
2.11.0