Check all check all check box with java script

<html>
<head>
<script language=”javascript”>
function checkAll(){
for (var i=0;i<document.forms[0].elements.length;i++)
{
var e=document.forms[0].elements[i];
if ((e.name != ‘allbox’) && (e.type==’checkbox’))
{
e.checked=document.forms[0].allbox.checked;
}
}
}
</script>
</head>

<body>
<form>
<input type=”checkbox” value=”on” name=”allbox” onClick=”checkAll();”/> Check all<br />

<h3>Fruit</h3>
<input type=”checkbox” value=”on” name=”1″ /> 1<br/>
<input type=”checkbox” value=”on” name=”2″ /> 2<br/>
<input type=”checkbox” value=”on” name=”3″ /> 3<br/>

</form>

</body>
</html>

Remove default values on textareas on-focus in jquery

Remove default values on textareas on-focus  in jquery
<script>
$(document).ready(function () {
$(‘input[type=”text”], textarea’).focus(function () {
defaultText = $(this).val();
$(this).val(”);
});
$(‘input[type=”text”], textarea’).blur(function () {
if ($(this).val() == “”) {
$(this).val(defaultText);
}
});
});
</script>
<textarea >Please describe why</textarea>

How to allow only numeric in inputbox using jQuery?

$(document).ready(function() {
$(“#rank_point_from”).keydown(function(event) {
// Allow: backspace, delete, tab, escape, and enter
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
// Allow: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)) {
// let it happen, don’t do anything
return;
}
else {
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode< 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});

});

Dyanamic style with jquery

function change_style(res,field_id,hidden_field)
{
var b = document.getElementById(field_id);
b.style.fontStyle    =    res;
document.getElementById(hidden_field).value  = res;
}

<select id=”cource” class=”txt1″ style=”width:90px;” name=”cource” onChange=”change_style(this.value,’div_id’,’style_val’)”>
<option value=”normal”>Normal</option>
<option value=”italic”>italic</option>
<option value=”inherit”>inherit</option>
<option value=”oblique”>oblique</option>
</select>

Hidden field for store the value of style

Ajax jquery example

<script type=”text/javascript”>
$(document).ready(function()
{
// test button id
$(‘#test’).click(function()
{
var emp_id = $(‘#emp’).val();
$.ajax({
url: “ajax-emp.php”,
type: “post”,
data: ({ ’emp_id’ : emp_id }), // send multiple data with “, ” seprate
success: function(data){
alert(data);
$(“#result”).html(‘submitted successfully’);
},
error:function(){
alert(“failure”);
$(“#result”).html(‘there is error while submit’);
}
});
});
});
</script>

Open pop up without color box

<!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”>
<head>
<meta http-equiv=”ContentType” content=”text/html; charset=iso-8859-1″ />
<title>Popup demo </title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(‘#back_fader’).click(function(e) {
if(e.target.id == “back_fader”)
{
$(‘#back_fader’).hide();
$(‘#popup’).hide();
}
});
});

function popup(){
document.getElementById(‘back_fader’).style.display = ‘block’;
document.getElementById(‘popup’).style.display = ‘block’;
}
</script>
<style>
#back_fader{
background-color: rgba(255, 255, 255, 0.93);
display: none;
bottom: 0;
left: 0;
overflow-x: auto;
overflow-y: scroll;
position: fixed;
right: 0;
top: 0;
z-index: 9999;
}
.popup_content{
min-height:600px;
padding:8px;
margin:20px auto;
border:solid 2px #B5B5B5;
background: #EBF6FF;
position: static;
z-index: 10;
/*display: none;*/
box-shadow: 0 3px 8px rgba(34, 25, 25, 0.4);
font-size: 13px;
padding: 20px 30px 0;
top: 110px !important;
width: 600px;

}

</style>
</head>
<body>

<!– background fader for popup–>
<div id=”back_fader”>
<div class=”popup_content” id=”popup”>
You will add your content here

</div>
</div>
<!– background fader for popup ends –>
<div id=”Header”>
<div class=”LiquidContainer HeaderContainer” style=”width: 933px;”>
<span id=”demo”>
</span>

</div>
</div>
<div class=”wrapper”>

<h1><a href=”javascript:void(0);” onclick=”popup();”>Open pop up</a></h1>
</div>
</body>
</html>