Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How do I make my button stay at the bottom of the textbox everytime I press add?

How do I make my button stay at the bottom of the textbox everytime I press the add experience button to add another textbox?

<div class="form-group">
    <p>
        <h6>Work Experiece</h6>
        </p>
        <textarea class="form-control" id="form-control-10"rows="5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc arcu, dignissim sit amet sollicitudin iaculis, vehicula id urna. Sed luctus urna nunc. Donec fermentum, magna sit amet rutrum pretium, turpis dolor molestie diam, ut lacinia diam risus eleifend sapien. Curabitur ac nibh nulla. Maecenas nec augue placerat, viverra tellus non, pulvinar risus.</textarea>
    <div class="col-md-4" id=field_div>
    <input type="button" class="ticker-btn1 add-exp" value="Add Experience" onclick="add_field();">
    </div>
function add_field() {
  var total_text = document.getElementsByClassName("form-control");
  total_text = total_text.length + 1;
  document.getElementById("field_div").innerHTML = document.getElementById("field_div").innerHTML +
  "<textarea class='form-control add-exp add-textbox' rows='5' id='form-control-" + total_text + "'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc arcu, dignissim sit amet sollicitudin iaculis, vehicula id urna. Sed luctus urna nunc. Donec fermentum, magna sit amet rutrum pretium, turpis dolor molestie diam, ut lacinia diam risus eleifend sapien. Curabitur ac nibh nulla. Maecenas nec augue placerat, viverra tellus non, pulvinar risus.</textarea>";
}

Appearance

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

Create a new div section over the existing text area and
add your new text areas inside the new div

Here is the solution

function add_field() {
  var total_text = document.getElementsByClassName("form-control");
  total_text = total_text.length + 1;
  document.getElementById("text_area_section").innerHTML +=
  "<textarea class='form-control add-exp add-textbox' rows='5' id='form-control-" + total_text + "'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc arcu, dignissim sit amet sollicitudin iaculis, vehicula id urna. Sed luctus urna nunc. Donec fermentum, magna sit amet rutrum pretium, turpis dolor molestie diam, ut lacinia diam risus eleifend sapien. Curabitur ac nibh nulla. Maecenas nec augue placerat, viverra tellus non, pulvinar risus.</textarea>";
}
<div class="form-group">
    <p>
       <h6>Work Experiece</h6>
    </p>
    <div id="text_area_section">
        <textarea class="form-control" id="form-control-10"rows="5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc arcu, dignissim sit amet sollicitudin iaculis, vehicula id urna. Sed luctus urna nunc. Donec fermentum, magna sit amet rutrum pretium, turpis dolor molestie diam, ut lacinia diam risus eleifend sapien. Curabitur ac nibh nulla. Maecenas nec augue placerat, viverra tellus non, pulvinar risus.</textarea>
    </div>    
    <div class="col-md-4" id=field_div>
        <input type="button" class="ticker-btn1 add-exp" value="Add Experience" onclick="add_field();"/>
    </div>
</div>

note:- As CSS is not available, it is not applied in this solution. modify your CSS for the perfect view

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading