<script>
function Calculate(obj)
{
    //All calculations in CM
    loop_dia 	  = obj.loop_dia.value;
    line_diameter = obj.line_diameter.value;

    //Stretch factor
    stretch = 1.2;
    if (line_diameter <= .25) stretch = 1.1875;

    //Calculate
    var idia            = 1.865 * line_diameter;
    var length          = Math.PI * loop_dia * (1 + stretch) + 26 * line_diameter;
    var mark            = Math.PI * loop_dia * stretch / 2;
    var length_extended = loop_dia * Math.PI / 2;

    //Assign and round
    obj.idia.value  		  = idia.toFixed(1) +"cm";
    obj.length.value 		  = length.toFixed(1) +"cm";
    obj.mark.value            = mark.toFixed(1) +"cm";
    obj.length_extended.value = length_extended.toFixed(1) +"cm";
}
</script>
<form>
    <div class="form-group">
        <label for="line_diameter">Line diameter</label>
        <select class="form-control form-control-lg" name="line_diameter" onChange="Calculate(this.form)">
             <option value=".2">2mm</option>
             <option value=".25">2.5mm</option>
             <option value=".3">3mm</option>
             <option value=".4" selected>4mm</option>
             <option value=".5">5mm</option>
             <option value=".6">6mm</option>
             <option value=".8">8mm</option>
             <option value="1.0">10mm</option>
             <option value="1.2">12mm</option>
         </select>

        <label for="loop_dia">Loop diameter (in centimeter)</label>
        <input type="number" min="0" step=".1" class="form-control form-control-lg" id="loop_dia" aria-describedby="emailHelp" placeholder="Enter loop diameter" onChange="Calculate(this.form)">

        <button onClick="Calculate(this.form)" class="btn btn-primary">Calculate</button>
    </div>
        <hr>
    <div class="form-group">
        <label for="idia">Loop size (Diameter of double braid)</label>
        <input type="text" readonly class="form-control-plaintext" id="idia">
     
        <label for="length">Total rope needed</label>
        <input type="text" readonly class="form-control-plaintext" id="length">

        <label for="mark">From center mark</label>
        <input type="text" readonly class="form-control-plaintext" id="mark">
     
        <label for="length_extended">Tip to tip</label>
        <input type="text" readonly class="form-control-plaintext" id="length_extended">
    </div>
</form>