How To Make Spinner dialogue in bootstrap and jquery

How to make spinner dialogue in boostrap and jquery

or

Please wait....

you need to have this spinner first

Download This now

Get the total number of html elements in a dynamically created form

Get the total number of html elements in a dynamically created forms

    var count = 0;
    $('.feed ').each(function () {
        if ($(this).val().length > 0) {
            count++;
        }
    });

step 1: You must have a running boostrap and jquery in the your code

kindly check the link here

Copy option values of one select element to another select elements

step 1: You must have a running boostrap and jquery in the your code

kindly check the link here

How to create Dynamic html elements with jquery and bootstrap??

step 1: You must have a running boostrap and jquery in the your code

kindly check the link here

Add the button in order to create dynamic elements from where we call a function to create dynamic elements

 <button class="btn btn-success" onclick="add_nc_data();" type="button">Add</button>

  a button like this will be created

Step 2: we need to create the an html element where we can create or append the dynamic elements

in my  case i am using a table where i can append html elements dynamically i have created a sample list of one element by default

<div class="table-responsive">
    <table id="lt_trans" class="table table-bordered table-striped">
      <thead>
        <tr>
          <th scope="col">Sr No.</th>
          <th scope="col">Feeder</th>
          <th scope="col">Sold Out</th>
          <th scope="col">Assesment</th>
          <th scope="col">Collection</th>                
          <th scope="col">Arrears</th>
          <th scope="col">Adjustment</th> 
          <th scope="col">Add</th>                               
         </tr>
      </thead>
      <tbody>
          <tr><td>1</td>
          <td><select  id="feederlist" class="col-sm-10 custom-select custom-select-sm feederid1" ></select></td>
          <td><input type="text" id="soldoutunts1" class="form-control" autocomplete="off" placeholder="Sold Out Units:"></td>
          <td><input type="text" id="assesment1" class="form-control" autocomplete="off" placeholder="Assesment Units:"></td>
          <td><input type="text" id="collection1" class="form-control" autocomplete="off" placeholder="Collection:"></td>                
          <td><input type="text" id="arrears1" class="form-control" autocomplete="off" placeholder="Arrears:"></td>
          <td><input type="text" id="adustment1" class="form-control" autocomplete="off" placeholder="Adjustment Units:"></td>
          <td><button type="button" class="btn btn-success" onclick="add_nc_data();">Add</button></td>                                   
          </tr>
      </tbody>
    </table>

                  <div class="d-flex justify-content-center">
                  <button type="button" id="applyfilterbtn" class="btn btn-primary" onclick="submit();">Submit</button> &nbsp; &nbsp;
                  <button type="button" id="removefilterbtn" class="btn btn-warning" onclick="location.reload();">Reset</button>
                  </div>

</div>

Step 3: we need to create a function in order to append the dynamic elements

in my  case i am using a table where i can append html elements dynamically

Step 4: We are creating a function to create dynamic html elements on the fly

the function is as follows

<script type="text/javascript">
function add_nc_data(){
var html = '<tr>';
              html+='<tr><td>'+i+'</td>';
              html+='<td><select id="feederlist'+i+'"  class="col-sm-10 custom-select custom-select-sm feederid'+i+'" ></select></td>';
              html+='<td><input type="text" id="soldoutunts'+i+'" class="form-control" autocomplete="off" placeholder="Sold Out Units:"></td>';
              html+='<td><input type="text" id="assesment'+i+'" class="form-control" autocomplete="off" placeholder="Assesment Units:"></td>';
              html+='<td><input type="text" id="collection'+i+'" class="form-control" autocomplete="off" placeholder="Collection:"></td>';                
              html+='<td><input type="text" id="arrears'+i+'" class="form-control" autocomplete="off" placeholder="Arrears:"></td>';
              html+='<td><input type="text" id="adustment'+i+'" class="form-control" autocomplete="off" placeholder="Adjustment Units:"></td>';
              html+='<td><button type="button" class="btn btn-success" onclick="add_nc_data();">Add</button></td>';                                   
html += '<tr>';
$('#lt_trans').append(html); 
$('select#feederlist  option').clone().appendTo('#feederlist'+i+'');

}
</script>

what this does is that it function add_nc_data() will append the element to the table with id #lt_trans

the function is called whenever the add button is clicked

  a button like this will be created

the final working is under the screen shot

before add button is pressed

  after add button is pressed

you can see 3 html elements are created dynamically

how to integrate bootstrap and jquery for our website

how to create integrate bootstrap and jquery for our website 

Step 1: visit the website url

https://getbootstrap.com/ or https://getbootstrap.com/docs/3.3/getting-started/

you will be redirected to the official bootstrap website this is the boostrap website with cdn means content delivery network

Step 2 : Please copy paste the below mentioned code in the head section of the code

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

or you can copy and paste without the integrity part too....

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Once setup your code will look like this as in the screen shot

with integrity

without integrity