How to handle jquery creation of dynamic bootstrap card?

Question

I am trying to create a fun game. The user can enter his name and email. After clicking "Add" button,the new card will be created with the form which includes checkboxes "One" and "Two".Based on choice of checkboxes, the user can choose between 1 and 2 fieldsets.The fieldsets are to be disabled initially. But because of something wrong on jquery code,the newly created card comes out as the enabled fieldsets.

$(document).ready(function() {

  $(".oneFieldset").prop('disabled', true);
  $(".twoFieldset").prop('disabled', true);

  $("#add").click(function() {

    var name = $("#name").val();
    var email = $("#email").val();

    var htmlcard = "<div class='card px-3'><div class='card-header'>" + name + "|" + email + "</div><div class='card-body'><div class='card-title'><div class='form-check form-check-inline'><input class='form-check-input one' type='checkbox' value='one'><br><label class='form-check-label' for='one'>One</label></div><div class='form-check form-check-inline'><input class='form-check-input two' type='checkbox' value='two'><label class='form-check-label' for='two'>Two</label></div></div><form><div class='row'><div class='col-md-4'><fieldset class='oneFieldset'><legend>1</legend><label for='NoOne' class='col-form-label'>Choose</label><select class='form-control w-30' id='NoOne' placeholder='Choose'><option value='a'>A</option><option value='b'>B</option><option value='c'>C</option></select></fieldset></div><div class='col-md-8'><fieldset class='twoFieldset'><legend>2</legend><div class='row'><div class='form-group col'><label for='NoTwo' class='col-form-label'>Select Package Amount</label><select class='form-control w-30' id='NoTwo' placeholder='Choose'><option value='a'>A</option><option value='b'>B</option><option value='c'>C</option></select></div><div class='form-group col'><label for='NoThree' class='col-form-label'>Select Package Amount</label><select class='form-control w-30' id='NoThree' placeholder='Choose'><option value='x'>X</option><option value='y'>Y</option><option value='z'>Z</option></select></div></div></fieldset></div></div></form><br><a href='#' class='btn btn-primary btn-lg'>Choose</a></div></div>";

    $("body").append(htmlcard);

  });

  $(".one").change(function() {
    if (this.checked) {
      $(".oneFieldset").prop('disabled', false);
    }
    if (this.checked == false) {
      $(".oneFieldset").prop('disabled', true);
    }
  });

  $(".two").change(function() {
    if (this.checked) {
      $(".twoFieldset").prop('disabled', false);
    }
    if (this.checked == false) {
      $(".twoFieldset").prop('disabled', true);
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <form class="form-control my-3 mx-auto w-50">
    <label for="username">Enter username</label>
    <input type="text" name="username" class="form-control" id="name"><br>
    <label for="email">Enter email</label>
    <input type="email" name="email" class="form-control" id="email"><br>
    <a href="#" id="add" class="btn btn-primary mb-3 btn-lg">Add</a>
  </form>
</div>
<div class="card px-3">
  <div class="card-header">
    Choose something
  </div>
  <div class="card-body">
    <div class="card-title">
      <div class="form-check form-check-inline">
        <input class="form-check-input one" type="checkbox" value="one">
        <br>
        <label class="form-check-label" for="one">One</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input two" type="checkbox" value="two">
        <label class="form-check-label" for="two">Two</label>
      </div>
    </div>
    <form>
      <div class="row">
        <div class="col-md-4">
          <fieldset class="oneFieldset">
            <legend>1</legend>
            <label for="NoOne" class="col-form-label">Choose</label>
            <select class="form-control w-30" id="NoOne" placeholder="Choose">
              <option value="a">A</option>
              <option value="b">B</option>
              <option value="c">C</option>
            </select>
          </fieldset>
        </div>
        <div class="col-md-8">
          <fieldset class="twoFieldset">
            <legend>2</legend>
            <div class="row">
              <div class="form-group col">
                <label for="NoTwo" class="col-form-label">Select Package Amount</label>
                <select class="form-control w-30" id="NoTwo" placeholder="Choose">
                  <option value="a">A</option>
                  <option value="b">B</option>
                  <option value="c">C</option>
                </select>
              </div>
              <div class="form-group col">
                <label for="NoThree" class="col-form-label">Select Package Amount</label>
                <select class="form-control w-30" id="NoThree" placeholder="Choose">
                  <option value="x">X</option>
                  <option value="y">Y</option>
                  <option value="z">Z</option>
                </select>
              </div>
            </div>
          </fieldset>
        </div>
      </div>
    </form>
    <br>
    <a href="#" class="btn btn-primary btn-lg">Choose</a>
  </div>
</div>
<br>

May be something is wrong with my thinking.Please point out. Thanks in advance.

score 1 · Answer 1 · answered Jun 12 '19 at 16:46

1

The new value of HTML Fields, must be set before append

From what I understand, you're trying to initialize fields after "amount" as off, if that's it:

Set "disabled" in "Select" created in htmlcard The new html instance created in jquery is not set like a disabled

<select disabled class='form-control w-30' id='NoTwo' placeholder='Choose'>

Check a pen working in here

answered Jun 12 '19 at 16:46

Edson Filho

66
6

@Edison Filho Yes,your're right.I forgot to update as I have already tried with disabled in newly created htmlcard what you have mentioned.But, the thing is that the newly created method cannot enable the related select boxes by checking the checkboxes One or Two.It is still not working. – Ko_phayaung Jun 12 '19 at 17:00
1

Your comment about the click not working is *not* part of this question. In the question you've asked specifically about the cards being enabled/disabled, for which this answer provides a suitable fix. If you have a follow-on question having got a working solution to your initial question, then you should ask a follow-on question. It happens that I spotted this would happen and have provided the next step in my answer, but only as a courtesy; it wasn't part of the question. – freedomn-m Jun 12 '19 at 17:06
(FYI if you did ask the follow on part it would be closed as a duplicate of https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements, which is well worth a read) – freedomn-m Jun 12 '19 at 17:07

score 1 · Answer 2 · answered Jun 12 '19 at 17:04

The other answer provides a fix by changing the HTML.

In your first load, you call:

$(".oneFieldset").prop('disabled', true);
$(".twoFieldset").prop('disabled', true);

you can make the same call (with a small adjustment) after adding your new HTML:

var htmlcard = "<div class='card px-3'>...";
var newcard = $(htmlcard).appendTo("body");
newcard.find(".oneFieldset").prop('disabled', true);
newcard.find(".twoFieldset").prop('disabled', true);

This will then bring you to your next problem - event binding on dynamically added elements - which you can fix by adding the event handlers when you add the html or you can use event delegation with tree navigation to change only the relevant fieldset:

  $(document).on("change", ".one", function() {
    $(this).closest(".card").find(".oneFieldset").prop("disabled", !this.checked);
  });

$(document).ready(function() {

  $(".oneFieldset").prop('disabled', true);
  $(".twoFieldset").prop('disabled', true);

  $("#add").click(function() {

    var name = $("#name").val();
    var email = $("#email").val();

    var htmlcard = "<div class='card px-3'><div class='card-header'>" + name + "|" + email + "</div><div class='card-body'><div class='card-title'><div class='form-check form-check-inline'><input class='form-check-input one' type='checkbox' value='one'><br><label class='form-check-label' for='one'>One</label></div><div class='form-check form-check-inline'><input class='form-check-input two' type='checkbox' value='two'><label class='form-check-label' for='two'>Two</label></div></div><form><div class='row'><div class='col-md-4'><fieldset class='oneFieldset'><legend>1</legend><label for='NoOne' class='col-form-label'>Choose</label><select class='form-control w-30' id='NoOne' placeholder='Choose'><option value='a'>A</option><option value='b'>B</option><option value='c'>C</option></select></fieldset></div><div class='col-md-8'><fieldset class='twoFieldset'><legend>2</legend><div class='row'><div class='form-group col'><label for='NoTwo' class='col-form-label'>Select Package Amount</label><select class='form-control w-30' id='NoTwo' placeholder='Choose'><option value='a'>A</option><option value='b'>B</option><option value='c'>C</option></select></div><div class='form-group col'><label for='NoThree' class='col-form-label'>Select Package Amount</label><select class='form-control w-30' id='NoThree' placeholder='Choose'><option value='x'>X</option><option value='y'>Y</option><option value='z'>Z</option></select></div></div></fieldset></div></div></form><br><a href='#' class='btn btn-primary btn-lg'>Choose</a></div></div>";

    var newcard = $(htmlcard).appendTo("body");
    newcard.find(".oneFieldset").prop('disabled', true);
    newcard.find(".twoFieldset").prop('disabled', true);

  });

  $(document).on("change", ".one", function() {
    $(this).closest(".card").find(".oneFieldset").prop("disabled", !this.checked);
  });

  $(document).on("change", ".two", function() {
    $(this).closest(".card").find(".twoFieldset").prop("disabled", !this.checked);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <form class="form-control my-3 mx-auto w-50">
    <label for="username">Enter username</label>
    <input type="text" name="username" class="form-control" id="name"><br>
    <label for="email">Enter email</label>
    <input type="email" name="email" class="form-control" id="email"><br>
    <a href="#" id="add" class="btn btn-primary mb-3 btn-lg">Add</a>
  </form>
</div>
<div class="card px-3">
  <div class="card-header">
    Choose something
  </div>
  <div class="card-body">
    <div class="card-title">
      <div class="form-check form-check-inline">
        <input class="form-check-input one" type="checkbox" value="one">
        <br>
        <label class="form-check-label" for="one">One</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input two" type="checkbox" value="two">
        <label class="form-check-label" for="two">Two</label>
      </div>
    </div>
    <form>
      <div class="row">
        <div class="col-md-4">
          <fieldset class="oneFieldset">
            <legend>1</legend>
            <label for="NoOne" class="col-form-label">Choose</label>
            <select class="form-control w-30" id="NoOne" placeholder="Choose">
              <option value="a">A</option>
              <option value="b">B</option>
              <option value="c">C</option>
            </select>
          </fieldset>
        </div>
        <div class="col-md-8">
          <fieldset class="twoFieldset">
            <legend>2</legend>
            <div class="row">
              <div class="form-group col">
                <label for="NoTwo" class="col-form-label">Select Package Amount</label>
                <select class="form-control w-30" id="NoTwo" placeholder="Choose">
                  <option value="a">A</option>
                  <option value="b">B</option>
                  <option value="c">C</option>
                </select>
              </div>
              <div class="form-group col">
                <label for="NoThree" class="col-form-label">Select Package Amount</label>
                <select class="form-control w-30" id="NoThree" placeholder="Choose">
                  <option value="x">X</option>
                  <option value="y">Y</option>
                  <option value="z">Z</option>
                </select>
              </div>
            </div>
          </fieldset>
        </div>
      </div>
    </form>
    <br>
    <a href="#" class="btn btn-primary btn-lg">Choose</a>
  </div>
</div>
<br>

How to handle jquery creation of dynamic bootstrap card?

2 Answers2