javascript - 根据选择值克隆表单

Question

我正在尝试根据选择选项中的数值克隆表单。这是fiddle :

HTML 代码:

<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 代码:

$(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);
 }
});

但是我在控制台中收到错误Uncaught TypeError: Cannot read property 'substring' of undefined。几天以来我一直在尝试修复这个错误。我在这里做错了什么？

Answer 1

我已经编辑了你的代码，但很难解释。您可以查看并改进您的代码。希望对您有帮助。

在脚本中

<script type="text/javascript">
$(function () {

    $('#travellers').change(function () {
        var travellerSelected = $('#travellers option:selected').val();
        var travellerDisplayed = $('[id^="person-"]:visible').length;
        var travellerRendered = $('[id^="person-"]').length;
        if (travellerSelected > travellerDisplayed) {

            for (var i = 1; i <= travellerSelected; i++) {
                var r = $('#passanger-' + i);
                if (r.length == 0) {

                    var clone = $('#passanger-1').clone(); //clone
                    clone.children('#person-1')[0].innerHTML = "<h5>Traveller " + i + "<h5>";
                    //change ids appropriately
                    setNewID(clone, i);
                    //clone.children('div').each(function () {
                    //setNewID($(this), i);
                    //});
                    clone.find('div').each(function () {
                        setNewID($(this), i);
                    });
                    clone.insertAfter($('#passanger-' + travellerRendered));

                } else {
                    $(r).show();
                }
            }

        } else {
            for (var i = ++travellerSelected; i <= travellerRendered; i++) {
                $('#passanger-' + i).hide();
            }
        }
    });

});

function setNewID(elem, i) {
    if (typeof elem.attr('id') === "undefined") {
        return;
    }
    oldID = elem.attr('id');
    newId = oldID.substring(0, oldID.indexOf('-')) + "-" + i;
    elem.attr('id', newId);
}
</script>

在 HTML 中

<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">
<div id="passanger-1">
  <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">
        <!-- added div.row -->
        <div class="col-xs-4">
          <!-- added div.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>
</div>