Translate

Monday 30 September 2013

By using JQuery to Post the response to Server

Screenshot:
                                        
index:
<div id="whole">      
    <div>First Name: <input type="text" id="first" value="creatersite"></div> <br />  
    <div>Last Name: <input type="text" id="last" value="Web Developer"></div> <br />  
    <div align="center"><input type="button" value="submit" onClick="doAjaxPost()"></div>  
      </div>
Script:
<script type="text/javascript" src="jquery-1.4.2.js"></script>  
<script>  
    function doAjaxPost() {  
     // get the form values  
     var field_a = $('#first').val();  
     var field_b = $('#last').val();  
      
     $.ajax({  
       type: "POST",  
       url: "serverscript.php",  
       data: "firstname="+field_a+"&lastname="+field_b,  
       success: function(resp){  
         // we have the response  
         alert("Server said:\n '" + resp + "'");  
       },  
       error: function(e){  
         alert('Error: ' + e);  
       }  
     });  
    }  
    </script> 

Saturday 28 September 2013

Tab Concept using Ajax

Screenshot:
                             

index.php:

<body>
<ul id="countrytabs" class="shadetabs">
<li><a href="home1.htm" rel="countrycontainer" class="selected">Tab 1</a></li>
<li><a href="home2.htm" rel="countrycontainer" id="favorite">Tab 2</a></li>
<li><a href="home3.htm" rel="countrycontainer">Tab 3</a></li>
<li><a href="home4.htm" rel="countrycontainer">Tab 4</a></li>
</ul>

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px; background-color:#000; color:#FFF;">
</div>
<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>
</body>
Downloads:script.js,style.css

Tuesday 24 September 2013

Characters change in upper&lower Case using PHP

Screenshot:
             


 Display:
                
 
index.php:

<body>
<form id="form1" name="form1" method="post" action="">
  <table width="200" border="1" cellspacing="0" cellpadding="5" id="tbl">
    <tr>
      <th>Characters Change in PHP</th>
    </tr>
    <tr>
      <td><label for="name">Name</label>
      <input type="text" name="name" id="name" /></td>
    </tr>
  
    <tr>
      <td align="center"><input type="submit" name="submit" id="submit" 
      value="Submit" /></td>
    </tr>
  </table>
</form>
</body>

Coding:

<?PHP
if (isset($_POST['submit'])) 
{

$full_name = $_POST['name'];
$full_name = ucwords( $full_name );
$change_to_lowercase = "CHANGE THIS";
$change_to_lowercase = strtolower($full_name);

$change_to_uppercase = "change this";
$change_to_uppercase = strtoupper($full_name);
}
?>
Apply After Closed html tag
<?php
echo"$full_name ";

echo"$full_sentence";

echo"$change_to_lowercase";

echo"$change_to_uppercase";

?>

Monday 23 September 2013

Multiplication Tables in PHP Coding

ScreenShot:
          

Display:

index.php:

<body>
<form id="form1" name="form1" method="post" action="">
  <table width="400" border="1" cellspacing="0" cellpadding="5" id="tbl">
    <tr>
      <td width="144"><label for="start">Multiply From</label></td>
      <td width="330"><input type="text" name="start" id="start" /></td>
    </tr>
    <tr>
      <td><label for="end">Multiplt To</label></td>
      <td><input type="text" name="end" id="end" /></td>
    </tr>
    <tr>
      <td><label for="mult">Multiply By</label></td>
      <td><input type="text" name="mult" id="mult" /></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" name="submit" id="submit" value="Submit" /></td>
    </tr>
  </table>
</form>
</body>

PHP Coding:

<?PHP

$times = 2;

if (isset($_POST['submit'])) {

$start = $_POST['start'];
$end = $_POST['end'];
$times = $_POST['mult'];

for($start; $start <= $end; $start++) {

$answer = $start * $times;
print $start . " multiplied by " . $times . " = " . $answer . "<BR>";

}

}

?>

Sunday 22 September 2013

Change Password using Javascript

index.php:


<form name="form1"  method="post" onsubmit="return checkPasswordMatch();" >
<ul>
<li>
    <label for="usermail">Email</label>
    <input name="usermail" size="40"  required="" type="email" />
</li>

<li>
    <label for="password">Password</label>
  <input type="password"  id="txtNewPassword" size="40" required="required" autocomplete="off" name="password"></li>
                  
<li>
     <label for="password">Re-Password</label>
      <input type="password"  autocomplete="off" size="40" id="txtConfirmPassword" required="required"  name="password2">
</li>
                    
   <p class="registrationFormAlert" style="color:#F00; font-size:16px; margin:3px;" id="divCheckPasswordMatch">
</p>

<p align="center"><input type="submit"   value="Sign up"  name="go"></p>


</ul>
</form>

Script:


function checkPasswordMatch() {
    var password = $("#txtNewPassword").val();
    var confirmPassword = $("#txtConfirmPassword").val();

    if (password != confirmPassword)
    {
     $("#divCheckPasswordMatch").html("Passwords do not match!  Try Again ") 
     document.oo.password2.focus();
     return false;
    }
        else
        {
    $("#divCheckPasswordMatch").html("Passwords match. GOOD");
    
        }
}

Thursday 19 September 2013

Create Folders in Bookmarks

index.php:
<body>
<p><a href="javascript:void(0)" onClick="return BookmarkApp.addBookmark(this)"> 
bookmark me</a></p>
 <br><br><br>
 </body>

Download js:Script

Current Timing By Using Javascript

Screenshot:
        
                                                     

index.php:


</head>
<body>
  <div class="datewidget">  
  <p ><span id=curTime></span></p>
  </div>
</body>

Style.css:


<style>
.datewidget 
{ font-size: 11px; 
    color: #999; 
    padding: 5px 10px;
    width:100px;
    border:1px solid #CCC;
}
</style>

script:


<script type="text/javascript">
function DisplayTime(){
if (!document.all && !document.getElementById)
return
timeElement=document.getElementById? document.getElementById("curTime"): document.all.tick2
var CurrentDate=new Date()
var hours=CurrentDate.getHours()
var minutes=CurrentDate.getMinutes()
var seconds=CurrentDate.getSeconds()
var DayNight="PM"
if (hours<12) DayNight="AM";
if (hours>12) hours=hours-12;
if (hours==0) hours=12;
if (minutes<=9) minutes="0"+minutes;
if (seconds<=9) seconds="0"+seconds;
var currentTime=hours+":"+minutes+":"+seconds+" "+DayNight;
timeElement.innerHTML="<font style='font-family:verdana, arial,tahoma;font-size:12px;color:#E25984; font-weight:bold;'>"+currentTime+"</b>"
setTimeout("DisplayTime()",1000)
}
window.onload=DisplayTime
</script>