Need to access data entered into a form using php and then send it to javascript all on the same page and without reloading?

Question

I have a user registration form (register.php), the user enters username, password and email. These then get sent to another php page (formValidate.php) for validation using ajax.

I would like to convert the password entered into the form to md5 hash using php, then pass this variable to javascript, so that javascript can pass this data on to formValidate.php

As far as I understand it, this should all happen without having to reload the register.php page since I also have javascript on this page which is sending the data entered to my formValidate.php page.

I am unsure how to go about doing this.

Answer 1

In order to accomplish this, you will have to use AJAX. In essence, there are two parts:

1) You need a PHP script that will accept a post variable for the password, will md5 hash it, and then echo it as output. Lets call this to_md5.php

2) Within your registration page, you need to intercept the form submission, have an ajax call that will submit the password to your to_md5.php script. You also need to have a callback function setup to finish form submission when you get the MD5 hashed password. Within the callback function, you can change the password value and submit the form.

There are probably better ways to do this, but hopefully it gives you a rough idea.

[EDIT]

That's the problem, I was advised not to use javascript to send the plain text password to a php page.

Ah, I see. Luckily there are a lot of crypto algorithms implemented in Javascript as well. One that comes to mind is CryptoJS hosted on Google Code.

The MD5 implementation looks something like this:

<script type="text/javascript" src="http://crypto-js.googlecode.com/files/2.5.3-crypto-md5.js"></script>

<script type="text/javascript">

   var digest = Crypto.MD5("MyP@ssw0rd");

   // Two different ways of creating the MD5 hash...
   var digestBytes = Crypto.MD5("MyP@ssw0rd", { asBytes: true });
   var digestString = Crypto.MD5("MyP@ssw0rd", { asString: true });

</script>