Add dynamic fields through jQuery in wordpress

<ul class=”skills row0″>
<li><input type=”text” class=”sm-txt” name=”skill” placeholder=”Skill” value=”<?php echo get_option(‘skill’); ?>”/></li>
<li><input type=”text” class=”sm-txt” name=”bgcolor” placeholder=”Color Code” value=”<?php echo get_option(‘bgcolor’); ?>”/></li>
<li><input type=”text” class=”sm-txt” name=”percentage” placeholder=”Percentage” value=”<?php echo get_option(‘percentage’); ?>”/></li>
<li>&nbsp;</li>
</ul>
<div class=”add”>
<span><img class=”add-more” src=”<?php echo get_template_directory_uri();?>/images/admin/add.png” />
<input type=”hidden” name=”current”  id=”current” value=”0″/>
</span>
</div>

 

 

//add and remove slill
jQuery(‘.add-more’).click(function(){
var cid = jQuery(‘#current’).val();
var nextId = parseInt(cid)+1;
jQuery(this).before(‘<ul class=”skills row’+nextId+'”><li><input type=”text” class=”sm-txt” name=”skill[]” placeholder=”Skill” value=””/></li><li><input type=”text” class=”sm-txt” name=”bgcolor[]” placeholder=”Color Code” value=””/></li><li><input type=”text” class=”sm-txt” name=”percentage[]” placeholder=”Percentage” value=””/></li><li><span><img id=”‘+nextId+'” class=”remove” src=”<?php echo get_template_directory_uri();?>/images/admin/ico-delete.png” /></span></li></ul>’);
jQuery(‘#current’).val(nextId);
});

jQuery(document).on(‘click’,’.remove’,function(){
var $ID = jQuery(this).attr(‘id’);
$(“.row”+$ID).remove();
});

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s