html



Get Radio Button Value with Javascript jQuery $('input[name="inputname"]:checked').val(); Javascript var radios = document.getElementsByName('inputname'); for (var i = 0, length = radios.length; i < length; i++) { if (radios[i].checked) { // do whatever you want with the checked radio alert(radios[i].value); // only one radio can be logically checked, don't check the […]

Get Radio Button Value with Javascript jQuery


Javascript Code <script type=”text/javascript”>function validate() { if ((!document.getElementById(‘gender’).checked) && (!document.getElementById(‘genderf’).checked))    {        alert(“select gender”);    }}</script> HTML Code <form name=”form” id=”form” method=”post” onsubmit=”validate();”>    <input type=”checkbox” name=”check” id=”tnc” /> I accept all terms and conditions.<br/>      Male <input type=”radio” name=”gender” value=”male” id=”gender” class=”gender” />    Female […]

check if checkbox is checked or not in javascript



validation of file extension before uploading file in javascript HTML CODE <form method=”post” onsubmit=”validate(this);”>    <input type=”file”>    <input type=”submit” value=”submit”></form> JAVASCRIPT CODE function validate(ranvirForm){    var allowedExtentions = [“.jpg”, “.jpeg”, “.pdf”, “.png”];  // allowed extenstions array    var input_arr = ranvirForm.getElementsByTagName(“input”);    for (var i = 0; i < […]

validation of file extension before uploading file in javascript





<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <div align=”center”> <canvas id=”myCanvas” width=”578″ height=”400″></canvas> </div> <script> var canvas = document.getElementById(‘myCanvas’); var context = canvas.getContext(‘2d’); var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, 69, 50); }; imageObj.src = ‘url of the image’; […]

draw image on canvas in html


Copy below code and save in html file then open in browser <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” dir=”ltr”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /> <title>jQuery | Pop up submit form</title> <link rel=”stylesheet” href=”general.css” type=”text/css” media=”screen” /> <script src=”http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js”></script> <style> blockquote, q { quotes:”” “”; } […]

jquery multipurpose popup e.g login or register


Save this file as index.html and open on browser <html> <head><title> flexible search box</title> <style> #navigation { margin: 0; padding: 0; z-index: 30 } #navigation li { margin: 0; padding: 0; list-style: none; float: left; font-family:Arial, Helvetica, sans-serif; font-size:14px; } #navigation li a { display:inherit; margin: 0 1px 0 0; […]

flexible search box when focus



<img usemap=”#map” src=”wp-content/uploads/2015/02/all.png”  border=”0″ alt=”social icons” title=”social icons” /> <map id=”map” name=”map”> <area shape=”rect” alt=”” title=”facebook” coords=”22,22,115,115″ href=”https://www.facebook.com” target=”_blank” /> <area shape=”rect” alt=”” title=”twitter” coords=”150,22,240,110″ href=”https://www.twitter.com” target=”_blank” /> <area shape=”rect” alt=”” title=”linkedin” coords=”18,140,122,241″ href=”https://www.linkedin.com” target=”_blank” /> <area shape=”rect” alt=”” title=”gplus” coords=”243,141,139,241″ href=”https://www.plus.google.com” target=”_blank” /> </map>

Image mapping : multiple links on single image


<html xmlns=”http://www.w3.org/1999/xhtml”><head> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ /> <title>testing file</title> <style> #clockDiv { float:right; border:solid 1px #999; color:#FFF; background:#000;}    </style></head><body onload=”clock();”><script type=”text/javascript”>function clock() {   var now = new Date();   var outStr = now.getHours()+’:’+now.getMinutes()+’:’+now.getSeconds();   document.getElementById(‘clockDiv’).innerHTML=outStr;   setTimeout(‘clock()’,1000);}clock();</script> <div id=”clockDiv”></div></body></html>

code for jquery time as digital clock


$(“input[type=checkbox]”).change(function(){  recalculate();}); function recalculate(){    var sum = 0;     $(“input[type=checkbox]:checked”).each(function(){      sum += parseInt($(this).attr(“value”));    });     $(“#totalVal”).html(sum);    $(“#total”).val(sum);} Demo : Check Demo

Sum of selected checkboxs in jQuery