CODEWITHSUNDEEP
javascriptjquerybootstrap-4
Avinash Maddala
Avinash Maddala

Reputation: 95

How to get the card dynamically on clicking button along with on click dynamically options in the card?

I have created a card inside of it i gave two inputs, one for question and other for option, so here i want that second input(i.e option) to get more number of options in the same card and also I'm trying to get card dynamically for more number of times with the both question and option input. Please help me.

<body>
            <form method="post" action="">
                <div class="cardBox">
                    <div class="block">
                        <div class="card">
                           <div style="display: flex;">
                            <input type="text" name="" class="form-control" placeholder="Enter Your Question"/>
                            <span class="removeCard">Remove</span>
                           </div>
                            <div class="form-group fieldGroup">
                                <div class="input-group">
                                    <input type="text" name="name[]" class="form-control" placeholder="Enter name"/>
                                    <div class="input-group-addon">
                                        <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
                                    </div>
                                </div>
                            </div>

                            <!-- copy of things -->
                            <div class="form-group fieldGroupCopy" style="display: none;">
                                <div class="input-group">
                                    <input type="text" name="name[]" class="form-control" placeholder="Enter name"/>
                                    <div class="input-group-addon">
                                        <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <span class="add">ADD</span>
                </div>
            </form>

            </body>

            <script src="jquery.js"></script>
            <script type="text/javascript">
                $(document).ready(function(){

                    var maxGroup = 50;

                    //add more fields group
                    $(".addMore").click(function(){
                        if($('body').find('.fieldGroup').length < maxGroup){
                            var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
                            $('body').find('.fieldGroup:last').after(fieldHTML);
                        }else{
                            alert('Maximum '+maxGroup+' groups are allowed.');
                        }
                    });

                    //remove fields group
                    $("body").on("click",".remove",function(){
                        $(this).parents(".fieldGroup").remove();
                    });
                });

                $('.add').click(function(){
                    $('.block:last').after(`<div class="block">
                    <div class="card">
                    <input type="text" name="" class="form-control" placeholder="Enter Your Question"/><span class="removeCard">Remove</span>
                     <div class="form-group fieldGroup">
                <div class="input-group">
                    <input type="text" name="name[]" class="form-control" placeholder="Enter name"/>
                    <div class="input-group-addon">
                        <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
                    </div>
                </div>
            </div>
                        <div class="form-group fieldGroupCopy" style="display: none;">
                        <div class="input-group">
                        <input type="text" name="name[]" class="form-control" placeholder="Enter name"/>
                        <input type="text" name="email[]" class="form-control" placeholder="Enter email"/>
                        <div class="input-group-addon">
                        <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
                        </div>
                        </div>
                        </div>
                        </div></div>`)

         $(document).ready(function(){
            //group add limit
            var maxGroup = 50;

            //add more fields group
            $(".addMore").click(function(){
                if($('body').find('.fieldGroup').length < maxGroup){
                    var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
                    $('body').find('.fieldGroup:last').after(fieldHTML);
                }else{
                    alert('Maximum '+maxGroup+' groups are allowed.');
                }
            });

            //remove fields group
            $("body").on("click",".remove",function(){
                $(this).parents(".fieldGroup").remove();
            });
        });
        });enter code here

        $('.cardBox').on('click','.removeCard',function(){
            $(this).parent().remove();
        });
            </script>

Upvotes: 2

Views: 3628

Answers (1)

Takit Isy
Takit Isy

Reputation: 10081

I played a little with your code, trying to optimize the whole code and avoid duplicate…
To achieve that, I made the following modifications:

  • Moved the HTML code from JS to the HTML, so that HTML stays in HTML.
  • Same for CSS, it's better to not use inline CSS in the HTML, so added the class "hidden" to use it for elements with style="display: none;".
  • No duplicate HTML, shorter JS… The form starts empty, the JS adds one "block" on load using the template in the HTML. That way, we ensure the whole form will always be the same.

… to ended-up with that working snippet:
(See comments in the code for more details)

var maxGroup = 50;

// TAKIT: Added these variables to use the "templates" I added in HTML
var blockTemplate = $('#Templates > .block')[0].outerHTML;
var fieldTemplate = $('#Templates .fieldGroup:last')[0].outerHTML;

// Add another block
$('.add').click(function() {
  $('form .add').before(blockTemplate); // TAKIT: Modified
  // TAKIT: Removed the $(document).ready that was here ! What was that?
});

// TAKIT: Modified this function, too
// Add field
$('.cardBox').on('click', '.addMore', function() {
  if ($('form .fieldGroup').length > maxGroup) {
    alert('Maximum ' + maxGroup + ' groups are allowed.');
    return; // Exit
  }
  $(this).closest(".card").find('.fieldGroup:last').after(fieldTemplate); // TAKIT: Modified here
});

// Remove field
$('.cardBox').on('click', '.removeField', function() {
  $(this).parent().remove();
});

// TAKIT: Add a block on load
$('.add').trigger('click');
/* TAKIT: Added some CSS */

.hidden {
  display: none;
}

.fieldGroup {
  display: flex;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<body>
  <form method="post" action="">
    <div class="cardBox">
      <a class="add">[ADD block]</a>
    </div>
  </form>

  <!-- TAKIT: Created templates here, so that HTML stays in HTML -->
  <div class="hidden" id="Templates">
    <!-- TAKIT: block template -->
    <div class="block">
      <div class="card">
        <!-- TAKIT: field template -->
        <div class="fieldGroup">
          <input type="text" name="name[]" class="form-control" placeholder="Enter name" />
          <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>Add</a>
        </div>
        <div class="fieldGroup">
          <input type="text" name="" class="form-control" placeholder="Enter Your Question" />
          <a href="javascript:void(0)" class="btn btn-danger removeField"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>Remove</a>
        </div>
      </div>
      <br><!-- TAKIT: Added, just because -->
    </div>
  </div>

</body>

Note that I removed some elements like input-group and input-group-addon because I didn't need it in the snippet, but it can be added back easily in the HTML "templates".
Feel free to comment if anything.

Hope it helps.

Upvotes: 2

Related Questions