How to get the checked value of the radio button in javascript

Hi, In This tutorial you will learn about "How to get the checked value of the radio button in javascript". If working on the javascript to get the values of the radio buttons it some times gets the not checked value or same value can be retrieved. Because when you write the radio buttons code any radio button is checked default

<input type="radio" id="lang" name="language" value="PHP" checked> PHP  

In javascript, we will retrieve this value as

var  language = document.getElementById('lang').value;
alert(language);

it will work perfectly when only one radio button. In another case, if you have the multiple radio buttons you need to check the every radio button is checked or not before getting the value from the radio button.

i.e, For Example, I showed the above example only one language but here I am taking the multiple languages.

 <input type="radio" id="lang1" name="language" value="PHP" checked> PHP  
 <input type="radio" id="lang2" name="language" value="Jquery"> Jquery  
 <input type="radio" id="lang3" name="language" value="MySql"> MySql  
 <input type="radio" id="lang4" name="language" value="Html"> Html  
 <input type="radio" id="lang5" name="language" value="CSS"> CSS  
 <input type="radio" id="lang6" name="language" value="JavaScript"> JavaScript  

In the above example name must be the same to all the radio buttons so that only one language can be selected. it is the default nature of the radio button. But you need to change the id of the name like the above code it is necessary to check the each and every radio button is checked or not before getting the checked value.

var language = "";  
 if (document.getElementById('lang1').checked) {  
  language = document.getElementById('lang1').value;  
 }else if (document.getElementById('lang2').checked) {  
  language = document.getElementById('lang2').value;  
 }else if (document.getElementById('lang3').checked) {  
  language = document.getElementById('lang3').value;  
 }else if (document.getElementById('lang4').checked) {  
  language = document.getElementById('lang4').value;  
 }else if (document.getElementById('lang5').checked) {  
  language = document.getElementById('lang5').value;  
 }else if (document.getElementById('lang6').checked) {  
  language = document.getElementById('lang6').value;  
 }  
 alert(language);  

* If you like this post please don't forget to subscribe TechiesBadi - programming blog for more useful stuff

How to add the Save to Google Drive Button to your web page

Hi, In this tutorial, I am going to show you how to add the save to google drive button in your web pages.
This is a simple procedure it enables your website to allow your users to save files to their Google Drive . by configuring the save button.

It is the simplest way to display the save to drive button on your page. You need to load some javascript resource from the HTTPS protocol

 <script src="https://apis.google.com/js/platform.js" async defer></script>  
 <div class="g-savetodrive"  
   data-src="//demos.techiesbadi.in/save-to-drive/save to drive script.txt"  
   data-filename="save to drive script.txt"  
   data-sitename="TechiesBadi">  
 </div>  
 

Script Explanation
data-src -- Here you can set the real path of the file name do you want to save the users Google Drive.
data-filename -- Here you can give your file name.
data-sitename -- Here you can set your website name.

Here you can download the Full Source code and check the demo.

Download Demo

Author : Manohar, web developer at innovate techno solutions.

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff

How to display Loading Image with changing some text while Page Loads using Jquery and CSS

In this tutorial, I am going to show you how can you set an animated loading image with some text changing while page loads using Jquery and CSS. It is a great idea to show a cool animated image with changing some text until your website is loading.

This idea can implement it on the user registrations. Generally, we do after the user registration in the project user should redirect to the dashboard. This is a normal way we have to do some more professional way between the registration and redirecting to the dashboard in the mean time we would show some cool animated image with changing text.

While you are using this cool idea to show the cool animated images with changing text to the user, So that user can feel much better than the previous approach.

How to convert the HTML content into an image using jquery
Step 1: Load Jquery file to you page.

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

Step 2: Create the loader class and loading id in css

<style type="text/css">  
   #loading {  
   font-size:18px;  
   text-align: center;  
   font-family: 'Open Sans', sans-serif;  
   color: RGBA(0, 0, 0, 0.9);  
   }  
   .loader{  
   margin-top: 11em;  
   }  
 </style> 

Step 3: Place the loading image in the loader class.

 <div class="loader">  
   <div id="loading"></div>  
   <center><img src="images/loader6.gif"></center>  
 </div>  

Step 4: Configuring the changing text in jquery.

<script type="text/javascript">  
   function onReady(callback) {  
   setTimeout( function(){  
   // Do something after 1 second  
   document.getElementById('loading').innerHTML = "Authenticating";  
   } , 1000 );  
   setTimeout( function(){  
   // Do something after 4 seconds  
   document.getElementById('loading').innerHTML = "Initializing Username";  
   } , 5000 );  
   setTimeout( function(){  
   // Do something after 2 seconds  
   document.getElementById('loading').innerHTML = "Username Created";  
   } , 7000 );  
   setTimeout( function(){  
   // Do something after 2 seconds  
   document.getElementById('loading').innerHTML = "Creating your dashborad";  
   } , 9000 );  
   setTimeout( function(){  
   // Do something after 2 seconds  
   document.getElementById('loading').innerHTML = "Almost Completed";  
   } , 11000 );  
   var intervalID = window.setInterval(checkReady, 15000);  
   function checkReady() {  
   if (document.getElementsByTagName('body')[0] !== undefined) {  
   window.clearInterval(intervalID);  
   callback.call(this);  
   }  
   }  
   }  
   function show(id, value) {  
   document.getElementById(id).style.display = value ? 'block' : 'none';  
   }  
   onReady(function () {  
   show('page', true);  
   show('loading', false);  
   });  
 </script>  

Step 5: Setting the redirect URL.

 <script type="text/javascript">  
   setTimeout(function () {  
   window.location.href = "http://techiesbadi.in"; //will redirect to your page  
   }, 15000);  
 </script>

Here you can download the Full Source code and check the demo.

Download Demo

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff

How to convert the HTML content into an image using jquery

Hi, In this tutorial, I am going to explain, How to convert the HTML content into an image using jquery.

If anybody wants to save / convert the HTML content as an image this code can be helpful.There is a jquery plugin i.e html2canvas, By using this plugin we can easily convert the HTML content of any part i.e a particular div content also to image.

This is like a snapshot of the HTML content, This functionality can be more useful when we have to generate the unique images dynamically.

First we need to include the jquery.min.js,html2canvas.js files to your project

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

This is my content here I am going to convert some image and text to image by using the html2canvas library

 <div class="col-md-offset-4 col-md-4 col--md-offset-4 top">  
   <div id="generateImg" style="border:1px solid;text-align:center;">  
    <img src="logo.png">  
    <h3>How to convert the html content into a image using jquery</h3>  
    <input type="text" value="" placeholder="Enter custom text here!!.." style="background-color: transparent;border: 0px solid;" class="form-control" width="300"/>  
    <br/>  
   </div>  
   <button id="gimg" type="button" class="btn btn-primary top pull-right">Generate Image</button>  
   <div id="img" style="display:none;">  
    <img src="" id="newimg" class="top"/>  
   </div>  
 </div>  

In the above code when we click on the generate image button then it will convert the entire first div content to image and it will display as an image in the second div.

Image generation code by using the html2canvas

  <script>  
   $(function(){  
   $("#gimg").click(function(){  
   html2canvas($("#generateImg"), {  
     onrendered: function(canvas) {  
     var imgsrc = canvas.toDataURL("image/png");  
     console.log(imgsrc);  
     $("#newimg").attr('src',imgsrc);  
     $("#img").show();  
   }  
   });  
   });  
   });  
 </script>  
 

Download Demo

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff