Displaying text in input field when a button is clicked(php/html)

Question

I need some help with the following; I want to display a newly generated password(function in php)when the button "gww" is clicked inside another input field. Could someone shed some light?

<td><input type="button" value="Generate" name="gww"></td>
<td><input type="text" id="ww"></td>

<script type="text/javascript">
function password()
{
var elem = document.getElementById("ww");
elem.value = "<? echo random_Password(); ?>";
}
</script>

function random_Password($length = 8)
{
//empty password string
$password = "";


//Possible characters
$karakters = "123456789abcdefghijklmnpqrstuvwxyz";

$maxlength = strlen($karakters);
if($length > $maxlength)
{
    $length = $maxlength;
}
$i = 0;
while($i < $length)
{
    $char = substr($karakters, mt_rand(0, $maxlength-1), 1);
    if(!strstr($password, $char))
    {
        $password .= $char;
        $i++;
    }
}
return $password;
}

You cannot mix PHP and HTML/Javascript like this. PHP is run server side, HTML/Javascript client side. To get a PHP-generated password in HTML/Javascript you'll need a technology like AJAX. — Bart Friederichs
– Bart Friederichs, Commented Feb 13, 2013 at 9:36
It is not working. It's currently always displaying the password, not when I click the button. — Fliptab
– Fliptab, Commented Feb 13, 2013 at 9:37

AmazingDreams · Accepted Answer · 2013-03-05 11:42:25Z

3

I suspect you want a new password to be shown whenever you click the button. You have to use AJAX for this.

So you have your javascript function:

function generatePassword()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
       // code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
    }
    else
   {
       // code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=function()
   {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.document.getElementById("ww").value = xmlhttp.responseText;
    }
  }
   xmlhttp.open("GET","http://www.example.com/generatepassword.php",true);
   xmlhttp.send();
}

Your HTML should be

<input type="button" value="Generate password" onClick="generatePassword()">

generatePassword.php:

<?php
echo random_Password();

function random_Password($length = 8)
{
  //your function here ;
}
?>

edited Mar 5, 2013 at 11:42

answered Feb 13, 2013 at 9:39

AmazingDreams

3,2342 gold badges24 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Husman Over a year ago

Beat me to it. I was about to comment that PHP is serverside so the call to random_password happens once in the OP's posted code. Ajax seemst o be the best way to do it, or to create a Javascript function to generate a random password.

AmazingDreams Over a year ago

Yeah, wanted to add that, you beat me to it lol :P But then your password generation mechanism won't be secret!!!! :O

Husman Over a year ago

It doesn't have to be secret, not if it generates a password based on random things like browser locale + time of day, mouse movement, key's typed etc. Anyone can copy/paste the function, but they wont generate the same password twice (not in a reasonable amount of time anyway). Plus I should add, passwords being sent via Ajax (and in cleartext) are not secure. But it solves the OP's problem and is reasonably usable. To get true security you would want encryption to happen at the client and server before anything is sent over the wires.

AmazingDreams Over a year ago

And if you store your passwords in a secure way (some hashes plus unique salts) it won't matter how passwords are being generated.

Fliptab Over a year ago

I am still stuck, got the following code but it's still not working.. <script type="text/javascript"> function generate_Password() { var xmlHttp = new XMLHttpRequest(); xmlHttp.open("GET", "/gpass.php"); xmlHttp.send(null); updateText(xmlHttp.responseText); } function updateText(text) { var elem = document.getElementById("ww"); elem.value = text; } </script>

|

Husman · Accepted Answer · 2013-02-13 10:45:28Z

1

This should work as is.

<td><input type="button" value="Generate" name="gww" onClick="generatePassword()"></td>
<td><input type="text" id="ww"></td>

<script type="text/javascript">
function generatePassword()
{
  var xmlhttp;
  if (window.XMLHttpRequest)
  {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.document.getElementById("ww").value = xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gpass.php",true);
xmlhttp.send();
}
</script>

I take it you already have gpass.php as:

<?php
echo random_Password();

function random_Password($length = 8)
{
  //your function here ;
}
?>

edited Feb 13, 2013 at 10:45

answered Feb 13, 2013 at 10:15

Husman

6,93910 gold badges32 silver badges48 bronze badges

4 Comments

Husman Over a year ago

Can you open up your browser and just browse to your gpass.php file by url. What happens? what do you see on your screen?

AmazingDreams Over a year ago

The onClick is in an annoyingly weird place :P

Fliptab Over a year ago

Thanks for the help guys but I managed to fix it! You guys were talking about a continueing renewing generated password but my goal was to only generate once which luckily works now thanks to your help @Husman & AmazingDreams =D

Husman Over a year ago

No worries Fliptab. Fixed the onclick, not that it matters anymore @AmazingDreams

Husman · Accepted Answer · 2013-02-13 09:43:03Z

0

PHP is serverside, so your call to

echo random_Password();

only happens on page load, and it happens once. Create the function in javascript and have an onClick attribute for the button. Or use Ajax as mentioned by someone else in these comments.

answered Feb 13, 2013 at 9:43

Husman

6,93910 gold badges32 silver badges48 bronze badges

Comments

Richard A. · Accepted Answer · 2013-02-13 09:44:01Z

The problem you're having is that the following code only runs once:

var elem = document.getElementById("ww");
elem.value = "<? echo random_Password(); ?>";

So, suppose your random_Password() function (totally implausibly) returned the value 12345678, this value is held until the page is manually refreshed. With out a refresh, clicking the GWW button will set the WW field to 12345678 every time.

You have a few different options here (easiest to hardest):

Have the GWW button perform a full-page refresh when clicked. Not desirable.
Convert your random_Password() function into JavaScript code and execute it in the client. Very straightforward, but it reveals to hackers how passwords are being generated, and as such is not secure.
Use AJAX. Move your random_Password() function into it's own file, random_password.php and load the "page" (i.e. an 8-character string) into the text field's val.

I would opt for Option 3 in 99% of cases. Tutorial here: http://www.w3schools.com/php/php_ajax_php.asp

Hope that helps :)

Collectives™ on Stack Overflow

Displaying text in input field when a button is clicked(php/html)

4 Answers 4

13 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

13 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related