CODEWITHSUNDEEP
phpjavascripthtmlinput
Fliptab
Fliptab

Reputation: 31

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

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

Upvotes: 1

Views: 2876

Answers (4)

AmazingDreams
AmazingDreams

Reputation: 3204

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

Upvotes: 3

Husman
Husman

Reputation: 6909

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

Upvotes: 1

Richard A.
Richard A.

Reputation: 1157

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):

  1. Have the GWW button perform a full-page refresh when clicked. Not desirable.

  2. 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.

  3. 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 :)

Upvotes: 0

Husman
Husman

Reputation: 6909

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.

Upvotes: 0

Related Questions