Create new input file field on the fly at client side using jquery at cakephp


Html code of input field

<div>
<div style=”float: left;width:160px”>
<label for=”ExhibitorMaterials”><span>Additional Materials/Files : </span></label>
</div>
<div style=”float: left”>
<?php echo $this->Form->input(”, array(‘name’ => ‘data[Exhibitor][materials][]’, ‘label’ => ”, ‘type’ => ‘file’)); ?>
<div id=”newMaterialsHolder”></div>
<a id=”add_New_Materials” title=”Add another file” href=”javascript:void(0)”><span>Add Another File</span></a>
</div>
</div>

Related jQuery Code to implement this

<script type=”text/javascript”>
jQuery(document).ready(function(){
var i = 1;
var template = ‘<?php echo $this->Form->input(”, array(‘name’ => ‘data[Exhibitor][materials][]’, ‘label’ => false, ‘type’ => ‘file’)); ?>’;
template += ‘<a href=”javascript:void(0)”><span style=”color:red”>Close</span></a>’;
template = ‘<div>’+template+'</div>’;
jQuery(‘#add_New_Materials’).click(function(){
var tpl = jQuery(template).find(‘input[type=file]’).attr(‘id’, ‘in’+i).end();
jQuery(‘#newMaterialsHolder’).append(tpl);
tpl.find(‘a’).click(function(){
jQuery(tpl).remove();
});
i++;
});
});
</script>

 

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