how to print a specific text in html form on click of a button PHP?

user_14732606 0
Viewed 46

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);
        }
forms css html php javascript
3 Answers

Using PHP and JavaScript you can achieve this easily.

PHP code: 

<body 
        <form class="form" name="myform" 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="button" class="button" value="Generate" onClick="randomPassword(10);" tabindex="2"> <br>
            <input type="submit" name="submit" value="SAVE" class="submit">
        </form>
    </div>

JS Code:

<script>
function randomPassword(length) {
    var chars = "abcdefghijklmnopqrstuvwxyz!@#$%^&*()-+<>ABCDEFGHIJKLMNOP1234567890";
    var pass = "";
    for (var x = 0; x < length; x++) {
        var i = Math.floor(Math.random() * chars.length);
        pass += chars.charAt(i);
    }
    myform.password.value = pass;
}
</script>

Hope this is working for you.

It's generate same random password as you mention in your PHP function.

user_47816960

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.

user_23396190

The correct answer and code snippet to get automatically generated passwords in the form field on press of a html button is here-

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Answer by @Ashutosh_7i</title>
</head>

<body>
        <form class="form" method="post">
            <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>

<script>
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;
}
</script>

</form>
</body>
</html>
user_147326060
Related