I cloned my fieldset and it works perfect. I clear all fields value perfectly. The only issue I'm having is the rules follow if submit had been hit before adding the new fieldset and no if you haven't hit on submit. What I really want is to be able to either remove all the rules and set it up again or keep the rules in a way they work properly. I tried to remove the rules and it didn't work (). I tried adding new rules, it works but I have 1 more rule for each field every time I add a section. Note that my IDs and Names changed every time I add a new fieldset.
Here is my html @Sparky:
<!------ Fiedlset company information starts here ------>
<fieldset class="clonableId" id="location1">
<table>
<tr class="align_error">
<td>
<p><label id="lblOwner1" for="propertyOwner1" class="required" >Property Owner</label></p>
</td>
<td>
<p><input type="text" name="propertyOwner1" id="propertyOwner1" /></p>
</td>
</tr>
</table>
<p><label><strong>Excavation Address (Rural Areas Province DIrections)</strong></label></p>
<table>
<tr class="align_error">
<td>
<p><label id="lblexcavAddress1" for="excavAddress1" class="required" >Address</label> </p>
</td>
<td>
<p><input class="address" type="text" name="excavAddress1" id="excavAddress1" /></p>
</td>
<td>
<p><label id="lblexcavCity1" for="excavCity1" class="required" >City</label></p>
</td>
<td>
<p><input type="text" name="excavCity1" id="excavCity1" /></p>
</td>
<td><p><label id="lblexcavProv1" for="excavProv1" class="required" >Province</label></p>
</td>
<td><p>
<select id="excavProv1" name="excavProv1" >
<option></option>
<option>AB</option>
<option>BC</option>
<option>MB</option>
<option>NB</option>
<option>NF</option>
<option>NW</option>
<option>NS</option>
<option>NU</option>
<option>ON</option>
<option>PE</option>
<option>QU</option>
<option>SK</option>
<option>YK</option>
</select>
</p></td>
<td><p><label id="lblzipCode1" for="excavPostCod1" class="required" >Postal Code</label></p></td>
<td>
<p><input type="text" name="excavPostCod1" id="excavPostCod1" class="lilfield55" onchange="postCod()" /></p>
</td>
</tr>
</table>
</fieldset>
<div id="newLoc">
<input type="button" id="addSection" value="Add new Location"> <input type="button" id="btnDel" value="remove Location above">
</div>
<div>
<input class="buttons" type="button" value="Print" onClick="window.print()" /><input id="submit_btn" class="buttons" type="submit" value="Submit" />
</div>
<div>
<button class="remove-rule">remove rule</button>
</div>
<!------ Fieldset Hearing conservation program ends here ------>
</form>
Check my Jquery out and any help will be appreciated:
$(document).ready(function(){
$("#excavationform").validate({
rules:
{
compName: {
required: true
},
compCity: {
required: true,
},
compAddress: {
required: true
},
compPROV: {
required: true
},
compPostCod:{
required:true
}
},
messages: {
compName: "Enter the company name.",
compAddress: "Enter the company's address",
compCity: "Enter the company city",
compPROV: "Enter the company province",
compPostCod:{
postalcode: "Enter a valid postal code in the format A1A 1A1 (including the space).",
required: "A valid postal code is required"
}
}
});
nameFields("#compName");
nameFields("#compAddress");
nameFields("#compCity");
filterInvalidHHTPPostChar("#compAddress");
filterInvalidHHTPPostChar("#compPostCod");
makeCaps("#compPostCod");
//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
});
$(function () {
$("form").on("click","#addSection",function (e) {
e.preventDefault();
var num = $('.clonableId').length, // how many "duplicatable" input fields we currently have
newNum = new Number(num + 1), // the numeric ID of the new input field being added
newElem = $('#location' + num).clone(true).attr('id', 'location' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value
// manipulate the name/id values of the input inside the new element
// Property Owner - Input
newElem.find('#lblOwner' + num).attr('id', 'lblOwner'+ newNum).attr('for', 'propertyOwner'+ newNum);
newElem.find('#propertyOwner' + num).attr('id', 'propertyOwner'+ newNum).attr('name', 'propertyOwner'+ newNum).val('');
// Excavation Address - Input
newElem.find('#lblexcavAddress' + num).attr('id', 'lblexcavAddress' + newNum).attr('for', 'excavAddress' + newNum);
newElem.find('#excavAddress' + num).attr('id', 'excavAddress' + newNum).attr('name', 'excavAddress' + newNum).val('');
// Excavation City - Input
newElem.find('#lblexcavCity' + num).attr('id', 'lblexcavCity' + newNum).attr('for', 'excavCity' + newNum);
newElem.find('#excavCity' + num).attr('id', 'excavCity' + newNum).attr('name', 'excavCity' + newNum).val('');
// Excavation Province - Input
newElem.find('#lblexcavProv' + num).attr('id', 'lblexcavProv' + newNum).attr('for', 'excavProv' + newNum);
newElem.find('#excavProv' + num).attr('id', 'excavProv' + newNum).attr('name', 'excavProv' + newNum).val('');
// Excavation Postal Code - Input
newElem.find('#lblzipCode' + num).attr('id', 'lblzipCode' + newNum).attr('for', 'excavPostCod' + newNum);
newElem.find('#excavPostCod' + num).attr('id', 'excavPostCod' + newNum).attr('name', 'excavPostCod' + newNum).val('');
// insert the new element after the last "duplicatable" input field
$('#location' + num).after(newElem);
// Allow the datepicker: we delete it first then we re-create it
$('#location' + newNum).on('focus','.dateChooser', function(){
$(this).removeClass('hasDatepicker').datepicker();
});
// focus on the first input of the new section
$('#propertyOwner' + newNum).focus();
///////////////////////////////////////////////////////Add rules
//////////////////////////////////////////////////Control on the new section
nameFields("#propertyOwner" + newNum);
nameFields("#excavAddress" + newNum);
nameFields("#excavCity" + newNum);
numberFields("#MBrfNumber" + newNum);
nameFields("#supervisorName" + newNum);
fieldLength("#propertyOwner" + newNum, 70);
fieldLength("#excavAddress" + newNum, 70);
fieldLength("#excavCity" + newNum, 35);
fieldLength("#excavPostCod" + newNum, 7);
fieldLength("#startDate" + newNum, 10);
fieldLength("#endDate" + newNum, 10);
fieldLength("#MBrfNumber" + newNum, 10);
fieldLength("#supervisorName" + newNum , 70);
/////////////////////////////////////////Dates
// enable the "remove" button
$('#btnDel').attr('disabled', false);
});
$('#btnDel').click(function () {
// confirmation
if (confirm("Are you sure you wish to remove this section? This cannot be undone."))
{
var num = $('.clonableId').length;
// how many "duplicatable" input fields we currently have
$('#location' + num).slideUp('slow', function () {$(this).remove();
// if only one element remains, disable the "remove" button
if (num -1 === 1)
$('#btnDel').attr('disabled', true);
// enable the "add" button
$('#addSection').attr('disabled', false).prop('value', "add section");});
}
return false;
// remove the last element
// enable the "add" button
$('#addSection').attr('disabled', false);
});
});