Showing posts with label js. Show all posts
Showing posts with label js. Show all posts

Tuesday 19 August 2014

Input field JQuery float validation, decimal validation

$('#price').keyup(function(e){
      var entered_value = $(this).val();
  var regexPattern = /^\d{0,8}(\.\d{1,2})?$/;         
      //Allow only Number as well 0nly 2 digit after dot(.)
      if(regexPattern.test(entered_value)) {
        alert("false") ;  
      } else {
         alert("true");
      }
});

Tuesday 12 August 2014

Datatable jQuery Plugin set order example

$(document).ready(function() {
    $('#example').dataTable( {
        "order": [[ 3, "desc" ]]
    } );
} );
Plugin files:
//code.jquery.com/jquery-1.11.1.min.js
//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js

Wednesday 6 August 2014

Times ago jQuery plugin

<script type='text/javascript' src="jquery.min.js"></script>
<script type='text/javascript' src="timeago/jquery.timeago.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$("abbr.timeago").timeago();
$("time.timeago").timeago();
});
</script>
<abbr class="timeago" title="July 17, 2008">6 years ago</abbr>

Tuesday 15 July 2014

CSS Message bog show automatically & hide

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
.message{ width: 90%; margin-left:auto; margin-right:auto; position: relative; top: 5px; }
</style>
<?php if(isset($_SESSION["e_msg"]) && $_SESSION["e_msg"]!=""){ ?>
<div class="alert alert-danger alert-error message" style='display:none;'>
   <a href="#" class="close" data-dismiss="alert">×</a>
   <strong>Error!</strong> <?php echo $_SESSION["e_msg"]; ?>
</div>
<script type='text/javascript'>
$( document ).ready(function() {    $(".alert-danger").fadeIn( "slow" );  });
setTimeout(function(){ $(".alert-danger").slideToggle( "slow" ); },3000);</script>
<?php
unset($_SESSION['e_msg']);
}
if(isset($_SESSION["i_msg"]) && $_SESSION["i_msg"]!=""){ ?>
<div class="alert alert-info message" style='display:none;'>
   <a href="#" class="close" data-dismiss="alert">×</a>
   <strong>Note!</strong> <?php echo $_SESSION["i_msg"]; ?>
</div>
<script type='text/javascript'>
$( document ).ready(function() {    $(".alert-info").fadeIn( "slow" );  });
setTimeout(function(){ $(".alert-info").slideToggle( "slow" ); },3000);</script>
<?php
unset($_SESSION['i_msg']);
}
if(isset($_SESSION["w_msg"]) && $_SESSION["w_msg"]!=""){ ?>
<div class="alert alert-warning warning message " style='display:none;'>
    <a href="#" class="close" data-dismiss="alert">×</a>
    <strong>Warning!</strong>  <?php echo $_SESSION["w_msg"]; ?>
</div>
<script type='text/javascript'>
$( document ).ready(function() {    $(".alert-warning").fadeIn( "slow" );  });
setTimeout(function(){ $(".alert-warning").slideToggle( "slow" ); },3000);</script>
<?php
unset($_SESSION['w_msg']);
}
if(isset($_SESSION["s_msg"]) && $_SESSION["s_msg"]!=""){ ?>

<div class="alert alert-success message" style='display:none;'>
   <a href="#" class="close" data-dismiss="alert">×</a>
   <strong>Success!</strong>  <?php echo $_SESSION["s_msg"]; ?>
</div>
<script type='text/javascript'>
$( document ).ready(function() {    $(".alert-success").fadeIn( "slow" );  });
setTimeout(function(){ $(".alert-success").slideToggle( "slow" ); },3000);</script>
<?php
unset($_SESSION['s_msg']);
}
?>

Friday 11 July 2014

How to find last day of month in jquery datetime picker?

function getLastDayOfYearAndMonth(year, month){
    return(new Date((new Date(year, month + 1, 1)) - 1)).getDate();
}

Saturday 28 June 2014

JS get random Numbers

function getRandom(length) {
 var rand = Math.floor(Math.pow(10, length-1) + Math.random() * 9 * Math.pow(10, length-1));
 return rand;
}

Wednesday 25 June 2014

Alphanumeric Validation

Enter text filed only to allow alphabit & Numbers 
function alpha_numeric_validation(arg){
 var valReg = /^[A-Za-z0-9]+$/;
 if(valReg.test( arg ) ) {
  return false;
 } else {
  return true;
 }
}

Alpha Space Validation in JS

Enter text file allow allphabi & space only
function alpha_space_validation(arg){
 var valReg = /^[A-Za-z ]+$/;
 if(valReg.test( arg ) ) {
  return false;
 } else {
  return true;
 }
}

Email Validation - Form field Validate Email Address

alert(email_validation("asasas"))
function email_validation(arg){
 var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
 if( !emailReg.test( arg ) ) {
  return false;
 } else {
  return true;
 }
}

Friday 20 June 2014

Dynamically Date Range reset in jQuery UI date picker

Removes the datepicker functionality completely. This will return the element back to its pre-init state. 
Code :
$( "#start_date" ).datepicker( "destroy" );
$( "#end_date" ).datepicker( "destroy" );

How to get Json Edncoded value in js


var resp ="" //Json Value
var objJSON = eval("(function(){return " + resp + ";})()");
objJSON.name // Value

Thursday 19 June 2014

jQuery Date picker ui select date range picker

Jquery UI Datepicker select date range between Two days
$( "#start_date" ).datepicker({
   minDate: new Datenew Date(1999, 10 - 1, 25),
   maxDate: new Datenew Date(1999, 10 - 1, 30),
   defaultDate: "+1w",
   changeMonth: true,
   numberOfMonths: 2,
   onClose: function( selectedDate ) {
      $( "#end_date" ).datepicker( "option", "minDate", selectedDate );
   }
});

$( "#end_date" ).datepicker({
   minDate: new Datenew Date(1999, 10 - 1, 25),
   maxDate: new Datenew Date(1999, 10 - 1, 30),
   defaultDate: "+1w",
   changeMonth: true,
   numberOfMonths: 2,
   onClose: function( selectedDate ) {
      $( "#start_date" ).datepicker( "option", "maxDate", selectedDate );
   }
});

Wednesday 18 June 2014

Enter Integrr Number only


Enter Integer only in text fileds
onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')"

Monday 12 May 2014

Image uploading Instant preview




<img src="http://www.designofsignage.com/application/symbol/building/image/600x600/no-photo.jpg" width='200px' height='200px' id="preview" title="No Image"><br><br>
<input type="file"  name="postimage" id="postimage" onchange="readURL(this,200,200)" >
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script type='text/javascript'>
function readURL(input,w,h) {
 if (input.files && input.files[0]) {
  var reader = new FileReader();
  reader.onload = function (e) {
   $('#preview').attr('src', e.target.result);
   $("#preview").attr("width",w);
   $("#preview").attr("height",h);
  }
  reader.readAsDataURL(input.files[0]);
 }
}
</script>

Friday 11 April 2014

Input field enter integer only


Here's an example that limits a form field to contain only numeric input (on the fly, of course!).
<script type="text/javascript">
function numbersonly(e){
var unicode=e.charCode? e.charCode : e.keyCode
if (unicode!=8){ //if the key isn't the backspace key (which we should allow)
if (unicode<48||unicode>57) //if not a number
return false //disable key press
}
}
</script>

<form>
<input type="text" size=18 onkeypress="return numbersonly(event)">
</form>