Generate OTP using JavaScript

Hello Everyone, In this tutorial I am going to create javascript program to generate One Time Password also known as OTP.

OTP is used by all of the web apps and mobile apps these days.I am preparing program in javascript to create otp you can send it to user’s mobile or on their email is.

So, Lets start with the designing part as usual I am using Bootstrap for the designing and Jquery to use Javascript in easy way.

Let’s code in HTML :

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>OTP Generator</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 bg-success p-5 mx-auto mt-5">
<h1 class="text-center">OTP Generator</h1>
<hr/>
<label>Enter Mobile No</label>
<input type="number" class="form-control number" />
<input type="number" class="form-control mt-3 otp" placeholder="ENTER OTP"/>
<input type="button" class="btn btn-dark mt-3 generate" value="Send OTP"/>
<input type="button" class="btn btn-dark mt-3 check" value="Check"/>
</div>
</div>
</div>
</body>
</html>

After this our design is ready and looks as follow :

Generate OTP using JavaScript
Generate OTP using JavaScript

You can see in the upper design we see

Enter mobile no and enter otp no both options at the same time but we need them one by one.

and same for the buttons we need to show 1 button at a time so

I am going to hide input and button on document ready function.

 $(document).ready(function(){
$('.otp').hide();
$('.check').hide();

});

Now We need to make some javascript code to generate OTP and send it to where ever you want to.

<script>
function randomNumber(min, max) {
return Math.ceil(Math.random() * (max - min) + min);
}
var otp = '';
$(document).ready(function(){
$('.otp').hide();
$('.check').hide();
$('.generate').click(function(){
otp = randomNumber(1000,9999);
var number = $('.number').val();
$('.number').attr('disabled','disabled');
$('.otp').show();
$('.check').show();
$('.generate').hide();
alert(otp);
/// Code to send OTP
});
$('.check').click(function(){
var user_otp = $('.otp').val();
if(otp==user_otp){
alert('Succcess');
}else{
alert('Error');
}
});
});
</script>

In the above code I have made 1 function to generate otp and

leave blank space with the caption Code to send otp which can use API or AJAX to execute code.

After this code our output will looks like following image:

Generate OTP using JavaScript
Generate OTP using JavaScript

Now here is the final code for Generate OTP using JavaScript:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>OTP Generator</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function randomNumber(min, max) {
return Math.ceil(Math.random() * (max - min) + min);
}
var otp = '';
$(document).ready(function(){
$('.otp').hide();
$('.check').hide();
$('.generate').click(function(){
otp = randomNumber(1000,9999);
var number = $('.number').val();
$('.number').attr('disabled','disabled');
$('.otp').show();
$('.check').show();
$('.generate').hide();
alert(otp);
/// Code to send OTP
});
$('.check').click(function(){
var user_otp = $('.otp').val();
if(otp==user_otp){
alert('Succcess');
}else{
alert('Error');
}
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 bg-success p-5 mx-auto mt-5">
<h1 class="text-center">OTP Generator</h1>
<hr/>
<label>Enter Mobile No</label>
<input type="number" class="form-control number" />
<input type="number" class="form-control mt-3 otp" placeholder="ENTER OTP"/>
<input type="button" class="btn btn-dark mt-3 generate" value="Send OTP"/>
<input type="button" class="btn btn-dark mt-3 check" value="Check"/>
</div>
</div>
</div>
</body>
</html>

Thanks.

81 thoughts on “Generate OTP using JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. May I just say what a relief to find someone that genuinely knows what
    they are talking about over the internet.
    You definitely realize how to bring a problem to light
    and make it important. More and more people really need to check this out and understand
    this side of your story. I was surprised you aren’t more popular because you surely
    have the gift.

  2. Hey There. I found your blog using msn. This is a really well written article.
    I will be sure to bookmark it and return to read
    more of your useful info. Thanks for the post. I’ll definitely comeback.

  3. Terrific work! This is the type of info that should be shared around the internet. Shame on the search engines for not positioning this post higher! Come on over and visit my web site . Thanks =)

  4. Generally I don’t read post on blogs, but I wish to say that this write-up very compelled me
    to check out and do so! Your writing style has been surprised me.
    Thanks, quite great article.

  5. Hmm is anyone else experiencing problems with the pictures on this blog loading?
    I’m trying to figure out if its a problem on my end or if it’s the blog.

    Any responses would be greatly appreciated.

  6. Good post. I learn something totally new and challenging on sites I stumbleupon on a daily basis.
    It’s always helpful to read content from other writers and use something from
    other websites.

  7. I’m really enjoying the theme/design of your weblog. Do you ever run into any web
    browser compatibility problems? A handful of my blog readers have complained about my blog not operating correctly in Explorer but looks great in Opera.

    Do you have any tips to help fix this issue?

  8. I simply want to mention I am all new to blogging and definitely enjoyed this page. Probably I’m likely to bookmark your site . You absolutely come with awesome well written articles. With thanks for sharing your website.

  9. Hi there! Quick question that’s completely off topic.
    Do you know how to make your site mobile friendly? My
    site looks weird when browsing from my iphone 4.
    I’m trying to find a theme or plugin that might be able to correct this problem.
    If you have any suggestions, please share. Appreciate
    it!

  10. Hello! This is my first comment here so I just wanted to give
    a quick shout out and tell you I genuinely enjoy reading through your articles.

    Can you suggest any other blogs/websites/forums
    that deal with the same topics? Appreciate it!

  11. Excellent post. I used to be checking constantly this weblog
    and I am impressed! Extremely useful info specially the ultimate part :
    ) I maintain such information a lot. I used to be looking for
    this certain information for a long time. Thanks and best of luck.

  12. I do trust all the ideas you’ve introduced in your post.
    They are really convincing and can certainly work.

    Still, the posts are very brief for beginners. Could you please lengthen them a bit from subsequent time?
    Thank you for the post.

  13. Great blog! Is your theme custom made or did you download it from somewhere?
    A design like yours with a few simple adjustements would really make my
    blog jump out. Please let me know where you got your design. Thanks

  14. An impressive share! I’ve just forwarded this onto a co-worker who was
    doing a little homework on this. And he actually bought me dinner simply because I discovered it for him…
    lol. So allow me to reword this…. Thanks for the
    meal!! But yeah, thanx for spending some time to discuss this matter here on your internet site.

  15. Its like you read my mind! You appear to know a lot about this,
    like you wrote the book in it or something. I think that you could do
    with a few pics to drive the message home a little
    bit, but other than that, this is great blog. A fantastic read.
    I will definitely be back.

  16. Magnificent goods from you, man. I’ve keep in mind your stuff prior to and you’re just too fantastic.
    I really like what you have bought here, certainly like what you’re stating and the best way
    through which you say it. You make it enjoyable and you still take care of to keep it smart.
    I cant wait to learn far more from you. That is actually a great site.

  17. Hi there! I know this is somewhat off topic but I was wondering which blog platform are
    you using for this website? I’m getting tired of WordPress because I’ve had problems with hackers and I’m looking
    at alternatives for another platform. I would be awesome if
    you could point me in the direction of a good platform.

  18. Having read this I believed it was really informative.
    I appreciate you taking the time and effort to put this article together.
    I once again find myself personally spending way too much time both reading and
    commenting. But so what, it was still worthwhile!

  19. Hey just wanted to give you a quick heads up and let you
    know a few of the pictures aren’t loading properly.
    I’m not sure why but I think its a linking issue.
    I’ve tried it in two different browsers and both show the same outcome.

  20. hello there and thank you for your info ? I have certainly picked up anything new from right here. I did however expertise some technical issues using this website, as I experienced to reload the site lots of times previous to I could get it to load correctly. I had been wondering if your hosting is OK? Not that I’m complaining, but slow loading instances times will sometimes affect your placement in google and can damage your high-quality score if advertising and marketing with Adwords. Well I?m adding this RSS to my e-mail and can look out for a lot more of your respective interesting content. Ensure that you update this again very soon..

  21. Hello just wanted to give you a quick heads up. The text in your post seem to be running off the screen in Safari. I’m not sure if this is a formatting issue or something to do with web browser compatibility but I figured I’d post to let you know. The style and design look great though! Hope you get the problem solved soon. Cheers

  22. We are a gaggle of volunteers and opening a new scheme in our
    community. Your website offered us with useful information to work
    on. You have done an impressive process and our whole community shall be thankful to you.

  23. I like the helpful info you provide in your articles. I’ll bookmark your weblog and check again here regularly. I’m quite sure I will learn many new stuff right here! Best of luck for the next!

  24. Unquestionably consider that which you said. Your favourite reason seemed to be on the web the simplest factor to take note of.
    I say to you, I certainly get annoyed whilst other folks think about worries that they just don’t recognise
    about. You controlled to hit the nail upon the top as well as outlined out the whole thing with no
    need side-effects , other folks can take a signal.
    Will probably be again to get more. Thanks

  25. My partner and I stumbled over here different page and thought I might
    check things out. I like what I see so now i am following you.
    Look forward to looking over your web page yet again.

  26. Aw, this was a really nice post. In thought I wish to put in writing like this additionally – taking time and precise effort to make a very good article… however what can I say… I procrastinate alot and certainly not seem to get something done.

  27. The problem is, in their eyes, it’s never perfect (in reality no item ever is).
    on Bing. Plus my own individual websites are Keep busy with
    worthwhile activities to distract your self from your bad practices.

    Do something that you find productive and enjoyable.

  28. Hmm it looks like your website ate my first comment (it was super long) so
    I guess I’ll just sum it up what I submitted and say, I’m
    thoroughly enjoying your blog. I as well am an aspiring
    blog blogger but I’m still new to the whole thing.
    Do you have any helpful hints for inexperienced blog writers?

    I’d really appreciate it.

  29. You can definitely see your expertise within the work
    you write. The sector hopes for more passionate writers
    such as you who are not afraid to mention how they believe.
    All the time go after your heart.

  30. I was curious if you ever considered changing
    the page layout of your site? Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of content so people could connect with it better.
    Youve got an awful lot of text for only having 1 or two pictures.
    Maybe you could space it out better?

  31. Sweet blog! I found it while searching on Yahoo News.
    Do you have any tips on how to get listed in Yahoo News?
    I’ve been trying for a while but I never seem to get there!
    Thank you

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.