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

Question

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);
        }

If you are set on using PHP to generate the passwords, you will need to use AJAX to get the password from the PHP script and add it to the page. However, it honestly makes more sense to just use JavaScript to generate the password and add it to the field instead. — EssXTee
– EssXTee, Commented Aug 12, 2022 at 12:48
yes, i can use javascript if it gets the job done, can you please provide the code — Aashutosh Soni
– Aashutosh Soni, Commented Aug 12, 2022 at 14:33

EssXTee · Accepted Answer · 2022-08-12 15:07:26Z

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.

HP371 · Accepted Answer · 2022-08-16 12:01:39Z

2

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.

edited Aug 16, 2022 at 12:01

answered Aug 12, 2022 at 12:51

HP371

8501 gold badge11 silver badges25 bronze badges

1 Comment

Aashutosh Soni Over a year ago

thanks for your answer, i can use javascript too, no problem if it gets the job done. but for some reason, the code you provided here is not working for me, please review it , it will be so nice if you give me a single html file with both these code snippets combined , you can view the code i am using here --- replit.com/@AshTech1/fromstackoverflow#index.html

Aashutosh Soni · Accepted Answer · 2022-08-12 16:47:53Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related