realtime display md5

[sfchun]

hello everyone,

i'm looking for a script which display in real time md5 calculation.

I already succed to do a simple form submit which return the result...
but i would rather prefer to use an input field, with an Ajax based script checking and showing the result caracter by carcter (in an other div i guess).

the purpuse of this is to avoid form and submit ...

thanks for your help ^^

[rangana]

md5.php:

<?php
$pswrd=$_POST['passwd'];
echo md5($pswrd);
?>

Index:

<script type="text/javascript">
function showMd5(url)
{
var xmlHttp;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
	var el=document.getElementById('md5');
	el.innerHTML=xmlHttp.responseText;
      }
    }

  xmlHttp.open("post",url,true);

  xmlHttp.send(null);
  }
</script>
<input type="password" name="passwd" onkeypress="showMd5('md5.php')">
<h2 style="display:inline;">MD5 val is: </h3><h3 id="md5" style="display:inline;">&nbsp;</h3>

Hope that helps.

[sfchun]

Thanks for your quick reply rangana !

But i think there is a little problem somewhere =P
the code is displaying only blank encoded string...
I mean , it does not update when i press a key

[rangana]

It was my mistake. You need to pass the value of the textbox too. Add highlighted:

<input type="password" name="passwd" onkeypress="showMd5('md5.php',this.value)">

...and change this part:

function showMd5(url)
.
.
.
xmlHttp.open("post",url,true);

to:

function showMd5(url,val)
.
.
.
xmlHttp.open("get",url+"?passwd="+val,true);

...and change md5.php to:

<?php
$pswrd=$_GET['passwd'];
echo md5($pswrd);
?>

See if it helps.

[sfchun]

once again thanks for your help =P
but i still have the same issue after updating code ^^;;

hope i miss nothing, i'll copy paste what i have.

index.htm

<script type="text/javascript">
function showMd5(url,val)
{
var xmlHttp;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
        var el=document.getElementById('md5');
        el.innerHTML=xmlHttp.responseText;
      }
    }

  xmlHttp.open("get",url+"?passwd="+val,true);

  xmlHttp.send(null);
  }
</script>
<input type="password" name="passwd" onkeypress="showMd5('md5.php',this.value)">
<h2 style="display:inline;">MD5 val is: </h3><br /><div id="md5" style="display:inline;">&nbsp;</div>

md5.php

<?php
$pswrd=$_POST['passwd'];
echo md5($pswrd);
?>

[rangana]

Replace highlighted with GET:

$pswrd=$_POST['passwd'];

[sfchun]

stupid me ... sorry =P

thanks a lot, it works great