Friday 29 July 2011

Jquery add another form field

First we need div to clone with remove link:

<div id="floorForClone" style="display: none;">
<div id="floor-plan">
<input type="hidden" name="floor_plan_id[]" value="{$id}" />
<div id="floor-plan-info" class="fleft" style="width: 140px;">
<div class="fleft mt5 w100p ">
<label for="floor_plan_name">Name</label>
<div class="fleft pfid373">
<input id="floor_plan_name" name="floor_plan_name[]" value='{$floor_plan.floor_plan_name}' class="category-profile-form-textbox text" type="text" />
</div>
</div>
</div>
<div id="floor-plan-info" class="fleft" style="width: 110px;">
<div class="fleft mt5 w100p ">
<label for="floor_bedrooms">Bedrooms</label>

<div class="fleft pfid374">
<select name="floor_bedrooms[]">
<option label="1" value="179">Select</option>
<option label="1" value="273">1</option>
<option label="2" value="274">2</option>
</select>

</div>
</div>
</div>
<a onclick="removeAdditionalFloor(jQuery(this)); return false;" href="" class="add">Remove</a>
</div>


Then there are script functions to add remove fields:

function addAdditionalFloor(lnk) {
lnk.before('<div id="floor-plan">' + jQuery('#floorForClone').html() + '</div>');
return false;
}
function removeAdditionalFloor(lnk) {
lnk.closest("#floor-plan").remove();;
return false;
}


And last add the add another link where do we need it:

<a onclick="addAdditionalFloor(jQuery(this)); return false;" href="" class="add">Add floor plan</a>