designersdairy: February 2018

Welcome to designer blog, Here we are going to discuss, How to have the fields based on the checkbox selection and showing in the forms

What is Configure Field?

By having Configure Fields you can manage the descriptions that appear with each field, and make certain fields required or hidden using field configurations.

Step1:

First thing, we have to add the checkbox with a label like first name, last name and address ..etc.. As you wish to have fileds as below HTML markup

Html Markup :

<div class="checkbox-item">
<label>
    <input type="checkbox" name="firstname" value="firstname">
    Firstname</label>
<label>
    <input type="checkbox" name="colorCheckbox" value="lastname">
   Lastname</label>
<label>
    <input type="checkbox" name="colorCheckbox" value="address">
    Address</label>
      <label>
    <input type="checkbox" name="sex" value="sex">
    Sex</label>
<label>
    <input type="checkbox" name="colorCheckbox" value="dob">
   Dob</label>
<label>
    <input type="checkbox" name="colorCheckbox" value="comment">
    Comments</label>
</div>

Step2:

Now, We have to place the appropriate input fields to show based on checkbox selection. find below Html mark of input fields

Html markup - input fields

div class="row">
<div class="firstname box">
<label> FirstName </label><br>
<input type="text">

</div>
<div class="lastname box">
    <label> Lastname </label><br>
<input type="text">
    </div>
<div class="address box">
    <label> Address </label><br>
<input type="text">
</div>
<div class="sex box">
    <label> Lastname </label><br>
<input type="text">
</div>
<div class="dob box">
    <label> Dob </label><br>
<input type="radio">
</div>
<div class="comment box">
    <label> Address </label><br>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
</div>

Step3:

Script:

We have setup the Html marks.Here we are going to implement the functionality using Jquery.

$('input[type="checkbox"]').click(function(){

        var inputValues = $(this).attr("value");
$("." + inputValues).toggle();
});
});

This script is used, When you click on each checkbox item. we will get the attribute value and store in the inputValues.As you know we have mentioned the class firstname in our first name input field.

Based on the checkbox input field div name will change.

<div class="firstname box">
<label> FirstName </label><br>
<input type="text">
</div>

We are now displaying the firstname div box ,once checkbox is clicked.

Step4:

Here is the two labels one is All another is Custom. when u click custom it should display custom fields.. while selecting All it should display all the fields.

function cutomize()
    {
                var inputValue = $('input[type="checkbox"]');
                 $.each((inputValue), function(){

                  if($(this).attr('name') === 'firstname')
                        {
                        //alert('true');
                        $(this).prop('checked', true);
                        var rc = $(this).attr("value");
                          $("." + rc).show();

                        }
                        else
                            {
                               // alert('false');
                                 $(this).prop('checked', false);
                                var rc = $(this).attr("value");
                                  $("." + rc).hide();
                        }

    });
    }
    $('.custom').click(function(event){
          event.stopPropagation();
            cutomize();

    });

$('.all').click(function(event){

       event.stopPropagation();
        $('input[type="checkbox"]').removeAttr('checked');

        $('.box').show();

        $.each(($('input[type="checkbox"]')), function(){

        $('input[type="checkbox"]').prop('checked', true);


        });


    });

Step5:
Enitre Code aand screenshot

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Checkboxes</title>
<style type="text/css">
.box {
    color: #000;
    padding: 10px;
    display: none;
    margin-top: 0px;
}
.checkbox-item {
    padding: 10px;
}
.dropdown-menu {
    padding: 10px !important;
}
label {
    margin-right: 15px;
}
</style>



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    cutomize();
    $(document).on('click.bs.dropdown.data-api', '.dropdown.keep-inside-clicks-open', function (e) {
e.stopPropagation();
});

function cutomize()
    {
        var inputValue = $('input[type="checkbox"]');

                 $.each((inputValue), function(){

                  if($(this).attr('name') === 'firstname')
                        {

                        //alert('true');
                        $(this).prop('checked', true);
                        var rc = $(this).attr("value");
                           $("." + rc).show();




                        }
                        else
                            {
                               // alert('false');
                                    $(this).prop('checked', false);
                                var rc = $(this).attr("value");

                                    $("." + rc).hide();

                            }


    });
    }



        $('.custom').click(function(event){
          event.stopPropagation();
            cutomize();

    });

    $('.all').click(function(event){

       event.stopPropagation();
        $('input[type="checkbox"]').removeAttr('checked');

        $('.box').show();

        $.each(($('input[type="checkbox"]')), function(){

        $('input[type="checkbox"]').prop('checked', true);


        });


    });


    $('input[type="checkbox"]').click(function(){


        var inputValues = $(this).attr("value");

        console.log(inputValues);



                $("." + inputValues).toggle();


    });



});
</script>
</head>
<body>
<div class="container">
<div class="dropdown keep-inside-clicks-open">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Configure Fields <span class="caret"></span></button>
    <div class="dropdown-menu"> Show Fields: <a href="#" class="all">All</a> <a href="#" class="custom"> Custom</a>
      <div class="checkbox-item">
        <label>
          <input type="checkbox" name="firstname" value="firstname">
          Firstname</label>
        <label>
          <input type="checkbox" name="colorCheckbox" value="lastname">
          Lastname</label>
        <label>
          <input type="checkbox" name="colorCheckbox" value="address">
          Address</label>
        <label>
          <input type="checkbox" name="sex" value="sex">
          Sex</label>
        <label>
          <input type="checkbox" name="colorCheckbox" value="dob">
          Dob</label>
        <label>
          <input type="checkbox" name="colorCheckbox" value="comment">
          Comments</label>
      </div>
    </div>
</div>
<div class="row">
    <div class="firstname box">
      <label> FirstName </label>
      <br>
      <input type="text">
    </div>
    <div class="lastname box">
      <label> Lastname </label>
      <br>
      <input type="text">
    </div>
    <div class="address box">
      <label> Address </label>
      <br>
      <input type="text">
    </div>
    <div class="sex box">
      <label> Lastname </label>
      <br>
      <input type="text">
    </div>
    <div class="dob box">
      <label> Dob </label>
      <br>
      <input type="radio">
    </div>
    <div class="comment box">
      <label> Address </label>
      <br>
      <textarea class="form-control" rows="5" id="comment"></textarea>
    </div>
</div>
</div>
</body>
</html>

Step6:

Enjoy folks

designersdairy

Search This Blog

Wednesday, February 7, 2018

Configuring fields based on the checkbox selection and displaying like jira

Validating to select in sequencial order using angular