Add/Replicate div via onclick in JS

JavaScript
1

I’m trying to create a simple onclink event from a button that will create another html div with a form inside it.

The html I need copied is below;

            <div class="row">
                <legend>Select Lessons</legend><!--TITLE-->
                <div class="col-xs-8 col-sm-6">
                <form class="form-horizontal">
                <fieldset>
                <!-- Select Basic -->
                <div class="form-group">
                  <label class="col-md-4 control-label" for="DATE">Select days*</label>
                  <div class="col-md-4">
                    <select id="DATE" name="DATE" class="form-control">
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                      <option value="6">6</option>
                      <option value="7">7</option>
                      <option value="8">8</option>
                      <option value="9">9</option>
                      <option value="10">10</option>
                      <option value="11">11</option>
                      <option value="12">12</option>
                      <option value="13">13</option>
                      <option value="14">14</option>
                      <option value="15">15</option>
                      <option value="16">16</option>
                      <option value="17">17</option>
                      <option value="18">18</option>
                      <option value="19">19</option>
                      <option value="20">20</option>
                      <option value="21">21</option>
                      <option value="22">22</option>
                      <option value="23">23</option>
                      <option value="24">24</option>
                      <option value="25">25</option>
                      <option value="26">26</option>
                      <option value="27">27</option>
                      <option value="28">28</option>
                      <option value="29">29</option>
                      <option value="30">30</option>
                      <option value="31">31</option>
                    </select>
                  </div>
                </div>

                <!-- File Button --> 
                <div class="form-group">
                  <label class="col-md-4 control-label" for="uploadbutton">Upload video</label>
                  <div class="col-md-4">
                    <input id="uploadbutton" name="uploadbutton" class="input-file" type="file">
                  </div>
                </div>

                <!-- Text input-->
                <div class="form-group">
                  <label class="col-md-4 control-label" for="title">Add title</label>  
                  <div class="col-md-8">
                  <input id="title" name="title" type="text" placeholder="enter here" class="form-control input-md" required="">

                  </div>
                </div>

                <!-- Button (Double) -->
                <div class="form-group">
                  <label class="col-md-4 control-label" for="button1id">Options</label>
                  <div class="col-md-8">
                    <button id="button1id" name="button1id" class="btn btn-primary" onclick="myFunction()">Add</button>
                    <button id="button2id" name="button2id" class="btn btn-danger">Delete</button>
                      
                    <script>
                        function myFunction() {
                        var btn = document.createElement("BUTTON");
                        
                        btn.appendChild(t);
                        document.body.appendChild(btn);
                        }
                    </script>
                      
                  </div>
                </div>
                </fieldset>
                </form>
                </div>
            </div>

What would be the best function (also is there a way to limit how many new divs could be created)?

Have tried this method to no avail - https://jsfiddle.net/#&togetherjs=JzJqaJ9kV1

2

It looks like t is not defined… also, a button element is not the ideal container for a form. Anyway, do you just want to append a copy of that form? This could be done like

function applyCloneButton (form) {

  // The "add" button of the current form
  const button = form.querySelector('.add-form')

  // Add a click listener...
  button.addEventListener('click', event => {

    // Create a deep clone of the form
    // (i.e. including its children)
    const newForm = form.cloneNode(true)

    // Prevent submitting the form
    event.preventDefault()

    // Apply the click listener to the new form
    // as well
    applyCloneButton(newForm)

    // Disable the button -- for further forms, the 
    // "add" button of the new form has to be used
    button.disabled = true

    // Insert the new form after the current form
    form.parentNode.insertBefore(newForm, null)
  }, { once: true })
}

const defaultForm = document.querySelector('form')
applyCloneButton(defaultForm)

Note that you should remove all IDs from the form then, as these wouldn’t be unique any more (I used an add-form class for the “add” button). To associate labels with the inputs, you can simply wrap the inputs inside the labels, like e.g.

<label>
  Label text
  <input type="text" name="foo">
</label>

Otherwise, you’d have to walk the form and adjust the IDs before appending it to the DOM.

Edit: Ah, just read that you want the form to be inside a div (in the very title of the topic… ahhhh!). ^^ You could just call the above applyCloneButton() function with the containing div element then.

1 Like
3

Will test - https://jsfiddle.net/stevanbarry/8jkwyLe6/ thanks for your time.

4

Okay have updated my example which works - thanks. Only issue is that the div remains even after delete

5

It looks like you’re just .emtpy()ing that div… you might want to actually .remove() it.

1 Like
6

Of course! Sorry being a numpty. If I wanted to keep at least one div (the first one and not allow it to be deleted - could this be done using event.preventDefault()?

7

No, this just prevents default actions such as submitting a form, or following a link. If you want to keep one div, then just don’t remove it – for example by guarding the removal with $('.section').length check.

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.