0

I am trying to create a form that allows a user to enter a series of emails by dynamically adding a new text field. I have followed this implementation of here which works well.: https://stackoverflow.com/questions/34748659/dynamically-add-and-remove-textboxes-and-get-value-of-dynamic-textbox-using-jque

The one change i made which suddenly make the "remove" button not work is adding a label between the input fields as below:

jQuery(document).ready( function () {

        $("#append").click( function(e) {
          e.preventDefault();
          
          
          var urlParams = new URLSearchParams(window.location.search);
          var domain = urlParams.get('domain');
          //console.log(domain);
         
         // document.getElementById('domain').innerHTML = domain;
          
        $(".inc").append(`<div class="controls">\
                <input class="form-control" type="text" id="email" name="email" placeholder="email">\
                <labe>@</label>\
                <input class="form-control" type="text" id="domain" name="domain" disabled="disabled" value="${domain}">\
                <a href="#" class="remove_this btn btn-danger">remove</a>\
                <br>\
                <br>\
                <br>\
            </div>`
           
            );
        return false;
        });

    jQuery(document).on('click', '.remove_this', function() {
        jQuery(this).parent().remove();
        return false;
        });
    $("input[type=submit]").click(function(e) {
      e.preventDefault();
      $(this).next("[name=textbox]")
      .val(
        $.map($(".inc :text"), function(el) {
          return el.value
        }).join(",\n")
      )
    })
    
    
  });
  

The problem is the "remove" button now only removes :

<labe>@</label>\
                <input class="form-control" type="text" id="domain" name="domain" disabled="disabled" value="${domain}">\

while leaving the first text box:

<input class="form-control" type="text" id="email" name="email" placeholder="email">\
3
  • For sanity sake, I would convert id="email" and id="domain" into classes, since you can't reuse the same ID, which will happen once you add more than one input. This isn't the problem, but just a note to learn about Commented Aug 5, 2020 at 19:33
  • It is a typo: <labe> should be <label> Commented Aug 5, 2020 at 19:36
  • LOL cant believe i cracked my head for hours - yup that is the issue, while at it, might as well mention that adding a label misaligns the text fields - no longer on the same horizontal line but vertical and not one on top of the but at an angle Commented Aug 5, 2020 at 19:53

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.