Archive for ‘JavaScript’

June 28th, 2010

jQuery Tools Form + PHP mail() (PHP 4, PHP 5)

jquery php email form

jquery php email form

This example shows how to integrate php mail which is is used to send emails from inside a script with jQuery Tools form which is a collection of essential form building tools. Validation, range- and date inputs for humans. Those two make a great combination and are easy to implement to any website. Here is the example. The code speaks for itself so there is not much commenting on it.

Standalone example can be found HERE.
Source code HERE.

PHP:


if(isset($_POST['submit'])){
  $to      = $_POST['email'];
  $subject = "You've got mail";
  $message = "*** eMail: ".$_POST['email']."*** Website: ".$_POST['url']."*** Name: ".$_POST['name']."*** Age; ".$_POST['age'];
  $headers = 'From: webmaster@example.com' . "\r\n" .
      'Reply-To: webmaster@example.com' . "\r\n" .
      'X-Mailer: PHP/' . phpversion();

  mail($to, $subject, $message, $headers);
  
  echo "Email to ".$_POST['email']." was sent successfuly! <br />";
}

HTML:


<form id="myform" method="post">

   <fieldset>
      <h3>PHP + JQuery Tools Sample email form</h3>
      
      <p> Enter bad values and then press the email button. </p>
      
      <p>
         <label>email *</label>
         <input type="email" name="email" required="required" />
      </p>
      <p>
         <label>website *</label>
         <input type="url" name="url" required="required" />
      </p>
      <p>
         <label>name *</label>
         <input type="text" name="name" pattern="[a-zA-Z ]{5,}" maxlength="30" />
      </p>
      <p>
         <label>age</label>
         <input type="number" name="age" size="4" min="5" max="50" />
      </p>
      <input type='hidden' name='submit' />
      
      <button type="submit">Email form</button>
      <button type="reset">Reset</button>
   </fieldset>

</form>


<script>
$("#myform").validator();
</script>

January 2nd, 2010

JavaScript How To Create A Countdown To The End Of The World

This is how you can Create A Countdown To The End Of The World. This could be used to create a simple self updating countdown to just about anything (birthdays, holidays, …). All you have to do is paste the following code inside the of your page and you got yourself a counter. All you have to do is change the target date. Here is a demo of a Countdown To The End Of The World

[DEMO LINK]

[SOURCE CODE]


<script type="text/javascript">
/*
Author: Robert Hashemian
http://www.hashemian.com/
*/

TargetDate = "12/21/2012 00:00 AM";
BackColor = "lightblue";
ForeColor = "red";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "It is finally here!";

function calcage(secs, num1, num2) {
  s = ((Math.floor(secs/num1))%num2).toString();
  if (LeadingZero &#038;& s.length < 2)
    s = "0" + s;
  return "<b>" + s + "</b>";
}

function CountBack(secs) {
  if (secs < 0) {
    document.getElementById("cntdwn").innerHTML = FinishMessage;
    return;
  }
  DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
  DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
  DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
  DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));

  document.getElementById("cntdwn").innerHTML = DisplayStr;
  if (CountActive)
    setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}

function putspan(backcolor, forecolor) {
document.write("<span id='cntdwn' style="font-size:48px; background-color:" + backcolor +                  "; color:" + forecolor + "" mce_style="font-size:48px; background-color:" + backcolor +                  "; color:" + forecolor + ""></span>");
}

if (typeof(BackColor)=="undefined")
  BackColor = "white";
if (typeof(ForeColor)=="undefined")
  ForeColor= "black";
if (typeof(TargetDate)=="undefined")
  TargetDate = "12/31/2020 5:00 AM";
if (typeof(DisplayFormat)=="undefined")
  DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
  CountActive = true;
if (typeof(FinishMessage)=="undefined")
  FinishMessage = "";
if (typeof(CountStepper)!="number")
  CountStepper = -1;
if (typeof(LeadingZero)=="undefined")
  LeadingZero = true;

CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
  CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
  ddiff = new Date(dnow-dthen);
else
  ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);
</script>

December 19th, 2009

Best Coding And Debugging Guide

* Write small simple programs to test constructs you haven’t used before or about which you feel shaky. It’s easier to locate your misunderstanding in a short program than in a long one.

* When you’re debugging a program, pay attention only to the first error. The others may simply be side-effects of that first error.

* When you’re writing a program, keep the specification in front of you. How else can you be sure that you’re solving the correct problem?

* Don’t attempt to write out all the code at once and then try to debug it.

* Always build on existing code which compiles and runs.

* Grow programs incrementally. If you extend a working program and it doesn’t work anymore, then you can localize the error.

* Keep working checkpoint programs as you move along. If you seriously wound your code, you can retreat to a prior version which worked.

* Implement a large program in well-defined steps. Examine the problem and determine how you can implement the required capabilities in an incremental manner.

* Learn how to document errors:

· they must be repeatable;

· the code should be short;

· collect hardcopy of the program, the compile, and the test run.

* Human memory is fallible, and computers are unforgiving, so no one will believe you if you don’t have documentation. Experts can’t help you if you come in with a folktale — “I tried that, but it gave me an error.” You must be able to replicate the error.

* If you encounter an error that you can’t understand, then keep the code which generated the error and find out what was wrong. You may produce a working program by trying another approach, but if you don’t know why you got the error, then there’s a gap in your knowledge.

Write small simple programs to test constructs you haven’t used before or about which
you feel shaky. It’s easier to locate your misunderstanding in a short program than in a
long one.
When you’re debugging a program, pay attention only to the first error. The others may
simply be side-effects of that first error.
When you’re writing a program, keep the specification in front of you. How else can you
be sure that you’re solving the correct problem?
Don’t attempt to write out all the code at once and then try to debug it.
Always build on existing code which compiles and runs.
Grow programs incrementally. If you extend a working program and it doesn’t work
anymore, then you can localize the error.
Keep working checkpoint programs as you move along. If you seriously wound your
code, you can retreat to a prior version which worked.
Implement a large program in well-defined steps. Examine the problem and determine
how you can implement the required capabilities in an incremental manner.
Learn how to document errors:
· they must be repeatable;
· the code should be short;
· collect hardcopy of the program, the compile, and the test run.
Human memory is fallible, and computers are unforgiving, so no one will believe you if
you don’t have documentation. Experts can’t help you if you come in with a folktale —
“I tried that, but it gave me an error.” You must be able to replicate the error.
If you encounter an error that you can’t understand, then keep the code which generated
the error and find out what was wrong. You may produce a working program by trying
another approach, but if you don’t know why you got the error, then there’s a gap in your
knowledge of Java.
November 21st, 2009

PHP + JavaScript System Info >> Simple script to provide information about the site visitor

This is a simple script that provides information about the site visitor.
* What version of JavaScript the vistor browser supports
* Visitor IP Address
* Visitor Hostmask
DEMO at erunways.com/ip

PHP JAVASCRIPT SYSTEM INFO

PHP JAVASCRIPT SYSTEM INFO

November 16th, 2009

How to use SMARTY variables in JavaScript

This is a simple example of how to use Smarty variables in JavaScript.


{literal}

     &lt;script&gt;

          $(window).load(function() {  var sample='/sample.php?v=<strong>{/literal}{$smarty_variable}{literal}</strong>';  });

    &lt;/script&gt;

{/literal}