Issue
i am working on a php based password generator, i have a html form which has inputs for website name, Username and Passowrd. till now the user has to type the password so that it can get encrypted and stored , what i want is to have a button besides the password input form, which when clicked type the generated passoword in the password field.
this is the form i am using-
</head>
<body
<form class="form" method="post">
<!--Input Fields-->
<input type="text" name="website" placeholder="Website" required autocomplete="off"> <br>
<input type="text" name="username" placeholder="Username" required autocomplete="off"> <br>
<input type="password" name="password" placeholder="Password" required autocomplete="off"> <br>
<input type="submit" name="submit" value="SAVE" class="submit">
</form>
</div>
this is the function i want to get executed on press of the button-
function password_generate($chars)
{
$Uppercase="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
$Lowercase="abcdefghijklmnopqrstuvwxyz";
$Numbers="1234567890";
$Symbols="!@#$&*+_?%";
$data = $Uppercase.$Lowercase.$Numbers.$Symbols;
return substr(str_shuffle($data), 0, $chars);
}
Solution
Here is a simple example of a JavaScript function that (pseudo) randomly generates a password and sets the password field.
Because the password field does not show values by default, this example places the generated password in a <span> tag on the page. This is not ideal and is only for demonstration purposes. Ideally the password would only be in the password field and the user would toggle if the password is displayed or not. But because I do not know the full setup for your page and what you are doing, I am doing it this way in my demo.
function _RandomPassword(len) {
let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@#$&*+_?%",
suggestion = "";
for(let i = 0; i < len; i++) suggestion += chars.split("").sort((a, b) => Math.round(Math.random()*a.charCodeAt()) - Math.round(Math.random()*b.charCodeAt())).splice(-1).join("");
document.querySelector("#suggestion").textContent = suggestion;
document.querySelector("[name='password']").value = suggestion;
}<form class="form" method="post">
<!--Input Fields-->
<input type="text" name="website" placeholder="Website" required autocomplete="off"> <br>
<input type="text" name="username" placeholder="Username" required autocomplete="off"> <br>
<input type="password" name="password" placeholder="Password" required autocomplete="off"> <br>
<span id="suggestion"></span> <input type="button" value="*Suggest*" onclick="_RandomPassword(8)"> <br>
<input type="submit" name="submit" value="SAVE" class="submit">
</form>This password function takes 1 parameter (len for length of the password) and then converts your list of characters into an array, randomly sorts it, and takes the last character. It loops and does this for however long the password needs to be and then puts that value in the password field as well as in a <span> tag on the page.
Answered By - EssXTee
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.