Dynamically Add and Remove PHP Form fields from form (Jquery)

Question

I'm having some issues with the code that i wrote up to add and remove fields to a form. I currently have a jquery script that is working on another group of fields that require the same functionality, but for some reason this second Jquery i have set up is only adding the fields and not removing them here is the code.

HTML:

                <label for="EmergeContactType">Emergency Contacts</label>
      <hr>
    <div class="addcon">
        <p>
        <label for="EmergeContactType">Affilation</label>
          <select name="properties[EmergContactType]">
                    <option value="1">Primary</option>
                    <option value="2">Secondary</option>
                    <option value="3">Doctor</option>
                    <option value="4">Aunt</option>
                    <option value="5">Uncle</option>
                    <option value="1">Babysitter</option>
                    <option value="2">Caregiver</option>
                    <option value="3">Grandmother</option>
                    <option value="4">Grandfather</option>
                    <option value="5">Step-mother</option>
                    <option value="5">Step-father</option>
                  </select><br>   
    <label for="EmergeContactType">Name</label><br>
    <input type="text" size="20" class="emerg" name="properties[EmergencyName]" align="right"  /><br>

  <label for="EmergeContactType">Number</label><br>
  <input type="text" width="15" maxlength="15" class="emerg" name="properties[EmergContactNum]" pattern="[789][0-9]{9}" align="right"/><br>
</p>
    </div>

      <a href="#" class="addContact">Add Contact</a>

Script:

        $(function() {
var plusDiv = $('#addcon');
var y = $('#addcon p').size() + 1;


$('#addContact').on('click', function() {
$('<p>'+   
            '<label for="EmergeContactType">Affilation</label>'+
              '<select name="properties[EmergContactType'+ y +']">'+
                        '<option value="1">Primary</option>'+
                        '<option value="2">Secondary</option>'+
                        '<option value="3">Doctor</option>'+
                        '<option value="4">Aunt</option>'+
                        '<option value="5">Uncle</option>'+
                        '<option value="1">Babysitter</option>'+
                        '<option value="2">Caregiver</option>'+
                        '<option value="3">Grandmother</option>'+
                        '<option value="4">Grandfather</option>'+
                        '<option value="5">Step-mother</option>'+
                        '<option value="5">Step-father</option>'+
                      '</select><br>'+  
   '<label for="EmergeContactType">Name</label><br>'+  
        '<input type="text" id="EmergencyName" class="textbox" name="properties[EmergencyName'+ y +']" /><br>'+
 '<label for="EmergeContactType">Number</label><br>'+
      '<input type="text" id="EmergContactNum" class="textbox" name="properties[EmergContactNum'+ y +']" /><br>'+
           '<a href="#" class="remCon">Remove Contact</a></p>').appendTo(plusDiv);
y++;

return false;
});

plusDiv.on('click', '.remCon', function() { 
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        y--;
}
return false;
});
});

JFiddle

http://jsfiddle.net/4SVXt/23/

Thanks in advance

Sorry here is te correct link jsfiddle.net/propermike/1vp04r2b — user3225090
– user3225090, Commented Oct 3, 2014 at 13:49

Jay Blanchard · Accepted Answer · 2014-10-03 14:33:14Z

1

It's because you're calling to remove the parent p of #addcon. You don't have an element with that id, hence no parent p so nothing gets removed in this statement: $(this).parents('p').remove();

EDIT : UPDATED EXAMPLE I felt like your code was a little heavy so I made some changes that should make this more efficient. Instead of rewriting the form in the code we just clone() it, then append the form to the div containing the forms. We then assign a remove button to each form that will remove its own form. The code is shorter and much more portable.

$('.addContact').click(function(e) {
    e.preventDefault();
    var clonedForm = $('form[name="add_contact"]:first').clone(); // clone the form
    $('.addcon').append(clonedForm); // append the form to the div
    var removeLink = '<a href="#" class="removeContact">Remove Contact</a>'; // create a remove link
    $('form[name="add_contact"]:last').append(removeLink);
});
$('.addcon').on('click', '.removeContact', function(e) { // use on() to delegate
    e.preventDefault();
    $(this).closest('form').remove();
});

References:clone() append() on()

edited Oct 3, 2014 at 14:33

answered Oct 3, 2014 at 13:36

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

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

6 Comments

user3225090 Over a year ago

Thanks for your quick response. So would changing the <div class="addcon"> to <div id="addcon"> be the correct way of resolving this?

Jay Blanchard Over a year ago

No - whether it is an id or class doesn't matter at this point because there is no parent p. I am working on modifying your code.

Jay Blanchard Over a year ago

Updated my answer @user3225090. Let me know if you have any questions.

user3225090 Over a year ago

This looks good, I agree with you that the code was a bit heavy. One thing that i am concerned with is that these fields are just a part of more form fields that also get submitted. From reading your code I see that it will replicate the form but I am only looking to create more contact fields and not the whole form.

Jay Blanchard Over a year ago

It would just be a matter of selecting / cloning the right elements. BTW, if this answer works for you please accept it.

|

Collectives™ on Stack Overflow

Dynamically Add and Remove PHP Form fields from form (Jquery)

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related