Please help me to integrate JavaScript to PHP code

Copy to clipboard

[Nymo]

Please help me to integrate JavaScript to PHP code. I have JavaScript which copy text to clipboard. I integrated it to PHP code but it doesn’t works. Where is a mistake?

<SCRIPT LANGUAGE="JavaScript">

function ClipBoard()
{
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
}
</SCRIPT>
<?php

$page_title = 'View the Current Users';
include ('./includes/header.html');

// Page header.
echo '<h1 id="mainhead">Registered Users</h1>';

require_once ('../mysql_connect.php'); // Connect to the db.

// Number of records to show per page:
$display = 400;

// Determine how many pages there are.
if (isset($_GET['np'])) { // Already been determined.

$num_pages = $_GET['np'];

} else { // Need to determine.

// Count the number of records
$query = "SELECT COUNT(*) FROM users ORDER BY registration_date ASC";
$result = mysql_query ($query);
$row = mysql_fetch_array ($result, MYSQL_NUM);
$num_records = $row[0];

// Calculate the number of pages.
if ($num_records > $display) { // More than 1 page.
$num_pages = ceil ($num_records/$display);
} else {
$num_pages = 1;
}

} // End of np IF.

// Determine where in the database to start returning results.
if (isset($_GET['s'])) {
$start = $_GET['s'];
} else {
$start = 0;
}

// Make the query.
$query = "SELECT mob_number, email, post_code, DATE_FORMAT(registration_date, '%M %d, %Y') AS dr, user_id FROM users ORDER BY registration_date ASC LIMIT $start, $display";
$result = mysql_query ($query); // Run the query.


// IN THIS COLUMN MUST BE „Copy“ BUTTON
echo '<table align="center" cellspacing="0" cellpadding="5">
<tr>
<td align="center"><b>Delete</b></td>
<td align="center"><b>Mobile number<BUTTON onClick="ClipBoard();">Copy</BUTTON>
</b></td>
<td align="center"><b>Email</b></td>
<td align="center"><b>Post code</b></td>
<td align="center"><b>Date Registered</b></td>
</tr>
';



// Fetch and print all the records.
$bg = '#eeeeee'; // Set the background color.
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$bg = ($bg=='#eeeeee' ? '#ffffff' : '#eeeeee'); // Switch the background color.

echo '<tr bgcolor="' . $bg . '">
<td align="center"><a href="delete_user.php?id=' . $row['user_id'] . '">Delete</a></td>
<td align="center"><SPAN ID="copytext">' . $row['mob_number'] . '</SPAN><TEXTAREA ID="holdtext" STYLE="display:none;"></TEXTAREA>
</td>
<td align="center">' . $row['email'] . '</td>
<td align="center">' . $row['post_code'] . '</td>
<td align="center">' . $row['dr'] . '</td>
</tr>
';
}

echo '</table>';

mysql_free_result ($result); // Free up the resources.

mysql_close(); // Close the database connection.

// Make the links to other pages, if necessary.
if ($num_pages > 1) {

echo '<br /><p>';
// Determine what page the script is on.
$current_page = ($start/$display) + 1;

// If it's not the first page, make a Previous button.
if ($current_page != 1) {
echo '<a href="view_users.php?s=' . ($start - $display) . '&np=' . $num_pages . '">Previous</a> ';
}

// Make all the numbered pages.
for ($i = 1; $i <= $num_pages; $i++) {
if ($i != $current_page) {
echo '<a href="view_users.php?s=' . (($display * ($i - 1))) . '&np=' . $num_pages . '">' . $i . '</a> ';
} else {
echo $i . ' ';
}
}

// If it's not the last page, make a Next button.
if ($current_page != $num_pages) {
echo '<a href="view_users.php?s=' . ($start + $display) . '&np=' . $num_pages . '">Next</a>';
}

echo '</p>';

} // End of links section.

include ('./includes/footer.html'); // Include the HTML footer.
?>

[httpwebwitch]

Never mind what all your PHP is doing; it's irrelevant - you didn't need to paste all that in here.

The JavaScript function ClipBoard() has within it a variable named "copytext". It is supposed to refer to an HTML element. But the way you have it written, copytext is undefined.

I'd suggest you create a simple page with a few elements on it, and experiment with that JavaScript function until you understand how it works.

[daveVk]

function ClipBoard()
{
var holdtext = document.getElementById('holdtext');
var copytext = document.getElementById('copytext');
holdtext.innerText = copytext.innerText;
var Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
}

[Nymo]

daveVK, Thank you.You help me to find out problem. :)

[Nymo]

daveVK, Your script work very nice but it copy only one record from first row of column. PHP program have to include many records which would be write in the different row of column.
Can you help me to do script which copy all records from all rows of column?
You can look: <snip>

[edited by: DrDoc at 4:16 pm (utc) on July 13, 2009]
[edit reason] No personal URIs, please. See TOS and Forum Charter. [/edit]

[mapleleaf]

your JavaScript function should be placed between the opening and closing head tags NOT before you declare the doctype

[daveVk]

maybe number rows, with id's "holdtext".$n and same for copytext. Change js to loop thru all id's. ?

[Nymo]

daveVK, What does it mean?

[daveVk]

function ClipBoard()
{
var n = 1;
while ( document.getElementById('holdtext'+n) ) {
var holdtext = document.getElementById('holdtext'+n);
var copytext = document.getElementById('copytext'+n);
holdtext.innerText = copytext.innerText;
var Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
n++;
}
}

...

$n=1;
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$bg = ($bg=='#eeeeee' ? '#ffffff' : '#eeeeee'); // Switch the background color.

echo '<tr bgcolor="' . $bg . '">
<td align="center"><a href="delete_user.php?id=' . $row['user_id'] . '">Delete</a></td>
<td align="center"><SPAN ID="copytext' . $n .'">' . $row['mob_number'] . '</SPAN><TEXTAREA ID="holdtext' . $n .'" STYLE="display:none;"></TEXTAREA>
</td>
<td align="center">' . $row['email'] . '</td>
<td align="center">' . $row['post_code'] . '</td>
<td align="center">' . $row['dr'] . '</td>
</tr>
';
$n++;
}

[Nymo]

daveVK: Thank you of your try to help me. I wrote your correct script but it copy only one record from first row. :( It’s so sad…
Please help me. It is very necessary for me.

[daveVk]

try

function ClipBoard()
{
var n = 1;
var holdtext = document.getElementById('holdtext'+n);
holdtext.innerText = '';
while ( document.getElementById('copytext'+n) ) {
var copytext = document.getElementById('copytext'+n);
holdtext.innerText += copytext.innerText;
alert( 'n:' + n + ' ' + copytext.innerText );
n++;
}
var Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
}

[Nymo]

Thank you. :) Script is work well. I want to ask your help again. When I push the button “Copy” script show alert message window “n:1 07124562351” (07124562351 – data from first row). Column has 30 rows with records or much more. Can you repair the script that doesn’t show alert message and one push button copy all records?
I copy all records and paste to “Word”, all tel.number show in one row “07124562351077899874790712345678907024562351”. How to do that every one number would be in each other row? Like that:
07124562351
07789987479
07123456789
07024562351

I noticed that script works only in IE. Script doesn’t works with FireFox and Opera. Do you know how to repair script that works in those browsers?
Thank you of your patience with me.

[daveVk]

replace

holdtext.innerText += copytext.innerText;
alert( 'n:' + n + ' ' + copytext.innerText );

with

holdtext.innerText += copytext.innerText + '\n';

these 2 lines need attention to make it work in other than IE

var Copied = holdtext.createTextRange();
Copied.execCommand("Copy");

google "execCommand Copy" may answer your question.

Your PHP includes <TEXTAREA ID="holdtext' . $n .'" STYLE="display:none;"></TEXTAREA> for each row of table, you only need one textarea, say after </table>.

<TEXTAREA ID="holdtext1" STYLE="display:none;"></TEXTAREA>

[Nymo]

daveVK. Do you mean that “<TEXTAREA ID="holdtext1" STYLE="display:none;"></TEXTAREA>
” include after </table>? I included <TEXTAREA ID="holdtext1" STYLE="display:none;"></TEXTAREA> after </table> but didn’t work. Where is mistake?

[daveVk]

Should be Ok

$n=1;
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$bg = ($bg=='#eeeeee' ? '#ffffff' : '#eeeeee'); // Switch the background color.

echo '<tr bgcolor="' . $bg . '">
<td align="center"><a href="delete_user.php?id=' . $row['user_id'] . '">Delete</a></td>
<td align="center"><SPAN ID="copytext' . $n .'">' . $row['mob_number'] . '</SPAN>
</td>
<td align="center">' . $row['email'] . '</td>
<td align="center">' . $row['post_code'] . '</td>
<td align="center">' . $row['dr'] . '</td>
</tr>
';
$n++;
}
echo '</table>
<TEXTAREA ID="holdtext1" STYLE="display:none;"></TEXTAREA>';

post what you have if there is still trouble.

[Nymo]

Thank you daveVK.:)You help me find out big problem.

[Nymo]

daveVK: I want to ask your help last time. How to repair script that when I copy all records would be “;” after every records?

[daveVk]

holdtext.innerText += copytext.innerText + ';\n';

Will put a ; and a newline (\n) after each record

[Nymo]

Thank you, daveVK.

[Nymo]

daveVk: I want to ask your help again. I repaired script that script copy text to clipboard from two columns “mob_number” and “email”. When I push the button “Copy” in “mob_number” column, script works well while column has 9 rows. When “mob_number” column has 10 rows script copy data from mob_number and email columns. Data copy in column “email” works well, no problem.
daveVk: Could you help me again to find out the problem?
<SCRIPT LANGUAGE="JavaScript">

function ClipBoard()
{
var n = 1;
var holdtext = document.getElementById('holdtext'+n);
holdtext.innerText = '';
while ( document.getElementById('copytext'+n) ) {
var copytext = document.getElementById('copytext'+n);
holdtext.innerText += copytext.innerText + ';\n';
n++;
}
var Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
}
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">

function ClipBoard1()
{
var n = 1;
var holdtext1 = document.getElementById('holdtext1'+n);
holdtext1.innerText = '';
while ( document.getElementById('copytext1'+n) ) {
var copytext1 = document.getElementById('copytext1'+n);
holdtext1.innerText += copytext1.innerText + ';\n';
n++;
}
var Copied = holdtext1.createTextRange();
Copied.execCommand("Copy");
}
</SCRIPT>
….
<td align="center"><b><a href="' . $link1 .'">Mobile number</a></b>&nbsp;<BUTTON onClick="ClipBoard();">Copy</BUTTON></td>
<td align="center"><b><a href="' . $link2 .'">Email</a></b>&nbsp;<BUTTON onClick="ClipBoard1();">Copy</BUTTON></td>
….
….
<td align="center"><SPAN ID="copytext' . $n .'">' . $row['mob_number'] . '</SPAN><TEXTAREA ID="holdtext' . $n .'" STYLE="display:none;"></TEXTAREA></td>
<td align="center"><SPAN ID="copytext1' . $n .'">' . $row['email'] . '</SPAN><TEXTAREA ID="holdtext1' . $n .'" STYLE="display:none;"></TEXTAREA></td>

[daveVk]

I have changed Clipboard to take the id of the colm, so only one Clipboard function is required. Changed span Id's to match.

Moved holdtext (unnumbered) back to end of table.

<SCRIPT LANGUAGE="JavaScript">

function ClipBoard( colmId )
{
var holdtext = document.getElementById('holdtext');
var n = 1;
holdtext.innerText = '';
while ( document.getElementById(colmId+n) ) {
var copytext = document.getElementById(colmId+n);
holdtext.innerText += copytext.innerText + ';\n';
n++;
}
var Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
}
</SCRIPT>

….
<td align="center"><b><a href="' . $link1 .'">Mobile number</a></b>&nbsp;<BUTTON onClick="ClipBoard('mobile');">Copy</BUTTON></td>
<td align="center"><b><a href="' . $link2 .'">Email</a></b>&nbsp;<BUTTON onClick="ClipBoard('email');">Copy</BUTTON></td>
….
….
<td align="center"><SPAN ID="mobile' . $n .'">' . $row['mob_number'] . '</SPAN></td>
<td align="center"><SPAN ID="email' . $n .'">' . $row['email'] . '</SPAN></td>

... after table
<TEXTAREA ID="holdtext" STYLE="display:none;"></TEXTAREA>

[Nymo]

Thank you, daveVk.