CODEWITHSUNDEEP
javascriptphphtmltextboxonclick
Ruther Melchor
Ruther Melchor

Reputation: 69

How to populate textboxes upon button click?

I want to create a system that needs certain textboxes populated with the current time and some with the current data stored on $_SESSION["username"]; upon clicking a button.

I know how to get the time stamp and the data on $_SESSION["username"];, All I need is the steps on how to populate textboxes with these data.

Steps, modules or anything that can lead me to the right direction is greatly appreciated, I would like to request to make it as simple as possible for me to able to understand it thoroughly.

Here's a code that I test, I got the time inside the textbox. But what I want is first the textbox to be blank then upon clicking of a button or the textbox itself, would populate it with the current time./$_SESSION["username"]`;.

<html>
<body>

<?php 
 echo   date("Y/m/d");
 echo   "<br>";

 $time= date("h:i:s A", strtotime("now"-8));

 echo   "<input type=textfield name=time value='$time' size=9>";
?>

</body>
</html>

Upvotes: 1

Views: 3375

Answers (3)

Nateowami
Nateowami

Reputation: 1036

Let's assume for the sake of simplicity that you just have on textbox and one button:

<input type="textfield" id="textbox" value='' size=9>
<input type="button" value="Click" onClick="document.getElementById('textbox').value='$time'">

The same would go for any other textbox/button combination.

You just have to set the onClick property of the button to do execute some JavaScript. In this case, document.getElementById('textbox').value='$time'. The use of single quotes is important, or we'll be ending the onClick property.

We use document.getElementById('textbox') to find the text field, which has that ID. Then we just tack on .value='$time'.

Upvotes: 1

M I
M I

Reputation: 3682

You can do it using Ajax. first you need to include jquery in your page.

then on click on button (id = btn) send an ajax call to info.php. In php file return Json encoded data and on success in Ajax success function decode json data and update the values of both text boxes.(give ids to both text boxes)

Following is the code

$(function(){
   //button click function
    $( "#btn" ).on( "click", function() {
         $.ajax({ 
           type: 'GET', 
           url: 'info.php', 
           data: { variable: 'value' }, 
           dataType: 'json',
           success: function(data) { 
            data = jQuery.parseJSON(data);
            $("#username").val(data.username);
            $("#timestamp").val(data.timestamp);
           }   
         }); 

     });
});

In your php script echo you session username and current timestamp session_start();

$data = array('username' => $_SESSION['username'], 'timestamp' => date('Y-m-d h:i:s'));

echo json_encode($data);

This should do the trick or at least will guide you how you can do this task

Upvotes: 0

danikaze
danikaze

Reputation: 1654

There are several approaches, but "when clicking a button" involves javascript to bind a function to the button to use the data when clicked.

If you have the $_SESSION data available when loading the page, you just can store that data in a javascript variable to be used later... something like this

echo "var data = " . json_encode($_SESSION["data"]);

Other approach is dynamically get that data, if you don't have it available at the start. So you can make an AJAX request, get the data and then use it.

Since you are not saying if you are using vanilla javascript, jQuery or any other library I just can help you with the way of do it, which should be enough anyways.

Upvotes: 0

Related Questions