CODEWITHSUNDEEP
javascriptformstwitter-bootstraptwitter-bootstrap-3
Ramen
Ramen

Reputation: 17

Adding row on click in bootstrap form

My code is working fine but the label is not in right position. On click first label is not in right position but others are in right position.

Where am I doing wrong?

<input type="button" id="more_fields" onclick="add_fields();" value="Add More" />
<form>
    <div class="form-group">
        <label class="col-lg-3 control-label">Field:1</label>
        <div class="col-lg-5">
            <input type="text" class="form-control" name="field1" />
        </div>
    </div>
    <script type="text/javascript">
    var info = 1;
    function add_fields() {
        info++;
        var objTo = document.getElementsByClassName('form-group')[0]
        var divtest = document.createElement("div");
        divtest.innerHTML = '<div class="form-group"><label class="col-lg-3     
        control-label">Field'+info+'</label><div class="col-lg-5"> <input   
        type="text" class="form-control" name="field1" /></div></div>';
        objTo.appendChild(divtest)
    }
    </script>
    <div class="form-group">
        <div class="col-lg-9 col-lg-offset-3">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

Upvotes: 0

Views: 2719

Answers (2)

Ram
Ram

Reputation: 117

The problem is with your bootsrap column.

<form>

  <div class="form-group ">
   <label class="col-lg-3 control-label">Field:1</label>
    <div class="col-lg-9">
     <input type="text" class="form-control" name="field1" />
   </div>
  </div>
 <div class="form-group">
   <div class="col-lg-9 col-lg-offset-3">
   <button type="submit" class="btn btn-primary">Submit</button>
  </div>
  </div>  


    <script type="text/javascript">
         var info = 1;
    function add_fields() {
    info++;
    var objTo = document.getElementsByClassName('form-group')[0]
    console.log(objTo);

       var divtest = document.createElement("div");
     divtest.innerHTML = '<div class="form-group"><label class="col-lg-3 control-label">Field'+info+'</label><div class="col-lg-9"> <input type="text"         class="form-control" name="field1" /></div></div>';

     objTo.appendChild(divtest)
     }

you can take it as a reference. Hope it helps.

Upvotes: 0

apscience
apscience

Reputation: 7253

The row is being appended to the wrong place. Try:

<div id="additionalFields"></div>

where you want the new fields to be, and then changing 

var objTo = document.getElementsByClassName('form-group')[0]

to

var objTo = document.getElementById('additionalFields');

This should correct the alignment.

Upvotes: 1

Related Questions