1

I have a page that has multiple forms that i need to use the same JavaScript code on. The JavaScript code adds more input fields to the form. The script works fine but adds input fields to all forms. I need it to only add fields to the current form being filled out. So far I haven't had any luck.

Here is what one of the forms looks like:

<form>
<div class="price-group">
  <div class="price-fields">
  <label>Multiple <a class="add-field" href="#"> Add Field</a></label>
    <br><input  maxlength="7" type="text" name="prices[]" />
  </div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>

Here is my JavaScript:

$(document).ready(function($){
     $('.price-group .add-field').click(function(e){
          e.preventDefault();
          var n = $('.price-fields').length;
          $('.price-group').append('<div class=" price-fields"><input  maxlength="7" type="text" name="prices[]"  /><a class="remove-field pull-right" href="#">Remove</a></div><!--end form-group-->');
     });
     $('.price-group').on('click', '.remove-field', function(){
          $(this).parent().fadeOut("slow", function() {
              $(this).remove();
          });
          return false;
     });
});

I set up jsfiddle: JsFiddle Link

Improve this question

4 Answers 4

Reset to default
2

You can use jQuery closest to find the closest .price-fields to the clicked <a> tag:

$(document).ready(function($){
     $('.price-group .add-field').click(function(e){
          e.preventDefault();
          var n = $('.price-fields').length;
          $(this).closest('.price-group').append('<div class=" price-fields"><input  maxlength="7" type="text" name="prices[]"  /><a class="remove-field pull-right" href="#">Remove</a></div><!--end form-group-->');
     });
     $('.price-group').on('click', '.remove-field', function(){
          $(this).parent().fadeOut("slow", function() {
              $(this).remove();
          });
          return false;
     });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="price-group">
  <div class="price-fields">
  <label>Multiple <a class="add-field" href="#"> Add Field</a></label>
    <br><input  maxlength="7" type="text" name="prices[]" />
  </div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>

<form>
<div class="price-group">
  <div class="price-fields">
  <label>Multiple <a class="add-field" href="#"> Add Field</a></label>
    <br><input  maxlength="7" type="text" name="prices[]" />
  </div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>

<form>
<div class="price-group">
  <div class="price-fields">
  <label>Multiple <a class="add-field" href="#"> Add Field</a></label>
    <br><input  maxlength="7" type="text" name="prices[]" />
  </div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>

Working fiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Exactly what I was looking for, thanks! I was trying to use 'parent' in place of 'closest' and it just wasn't working for me. I appreciate the help.
0

Use the outer container to insulate instances. First traverse up to container...then use find() to only look inside that instance

$('.price-group .add-field').click(function(e) {
  e.preventDefault();
  var $container = $(this).closest('.price-group');
  var n = $container.find('.price-fields').length;
  $container.append('<div class=" price-fields"><input  maxlength="7" type="text" name="prices[]"  /><a class="remove-field pull-right" href="#">Remove</a></div><!--end form-group-->');
});
Improve this answer

Comments

0

Give an Id to the desired input field or the div it is contained in. Then you can do : $('some_id').on('click', '.some-class', function()

Improve this answer

Comments

0

This work for you in less edit code 

 $(document).ready(function($){
         $('.price-group').on('click', '.add-field', function(e){
              e.preventDefault();
              var n = $('.price-fields').length;
              $(this.parentNode.parentNode).append('<div class=" price-fields"><input  maxlength="7" type="text" name="prices[]"  /><a class="remove-field pull-right" href="#">Remove</a></div><!--end form-group-->');
         });
         $('.price-group').on('click', '.remove-field', function(){
              $(this).parent().fadeOut("slow", function() {
                  $(this).remove();
              });
              return false;
         });
    });
Improve this answer

2 Comments

this is the add-field button. Not where OP wants to append
yes, sorry. this work -> this.parentNode.parentNode (in this case-code only)

Your Answer

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