Bootstrap Length Field Replacement

lengths.js

// A hastily thrown-together tool which replaces a field, with the class 'length-field' with a field that allows the user to choose their own units (mm, cm, m, km, in, ft, yd, mi), while saving the result in mm.
// The input group relies on Bootstrap for the layout at present.
// I'd really like to return to this at some point and neaten things up a bit.

$('.length-field').each(function(){
    var cur_unit = "mm";
    var cur_multiplier = 1;
    var original_units = {
        "mm": 1,
        "cm": 10,
        "m": 1000,
        "km": 1000000,
        "dvdr": 0,
        "in": 25.4,
        "ft": 304.8,
        "yd": 914.4,
        "mi": 1609344
    };

    var field_id = $(this).attr("id");
    var field_name = $(this).attr("name");
    $(this).parent().append("<input type=\"hidden\" name=\""+field_name+"\" id=\"hidden-length-field-"+$(this).attr("id")+"\">");
    var newfield = "<div class=\"input-group\"><input type=\"text\" class=\"form-control\" id=\"formatted-length\" /><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\" aria-expanded=\"false\" id=\"cur-unit-value\">mm <span class=\"caret\"></span></button><ul class=\"dropdown-menu dropdown-menu-left\" role=\"menu\">";
    if ($(this).data("units")) {
        var allowed_units = $('.length-field').data("units").split(" ");
        var units = {};
        $.each(allowed_units, function (key, value) {
            units[value] = original_units[value];
        });
    } else {
        var units = original_units;
    }
    $.each(units, function (key, value) {
        if (key === "dvdr") {
            newfield += "<li class=\"divider\"></li>";
        } else {
            newfield += "<li><a href=\"#\" class=\"length-unit-option\" data-multiplier=\"" + value + "\">" + key + "</a></li>";
        }
    });
    newfield += "</ul></div></div>";
    $(this).parent().append(newfield);
    $(this).remove();
    $('#formatted-length').keyup(function () {
        if ($(this).val() === "") {
            formatted_val = 0;
        } else {
            formatted_val = parseFloat($(this).val());
        }
        mmvalue = formatted_val * cur_multiplier;
        $("#hidden-length-field-"+field_id).val(Math.round(mmvalue));
        $("#hidden-length-field-"+field_id).trigger("change");
    });
    $('.length-unit-option').click(function () {
        event.preventDefault();
        $('#cur-unit-value').html($(this).html() + "<span class=\"caret\"></span>");
        cur_unit = $(this).html();
        cur_multiplier = parseFloat($(this).data("multiplier"));
        $('#formatted-length').trigger("keyup");
    });
});

loudness.js

// In a similar ilk, today I'm working on the user experience of a "sound level" field, and thought that as we don't use decidels very often, it might be nice to add an example for the value typed.

var loudnessdata = [];
loudnessdata[0] = "a pin dropping";
loudnessdata[30] = "whispering in a library";
loudnessdata[60] = "a normal conversation";
loudnessdata[85] = "city traffic";
loudnessdata[98] = "a hand drill";
loudnessdata[102] = "a motorcycle";
loudnessdata[110] = "a power saw";
loudnessdata[115] = "a rock concert";
loudnessdata[140] = "a jet engine";
loudnessdata[165] = "a gunshot";
loudnessdata[194] = "the loudest sound possible";

$('.loudness-field').each(function(){
  var field_id = $(this).attr("id");
  newfield = "<div class=\"input-group\"><input type=\"number\" class=\""+$(this).attr("class")+"\" min=0 max=194 id=\""+$(this).attr("id")+"\" name=\""+$(this).attr("name")+"\" /><span class=\"input-group-addon\">dB</span></div><p class=\"help-block\"  id=\""+field_id+"-help-block\"></p>";
  $(this).parent().append(newfield);
  $(this).remove();
    $("body").on("change","#"+field_id, function(){
        $(this).trigger("keyup");
    });
  $("body").on("keyup","#"+field_id, function(){
      var new_sentence;
      if(loudnessdata[$("#"+field_id).val()]){
          new_sentence = "About as loud as "+loudnessdata[$("#"+field_id).val()];
      }else{
              var i = $("#"+field_id).val();
              var ilower = i;
              var ihigher = i;
              var ilowersentence = undefined;
              var ihighersentence = undefined;
              do{
                  ilower--;
                  if(loudnessdata[ilower]){
                      ilowersentence = loudnessdata[ilower];
                      break;
                  }
              }while(ilower > -1);
              do{
                  ihigher++;
                  if(loudnessdata[ihigher]){
                      ihighersentence = loudnessdata[ihigher];
                      break;
                  }
              }while(ihigher < 200);
          new_sentence = "This is a sound somewhere between "+ilowersentence+" and "+ihighersentence;
      }
      $("#"+field_id+"-help-block").html(new_sentence);
  });
});