How Can I get same div repeatedly as many I want once I click on plus button?

Question

I am using php to develop my website. I have a <div> which contains multiple input fields. Now My question is how can I repeat the same <div> multiple repeatedly once I go on clicking on plus button.

<div id='testdiv' class='testclass'>
    <form name="myForm" method="post" action="#" onsubmit="return validateForm();" autocomplete="off" enctype="multipart/form-data">
            <input class="btn btn-success col-sm-1" type="submit" name="submit"  id="submit" value="Save"/>
            <div>
                <h3 style="color:#1E90FF;"><center><b>My name</b></center></h3><br/>
                <div class="col-sm-7">
                    <div class="col-sm-2">
                        <label id="test_lable" for="">my address:</label>
                    </div>
                    <div class="col-sm-6">
                        <input  class="form-control input-sm" type="text" name="testname" id="testname" required /><br/>
                    </div>
                </div>
                <div class="col-sm-7">
                    <div class="col-sm-2">
                        <label><b>place</b></label>
                    </div>
                </div>
                <div class="col-sm-7">
                    <div class="col-sm-2">
                        <label><b>user Type</b></label>
                    </div>
                </div>
                    <div ng-controller="AppCtrl" ng-cloak="" class="col-sm-7" ng-app="MyApp" style= "background-color: white">
                    <div class="col-sm-2" style="padding:29px;">
                            <label><b>Instance/s</b></label>
                    </div>
                    <div class="col-sm-6">
                        <md-content style="padding:10px; background-color: white">
                        <md-slider-container>
                              </md-slider>
                              <md-input-container>
                              </md-input-container>
                            </md-slider-container>
                         </md-content>
                    </div>

                        <div class="col-sm-7">
                            <div class="row">
                                <div class="col-xs-8 col-xs-offset-2 well">
                                    <legend>Select File to Upload:</legend>
                                    <div class="form-group">
                                        <input type="file" name="file1" />
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
                </div>
            </div>
        </form>
        </div>

You can find your answer here 'https://stackoverflow.com/questions/17650776/add-remove-html-inside-div-using-javascript' — Rnayak, Jul 24 '18 at 04:44

melvin · Answer 1 · 2018-07-24T05:00:28.860

0

You have to clone the entire div using .clone() in jquery. And then on button click you have to append it to the place where you want it.

Check this fiddle.

Or If you have a predefined code that is to be repeated on button click then you can do the following.

In php

function get_repeat_html(){
  ?>
  <div id="get_repeat_html" style="display:none;">
      <div class="box" id="101">
        <input type="text" value="text">
        <p>Sample text</p>
      </div>
  </div>
  >?php
}

In js

$('.btn').click(function(){
    var html = $('#get_repeat_html').html();
    $('#target').append(html);
});

edited Jul 24 '18 at 05:00

answered Jul 24 '18 at 04:42

melvin

2,571
1
14
37

As I am new to this, Can you please give a sample code – Honnavar Deepak Jul 24 '18 at 04:43
sure @HonnavarDeepak – melvin Jul 24 '18 at 04:45
I am trying it. – Honnavar Deepak Jul 24 '18 at 05:53

score 0 · Answer 2 · answered Jul 24 '18 at 04:54

below div will repeat based on your clicks

HTML

 <div class="input_fields_wrap">
        <button class="add_field_button">Add More Fields</button>
        <div><input type="text" name="mytext[]"></div>
    </div>

Jquery

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

here jsfiddle

How Can I get same div repeatedly as many I want once I click on plus button?

2 Answers2