form.html

<div class="container">

<form role="form" method="get" class="well form-horizontal" id='mainform'>
    <div class="control-group">
        <label for="nc" class="control-label">No of concentrated Load</label>
        <div class="controls">
            <input type="text" name="nc" id='nc' placeholder="No of concentrated Load" />
            <span class="help-block">Sample Input: 4</span>
        </div>
    </div>
    <div class="control-group">
        <label for="nu" class="control-label">No of UDL</label>
        <div class="controls">
            <input type="text" name="nu" id="nu" placeholder="No of uniformly distributed Load" />
            <span class="help-block">Sample Input: 1</span>
        </div>
    </div>
    <div class="control-group">
        <label for="spanbeam" class="control-label">Span of Beam</label>
        <div class="controls">
            <input type="text" name="spanbeam" id="spanbeam" placeholder="Span of the beam" />
            <span class="help-block">Sample Input: 5</span>
        </div>
   </div>

   <div class="control-group">
        <label for ="noseg" class="control-label">No of Segments</label>
        <div class="controls">
            <input type="text" name="noseg" id="noseg" placeholder="No of Segments" />
            <span class="help-block">Sample Input: 5</span>
        </div>
   </div>

   <div style="display: none" id="ncvariables">
<div class="control-group">
        <label for="p" class="control-label">Intensity of concentrated Load</label>
        <div class="controls" id='pcontrols'>
            <span class="help-block">Sample Input: 2, 2, 3, 1</span>
        </div>
  </div>

  <div class="control-group">
        <label for="ac" class="control-label">Position of concentrated load measured from free end A</label>
        <div class="controls" id='accontrols'>
            <span class="help-block">Sample Input: 0, 1, 2, 4</span>
        </div>
  </div>
  </div>

  <div style="display: none" id="nuvariables">
  <div class="control-group">
        <label for="wu" class="control-label">Intensity of Uniformly Distributed Load</label>
        <div class="controls" id='wucontrols'>
            <span class="help-block">Sample Input: 2</span>
        </div>
  </div>

  <div class="control-group">
      <label for="au" class="control-label">Position of starting point of udl measured form starting point A</label>
      <div class="controls" id='aucontrols'>
      <span class="help-block">Sample Input: 1</span>
      </div>
  </div>

<div class="control-group">
      <label for="lu" class="control-label">Length of UDL</label>
      <div class="controls" id="lucontrols">
        <span class="help-block">Sample Input: 2</span>
      </div>
</div>

</div>


   <div class="control-group">
        <div class="controls">
            <input type="submit" class="btn btn-primary"  name="initialparameter" />
        </div>
  </div>
</form>
</div>
<script type="text/javascript">

    $("#mainform").validate({
        rules:{
            nc: {
                required: true,
                number: true
            },
            nu: {
                required: true,
                number: true
            },
            noseg: {
                required: true,
                number: true,
                range: [1,1]
            },
            spanbeam: {
                required: true,
                number: true
            },


        }
    });
    $("#nc").keyup(function(event) {
        /* Act on the event */

        if (isNaN(this.value))
        {
            this.value = 0;
        }

        if (parseInt(this.value)==0)
        {
            $("#ncvariables").hide();
        }

        //Create inputs accordingn to that
        var pinput= $("<input type='text' name='p' value='0' />");
        var acinput = $("<input type='text' name='ac' value='0' />");


        //remove any previous inputs
        $("#pcontrols").children("input").remove();
        $("#accontrols").children("input").remove();
        for (i=0; i<parseInt(this.value); i++)
        {
            $("<input type='text' id='p' name='p' value='0' />").appendTo('#pcontrols');
        }
        
        for (i=0; i<this.value; i++)
        {
            $("#accontrols").append("<input type='text' name='ac' id='ac' value='0' />");
        }

        $("#ncvariables").show();
    });

    $("#nu").keyup(function(event) {
        /* Act on the event */
        if (isNaN(this.value))
        {
            this.value=0;
        }

        if (parseInt(this.value)==0)
        {
            $("#nuvariables").hide();
        }

        var wuinput = $("<input type='text' name='wu' value='0' />");
        var auinput = $("<input type='text' name='au' value='0' />");
        var luinput = $("<input type='text' name='lu' value='0' />");
        $("#wucontrols").children("input").remove();
        $("#aucontrols").children("input").remove();
        $("#lucontrols").children("input").remove();

        for (i=0; i<this.value; i++)
        {
            $("<input type='text' id='wu' name='wu' value='0' />").appendTo('#wucontrols');
        }
        for (i=0; i<this.value; i++)
        {
          $("<input type='text' id='au' name='au' value='0' />").appendTo('#aucontrols');
        }
        for (i=0; i<this.value; i++)
        {
            $("<input type='text' id='lu' name='lu' value='0' />").appendTo('#lucontrols');
        }

        $("#nuvariables").show();


    });

</script>