doumo1807831
doumo1807831
2014-10-03 13:29

从表单动态添加和删除PHP表单字段(Jquery)

  • php
  • html
  • dynamic
  • jquery

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

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

1条回答