Dynamically create bootstrap elements

Question

I'm trying to dynamically create bootstrap elements. Everything is working fine, but I can't create a drop down.

I'm using ColdFusion. My div elements are:

<div class="panel panel-primary"><div class="panel-heading">
  <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapse9">Vehicles</a>
  </h4>
</div>
<div id="collapse9" class="panel-collapse collapse">
  <div class="panel-body">
    <input type="hidden" name="totalVehicles" id="totalVehicles" value="1" />
    <div id="vehicle_fields"> </div>
    <div class="form-group">
      <label for="name" class="col-lg-2">Make:</label>
      <div class="col-lg-2">
        <input type="text" class="form-control" name="vehicleMake1" id="vehicleMake1" maxlength="50">
      </div>
      <label for="name" class="col-lg-2">Model:</label>
      <div class="col-lg-2">
        <input type="text" class="form-control" name="vehicleModel1" id="vehicleModel1" maxlength="50">
      </div>
      <label for="name" class="col-lg-2">Year:</label>
      <div class="col-lg-2">
        <input type="text" class="form-control" name="vehicleYear1" id="vehicleYear1" maxlength="20">
      </div>
    </div>
    <div class="form-group">
      <label for="name" class="col-lg-2">Color:</label>
      <div class="col-lg-2">
        <input type="text" class="form-control" name="vehicleColor1" id="vehicleColor1" maxlength="30">
      </div>
      <label for="name" class="col-lg-2">License Plate No:</label>
      <div class="col-lg-2">
        <input type="text" class="form-control" name="vehicleLicensePlate1" id="vehicleLicensePlate1" maxlength="20">
      </div>
      <label for="name" class="col-lg-2">License Plate State:</label>
      <div class="col-lg-2">
        <select id="vehicleLicensePlateState1" name="vehicleLicensePlateState1" class="selectpicker form-control">
          <option value="XX" selected>Select</option>
          <cfloop query="GetStates">
            <cfoutput>
              <option value="#GetStates.State#">#GetStates.State#</option>
            </cfoutput>
          </cfloop>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="name" class="col-lg-3">
        <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another vehicle</small>.
      </label>
      <div class="input-group-btn">
        <button class="btn btn-success" type="button" onclick="vehicle_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
      </div>
    </div>
  </div>
</div>
</div>

The button vehicle_fields() is responsible to create a new set of elements and increment their IDs.

Here is my function:

function vehicle_fields() {
  vehicles++;
  $("#totalVehicles").val(vehicles);
  var objTo = document.getElementById('vehicle_fields')
  var divtest = document.createElement("div");
  divtest.setAttribute("class", "removeclassVehicle" + vehicles);
  var rdiv = 'removeclass' + vehicles;
  var htmlStr = '<div class="form-group"><label for="name" class="col-lg-2">Make:</label><div class="col-lg-2">';
  htmlStr += '<input type="text" class="form-control" name="vehicleMake' + vehicles + '" id="vehicleMake' + vehicles + '" maxlength="50">';
  htmlStr += '</div><label for="name" class="col-lg-2">Model:</label><div class="col-lg-2">';
  htmlStr += '<input type="text" class="form-control" name="vehicleModel' + vehicles + '" id="vehicleModel' + vehicles + '" maxlength="50">';
  htmlStr += '</div><label for="name" class="col-lg-2">Year:</label><div class="col-lg-2">';
  htmlStr += '<input type="text" class="form-control" name="vehicleYear' + vehicles + '" id="vehicleYear' + vehicles + '" maxlength="20">';
  htmlStr += '</div></div><div class="form-group"><label for="name" class="col-lg-2">Color:</label><div class="col-lg-2">';
  htmlStr += '<input type="text" class="form-control" name="vehicleColor' + vehicles + '" id="vehicleColor' + vehicles + '" maxlength="30">';
  htmlStr += '</div><label for="name" class="col-lg-2">License Plate No:</label><div class="col-lg-2">';
  htmlStr += '<input type="text" class="form-control" name="vehicleLicensePlate' + vehicles + '" id="vehicleLicensePlate' + vehicles + '" maxlength="20">';
  htmlStr += '</div><label for="name" class="col-lg-2">License Plate State:</label><div class="col-lg-2">';
  htmlStr += '<div class="btn-group bootstrap-select form-control">';
  htmlStr += '<select name="desiredLeaseTerm' + vehicles + '" id="vehicleLicensePlateState' + vehicles + '" name="vehicleLicensePlateState' + vehicles + '" class="selectpicker form-control">';
  htmlStr += $("#vehicleLicensePlateState1").html();
  htmlStr += '</select></div></div></div>';
  htmlStr += '<div class="form-group"><label for="name" class="col-lg-3"><small>Press <span class="glyphicon glyphicon-minus gs"></span> to remove the vehicle</small></label><div class="input-group-btn"><button class="btn btn-danger" type="button"  onclick="remove_vehicle_fields(' + preference + ');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div>'
  console.debug(htmlStr);
  divtest.innerHTML = htmlStr;
  objTo.appendChild(divtest)
}

function remove_vehicle_fields(rid) {
  $('.removeclassVehicle' + rid).remove();
}

When I load the page, I set vehicle = 1.

I'm not sure if it's the best way to implement a creation of dynamically fields; however, it is working for me. The only exception is the <select id="vehicleLicensePlateState">. It is not creating/displaying when I click on add another vehicle.

Does anyone know why?

Thanks

So your `name` and `ID` for the problematic element should have the number at the end, like `vehicleLicensePlate1`? And are you setting the variable `vehicle` or `vehicles`? Because you use the latter in your `htmlStr`. You'd probably also find it much easier to debug if you were to use `createElement` and `appendChild` instead of inserting a giant block of HTML :) — Obsidian Age, Nov 30 '17 at 22:20
It's just because I do not know. Could you please give me an example? — user6824563, Nov 30 '17 at 22:23

score 1 · Answer 1 · answered Nov 30 '17 at 22:50

Looks like you may have had mismatched div tags.

Either way, here it is working in Fiddle:

https://jsfiddle.net/DTcHh/39882/

<div class="panel-heading">
  <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapse9">Vehicles</a>
  </h4>
</div>
<div id="collapse9" class="panel-collapse collapse">
  <div class="panel-body">
    <input type="hidden" name="totalVehicles" id="totalVehicles" value="1" />
    <div id="vehicle_fields"> </div>
    <div class="form-group">
      <label for="name" class="col-lg-2">Make:</label>
      <div class="col-lg-2">
        <input type="text" class="form-control" name="vehicleMake1" id="vehicleMake1" maxlength="50">
      </div>
      <label for="name" class="col-lg-2">Model:</label>
      <div class="col-lg-2">
        <input type="text" class="form-control" name="vehicleModel1" id="vehicleModel1" maxlength="50">
      </div>
      <label for="name" class="col-lg-2">Year:</label>
      <div class="col-lg-2">
        <input type="text" class="form-control" name="vehicleYear1" id="vehicleYear1" maxlength="20">
      </div>
    </div>
    <div class="form-group">
      <label for="name" class="col-lg-2">Color:</label>
      <div class="col-lg-2">
        <input type="text" class="form-control" name="vehicleColor1" id="vehicleColor1" maxlength="30">
      </div>
      <label for="name" class="col-lg-2">License Plate No:</label>
      <div class="col-lg-2">
        <input type="text" class="form-control" name="vehicleLicensePlate1" id="vehicleLicensePlate1" maxlength="20">
      </div>
      <label for="name" class="col-lg-2">License Plate State:</label>
      <div class="col-lg-2">
        <select id="vehicleLicensePlateState1" name="vehicleLicensePlateState1" class="selectpicker form-control">
          <option value="XX" selected>Select</option>
          <cfloop query="GetStates">
            <cfoutput>
              <option value="#GetStates.State#">#GetStates.State#</option>
            </cfoutput>
          </cfloop>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="name" class="col-lg-3">
        <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another vehicle</small>.
      </label>
      <div class="input-group-btn">
        <button class="btn btn-success" type="button" onclick="vehicle_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
      </div>
    </div>
  </div>
</div>

I believe it wasn't the problem. That at the end is because I have at the top
. I forgot to add it here. BTW, when I run your code, it says in the firefox console: "TypeError: vehicle_fields is not a function" and do not add new vehicle. Does it happen for you? — user6824563, Nov 30 '17 at 23:08
That makes sense. Then that means if your select wasn't building that it may be related to your bootstrap version - since the one I used in the fiddle is probably different. — JPeG, Nov 30 '17 at 23:20
Also, I am getting that error about vehicle_fields is not a function but I believe that is an issue relating directly to jsFiddle and not your code: https://stackoverflow.com/a/33105389/5347823 — JPeG, Nov 30 '17 at 23:21
I found the problem is "selectpicker" class in my select. If I remove it, it works. If I add it, the — user6824563, Nov 30 '17 at 23:24

Dynamically create bootstrap elements

1 Answers1