How to create md5 hash generator in PHP and Ajax without form submit

md5 is a hash function that generates md5 hash of an input string. This is used for encoding process. Though it is not used as password encryption, it is widely used to store sensitive data using 128 bit hash value.

In this topic, we will see how we can generate md5 hash of a string using PHP and Ajax. A user can enter an input string and by hitting a button md5 hash value can be displayed.

Folders and Files

We will use a folder called 'md5' under 'xampp/htdocs'.

'css' folder is for custom stylesheet.
'js' folder is for our JavaScript file.

index.php is the main program and get_md5.php generates md5 hash and it is called by Ajax.

Create an input screen (index.php)

We will design a small screen which will have an input box. Users can enter the string for which md5 hash is to be generated. There will be an output box where generated md5 hash will be displayed. See below screenshot:

MD5 hash in PHP

Let's look at the code below:

index.php


<!DOCTYPE html>
<html lang="en">
<head>
  <title>MD5 Hash Generator</title>
  <meta charset = "utf-8">
  <meta name = "viewport" content="width=device-width, initial-scale=1">
  <link rel = "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link  rel = "stylesheet" href="css/style.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "js/md5.js"></script>
</head>
<body>
  <div class="container">
    <h2>Generate MD5 Hash</h2>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <h4>Enter the string below you want to generate md5 hash for:</h4>
          <textarea class="form-control" id ="inputStr" autofocus></textarea>
        </div>
        <div class="form-group text-center">
          <button class="btn btn-primary" onclick="genearte_md5()">Generate md5 hash</button>  
          <button class="btn btn-warning" onclick="clear_str()">Clear</button>
        </div>
      </div>
      <div class="col-md-6 hash-1">
        <div class="form-group">
          <h4>Generated md5 hash:</h4>
          <p id = "md5hash"></p>
        </div>
      </div>
  </div>
  </div>
</body>
</html>

We are calling generate_md5() JavaScript function on onclick event of the button. These functions are defined in md5.js file.

Write JavaScript/jQuery for Ajax Call (md5.js)

Let us now write the JavaScript function generate_md5(). We will make an Ajax request with the input value entered by the user. Response from the Ajax call will be displayed as the output. Let's see the below code:

md5.js


function genearte_md5() {
  var x = document.getElementById("inputStr").value;
  x = x.trim();
  if (x !="") {
   $.ajax({
          type:"post",
          data:"str="+x,
          url:"get_md5.php",
          success: function (response){
            $("#md5hash").html(response);
          }
  });
 }
 else alert("Please enter a string");
}

function clear_str() {
    $("#inputStr").val("");
    $("#md5hash").html("");
}

In the function generate_md5(), we are calling get_md5.php using Ajax with the input string. The other function clear_str() is simply removing the data from input textarea field and clearing the generated md5 hash.

Write PHP code to generate md5 hash (get_md5.php)

We will just take the value of input string which is sent by Ajax as parameter and then call md5() function on the input string. Then display it using echo statement.

get_md5.php


<?php
$str = $_POST['str'];
$md5hash = md5($str);
echo $md5hash;

This is very simple code. We are calling md5() PHP function on $str which is the input string and displaying it.

Add CSS (style.css)

Let us add below styles. We have already added style.css in index.php.

style.php


h2 {
	text-align: center;
	padding: 50px 50px;
}
h4{
	font-size: 17px;
	color:#1818c8;
	text-align: center;
}
textarea {
	height:100px !important;
	resize:none;
}
.hash-1{
 	padding-left: 20px;
}
p {
 padding-left:5px;
 height:100px;
 width:100%;
 border:solid 1px #d7bebe;
}

Test the Application

Make sure in your XAMPP control panel, services are running. Run localhost/md5 in the browser. You will see the page displayed.

md5 hash generator page in PHP

Enter some string in the left input box and click on "Generate md5 hash" button. You will see hash generated and displayed on the right side. I entered 123 and clicked the blue button. I got the output as below:

md5 hash in PHP

Hope you could develop and test it successfully.

Note

md5() hash is not recommended to use for password encryption. For training or testing purpose you may use it, but not in actual project. For password encryption you can use password_hash() and password_verify() function.
You can develop this without using Ajax also, in that case you might to submit the form.

Download Source Code

Download the source code by clicking on the download button below:

Conclusion

This was also an example of using Ajax without submitting a form. So, this gives you an idea about how you can use Ajax with PHP. In this case, we are generating md5 hash using Ajax in PHP. Hope it will be useful for you.