I'm trying to clone a form according to the numeric value from the select option. Here is the fiddle:
Html code:
<div class="travel_tour-info">
<h3>How many people are you booking for?
<select name="travellers" id="travellers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</h3>
</div>
<div class="col-md-7 well" id="passanger">
<span id="person-1"><h5>Passenger 1 Lead traveller</h5></span>
<div class="form-group">
<label for="title" class="control-label col-sm-3 required">Title</label>
<div class="col-sm-8">
<select name="title" id="title" class="form-control">
<option value="Mr.">Mr</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
<option value="Miss">Miss</option>
</select>
</div>
</div>
<div class="form-group">
<label for="name" class="control-label col-sm-3 required">First name</label>
<div class="col-sm-8">
<input type="text" name="f_name" class="form-control" id="fname-1" placeholder="Enter name">
</div>
</div>
<div class="form-group">
<label for="address" class="control-label col-sm-3">Middle name</label>
<div class="col-sm-8">
<input type="text" name="m_name" class="form-control" id="mname-1" placeholder="Enter address">
</div>
</div>
<div class="form-group">
<label for="name" class="control-label col-sm-3 required">Last name</label>
<div class="col-sm-8">
<input type="text" name="l_name" class="form-control" id="lname-1" placeholder="Enter name">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-3 col-md-4 col-sm-4 col-xs-12 required"> Date of Birth:</label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<div class="row">
<div class="col-xs-4">
<select id="dob_month" class="form-control" name="dob_month-1">
<option value="">1</option>
<option value="">2</option>
</select>
</div>
<div class="col-xs-4">
<!-- added div.col-xs-4 -->
<select id="dob_day" class="form-control" name="dob_day-1">
<option value="">1</option>
<option value="">2</option>
</select>
</div>
<div class="col-xs-4">
<!-- added div.col-xs-4 -->
<select id="dob_year" class="form-control" name="dob_year-1">
<option value="">1</option>
<option value="">2</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label col-sm-3 required">
Gender
</label>
<label class="control-label col-sm-3">
<input name="gender-1" type="radio" value="M" /> Male
</label>
<label class="control-label col-sm-3 ">
<input name="gender-1" type="radio" value="F" /> Female
</label>
</div>
<div class="form-group">
<label for="email" class="control-label col-sm-3 required">Email</label>
<div class="col-sm-8">
<input type="email" name="email-1" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label for="contact" class="control-label col-sm-3 required">Contact no.
</label>
<div class="col-sm-8">
<input type="tel" class="form-control" id="contact" name="contact-1" placeholder="Contact no.">
</div>
</div>
<div class="form-group">
<label for="address1" class="control-label col-sm-3 required">Address 1</label>
<div class="col-sm-8">
<input type="text" name="address1-1" class="form-control" id="address1">
</div>
</div>
<div class="form-group">
<label for="address2" class="control-label col-sm-3">Address 2</label>
<div class="col-sm-8">
<input type="text" name="address2-1" class="form-control" id="address2">
</div>
</div>
<div class="form-group">
<label for="town" class="control-label col-sm-3 required">Suburb / Town</label>
<div class="col-sm-8">
<input type="text" name="town-1" class="form-control" id="town">
</div>
</div>
<div class="form-group">
<label for="state" class="control-label col-sm-3 required">State / Province</label>
<div class="col-sm-8">
<input type="text" name="state-1" class="form-control" id="state">
</div>
</div>
<div class="form-group">
<label for="postcpde" class="control-label col-sm-3 required">Postcode / Zip</label>
<div class="col-sm-8">
<input type="text" name="post-1" class="form-control" id="postcpde">
</div>
</div>
</div>
javascript code:
$(document).ready(function () {
$('#travellers').change(function() {
var travellerSelected = $('#travellers option:selected').val();
var travellerDisplayed = $('[id^="person1-"]:visible').length;
var travellerRendered = $('[id^="person-"]').length;
if (travellerSelected > travellerDisplayed) {
for (var i=1;i<=travellerSelected;i++){
var r=$('#travellers-'+i);
if (r.length == 0) {
var clone=$('#travellers-1').clone(); //clone
clone.children('#person1 h5').text("Traveller "+i);
//change ids appropriately
setNewID(clone,i);
clone.children('div').each(function() {
setNewID($(this),i);
});
$(clone).insertAfter($('#travellers-'+travellerRendered));
}else {
$(r).show();
}
}
}
else {
for (var i=++travellerSelected;i<=travellerRendered;i++){
$('#travellers-'+i).hide();
}
}
});
function setNewID(elem, i) {
oldID=elem.attr('id');
newId=oldID.substring(0,oldID.indexOf('-'))+"-"+i;
elem.attr('id',newId);
}
});
But I'm getting error Uncaught TypeError: Cannot read property 'substring' of undefined in my console. I've been trying to fix this error since few days. What wrong am I doing here ?
