make the additional information fields work with js update of category dropdown

1 files changed, 34 insertions, 25 deletions

diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js
index 3d07c61ec..a0ea02437 100644
--- a/web/js/fixmystreet.js
+++ b/web/js/fixmystreet.js
@@ -3,6 +3,38 @@
  * FixMyStreet JavaScript
  */
 
+function form_category_onchange() {
+    if ( category_extras ) {
+        if ( $('#category_meta').size() ) {
+            $('#category_meta').empty();
+        } else {
+            $('#form_category_row').after(
+                '<div id="category_meta"></div>'
+            );
+        }
+        if ( category_extras[this.options[ this.selectedIndex ].text] ) {
+            var fields = category_extras[this.options[ this.selectedIndex ].text];
+            $('<h4>Additional information</h4>').appendTo('#category_meta');
+            for ( var i in fields) {
+                var meta = fields[i];
+                var field = '<div class="form-field">';
+                field += '<label for="form_' + meta.code + '">' + meta.description + ':</label>';
+                if ( meta.values ) {
+                    field += '<select name="' + meta.code + '" id="form_' + meta.code + '">';
+                    for ( var j in meta.values.value ) {
+                        field += '<option value="' + meta.values.value[j].key + '">' + j + '</option>';
+                    }
+                    field += '</select>';
+                } else {
+                    field += '<input type="text" value="" name="' + meta.code + '" id="form_' + meta.code + '">';
+                }
+                field += '</div>';
+                $( field ).appendTo('#category_meta');
+            }
+        }
+    }
+}
+
 $(function(){
 
     $('html').removeClass('no-js').addClass('js');
@@ -59,31 +91,8 @@ $(function(){
         timer = window.setTimeout(email_alert_close, 2000);
     });
 
-    $('#form_category').change(function() {
-        if ( category_extras ) {
-            $('#category_meta').empty();
-            if ( category_extras[this.options[ this.selectedIndex ].text] ) {
-                var fields = category_extras[this.options[ this.selectedIndex ].text];
-                $('<h4>Additional information</h4>').appendTo('#category_meta');
-                for ( var i in fields) {
-                    var meta = fields[i];
-                    var field = '<div class="form-field">';
-                    field += '<label for="form_' + meta.code + '">' + meta.description + ':</label>';
-                    if ( meta.values ) {
-                        field += '<select name="' + meta.code + '" id="form_' + meta.code + '">';
-                        for ( var j in meta.values.value ) {
-                            field += '<option value="' + meta.values.value[j].key + '">' + j + '</option>';
-                        }
-                        field += '</select>';
-                    } else {
-                        field += '<input type="text" value="" name="' + meta.code + '" id="form_' + meta.code + '">';
-                    }
-                    field += '</div>';
-                    $( field ).appendTo('#category_meta');
-                }
-            }
-        }
-    });
+
+    $('#form_category').change( form_category_onchange );
 
     // Geolocation
     if (geo_position_js.init()) {