3 minutes reading time (551 words)

Clone html element using jquery

Hello!

Guys, This blog is about adding multiple html elements using jQuery and display the cloned field. If you are a developer, you might be interested in this. Hope this Helps! :)

So this is Quick guide to create multiple fields as many as with in minimum efforts

Lets' code! Step by step :

A. Add jQuery file from Google API and add required styling-

<html>
  <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
      <style>
           .qtc_att_hide {display: none;}
      </style>
  </head>
 

B: Lets create template HTML code which you have to create for N times. -

Lets say template html is for text box field and you have to add for N time. Each time while adding the new field via. javascript, we are using this template code to generate the new field. As this is the template will not be shown to user, so we can hide it with the help of class styling qtc_att_hide.

<!--Create one div and hide it. It will act as template for cloning-->
<div id=<?php echo $attribute_container_id ?> class="qtc_container qtc_att_hide" style="" >
	<div class="com_qtc_repeating_block well well-small span10">
		<label class="" ><strong>Add Extra Attribute </strong></label>
		
                 <!-- Lets take a take a text box field to clone -->
		<input id="atrri_name0" name="atrri_name0" class="input-medium attriFieldClass" type="text" value="" maxlength="250" size="32">
	</div>
	<!-- required -->
	<div></div>
</div>

 

C: Display saved fields and add one more extra fields -

Following code sample displays already saved fields details along with delete button. Also adds one more extra field with blank details so that user can add one more field easily.

<?php
// $allAttribues contains previously stored field details
$i=1;
$count = !empty($allAttribues)?count($allAttribues):1;

// For each attribute and one extra field
for ($i = 1;$i <= $count;$i++)
{
	$attribute_container_id = "qtc_container".$i;
?>
	<div id=<?php echo $attribute_container_id ?> class="qtc_container">

		<div class="com_qtc_repeating_block well well-small span10">
			<label class="" ><strong>Add Extra Attribute </strong></label>
			<input id="atrri_name<?php echo $i; ?>" name="atrri_name<?php echo $i; ?>" class="input-medium attriFieldClass" type="text" value="<?php echo (isset($allAttribues[$i]->itemattribute_name))?$allAttribues[$i]->itemattribute_name:''; ?>" maxlength="250" size="32">
		</div>

		<!-- Here is remove button for each field -->
		<div class='com_qtc_remove_button pull-left span1'>
			<button class='btn btn-mini' type='button' id='remove<?php echo $i;?>'
				onclick="removeClone('qtc_container<?php echo $i;?>','qtc_container');"                                               title="Remove Field" >
				<i class="icon-minus-2 "></i>
			</button>
		</div>
		<!-- required -->
		<div></div>
	</div>
<?php
}
?>  

This will look like

b2ap3_thumbnail_AddTemplate_20140613-130026_1.png

D: Add "+" button for add more field functionality

<div class="com_qtc_add_button pull-left  span1">
	<button class="btn btn-mini " type="button" id='add' onclick="addClone('qtc_container','qtc_container');"             title="Add New Field">
		<i class="icon-plus-2 "></i>
	</button>
</div>

 

E: Finally following JavaScript code will be executed on add more and delete button.

<script type="text/javascript">

	// globle params
	var attribute_current_id = <?php echo $count; ?>;
	/**
	F: Finally add more fields using javascript.

	Following function makes a copy of template HTML and appends to the existing fields with the help of function parameters.
	*/
	function addClone(rId,rClass)
	{
		// CURRENT ATRIBURE ID -- global declaration
		attribute_current_id++;
		var num=attribute_current_id;

		// Make a clone from template div
		var newElem=jQuery('#'+rId+'0').clone().attr('id',rId+num);

		// Remove hidden styling
		newElem.removeClass('qtc_att_hide');

		// Add clone element at the end of other div
		jQuery('.'+rClass+':last').after(newElem);

		// CREATE REMOVE BUTTON
		var removeButton="<div class='com_qtc_remove_button pull-left span1'>";
		removeButton+="<button class='btn btn-mini' type='button' id='remove"+num+"'";
		removeButton+="onclick=\"removeClone('"+rId+num+"','"+rClass+"');\"  title=\"Remove Field\">";
		removeButton+="<i class=\"icon-minus-2\"></i></button>";
		removeButton+="</div>";

		jQuery('#'+rId+num).children().last().replaceWith(removeButton);

		var newelementid=	rId+num;
		var option=0;

		/*1. CHANGE ATTUBURE NAME */
		var newname='arri_name'+num;
		var ck=newElem.find('.attriFieldClass').attr({'name': newname,'id':newname});
	}

	/** G:This function remove the specified div */
	function removeClone(rId,rClass)
	{
		jQuery('#'+rId).remove();
	}
</script>

After cloning, fields will look as follow.

b2ap3_thumbnail_AfterAddingMultipalFields.png

Follow the link to download this example CloningExample_20140613-125955_1.zip

 

4
5+2 Reasons to Buy JomSocial Essentials Pack
Sorting Nested List using jQuery