...

View Full Version : get DIV content to textarea !



simzam
12-23-2010, 09:11 PM
I'm try to get DIV content <textarea>
i think we need to use some JavaScript here donno how to please help to do it
when i click EDIT button it should send text to <textarea>


if (isset($_GET['edit']) && $_GET['edit'] == 'textupdate') {
<textarea> here i put that contain text content of div </textarea>
}


this fetch from mysql db and echo results

echo " <div id=\"edit{$row['id']}\"> {$row['title']} </div> <a href= \"{$_SERVER['PHP_SELF']}?edit=textupdate\" id=\"edit{$row['id']}\" >Edit</a><br><br>\n" ;

jmace
12-23-2010, 11:45 PM
PHP isn't needed as far as I can tell. Try something like this:



<html>
<head>
<script>
function movecontent(){
document.getElementById("mydiv").innerHTML = document.getElementById("mytextarea").innerHTML;
}
</script>
</head>
<body>
<div id="mydiv"></div>
<textarea id="mytextarea"></textarea>
<button onclick="movecontent()">Move Content</button>
</body>
</html>

Haven't tested it, but it should work. When you click the button what ever is in the textarea will move to the div.

For kicks you can even get rid of the button and change the texarea to this:

<texarea id="mytextarea" onkeyup="movecontent()"></textarea>
Which will update the div every time a user presses a key in the textarea.

jmace
12-23-2010, 11:56 PM
Upon re-reading your post, I think I may have misunderstood. Are you trying to get the div contents to display in the textarea? If so, the javascript would be reversed:

document.getElementById("mytextarea").innerHTML = document.getElementById("mydiv").innerHTML

Or something else? Please clarify a little more if this doesn't help. Maybe showing more of your code?

DJCMBear
12-24-2010, 12:19 AM
If you have ?edit=textupdate in the url why not fetch the content from the database instead of trying to call the info from the div, it also wouldn't work if you click the edit button as the page would reload and the div content will be lost.

what you would need to do it something like this.

The Javascript Code.


(function($){
$.AJAX = function() {
var xmlhttp;
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
};
$.editContent = function(id1,id2) {
var content = document.getElementById(id1),
textarea = document.getElementById(id2),
AJAX = new $.AJAX();
if(content&&textarea) {
if(content.style.display == 'none' | content.style.display === '') {
AJAX.onreadystatechange = (function() {
if(AJAX.readyState == 4 && AJAX.status == 200) {
textarea.style.display = 'none';
content.style.display = 'block';
content.innerHTML = textarea.innerHTML;
textarea.innerHTML = '';
}
});
AJAX.open("POST","http://www.example.com/AJAX.php",true);
AJAX.setRequestHeader("Content-type","application/x-www-form-urlencoded");
AJAX.send("ajax=true&type=editText&content="+textarea.innerHTML);
} else {
textarea.style.display = 'block';
content.style.display = 'none';
textarea.innerHTML = content.innerHTML;
content.innerHTML = '';
}
}
return false;
};
})(window);


Your Echo String (with edits).


echo " <div id=\"c_{$row['id']}\"> {$row['title']} </div>\n".
" <a href= \"{$_SERVER['PHP_SELF']}\" onclick=\"editContent('c_{$row['id']}','e_{$row['id']}');\">Edit</a>\n".
" <textarea cols=\"1\" rows=\"1\" style=\"width:100px;height:100px;display:none;\" id=\"e_{$row['id']}\"></textarea>";


AJAX.php


<?php
if(isset($_POST['ajax'])) {
if($_POST['type'] == "editText") {
$text = $_POST['content'];
// Do your mysql update here.
}
} else {
die('ERROR: None AJAX Request');
}
?>

simzam
12-24-2010, 02:18 PM
thank you so much works gr8 !
how can i remove button and update on function call is it possible ?


<html>
<head>
<script>
function movecontent(){
document.getElementById("mydiv").innerHTML = document.getElementById("mytextarea").innerHTML;
}
</script>
</head>
<body>
<script>
movecontent();
divcontent();
</script>
function divcontent(){
<div id="mydiv"></div>
<textarea id="mytextarea"></textarea>
}
</body>
</html>

DJCMBear
12-24-2010, 03:03 PM
how can i remove button and update on function call is it possible

If you look at the code I wrote you will see that it uses AJAX to communicate with the server scripts and update on finish.

simzam
12-24-2010, 03:44 PM
I'm not familiar with Ajax how to use with php any thing need to install or it works like java script ?

DJCMBear
12-24-2010, 04:01 PM
To run an AJAX request the only thing you need is the AJAX function in my code and then you use the AJAX send codes in the other function and that is all you need, nothing needs to be installed and AJAX is a Javascript library so it's already there for you to use.

simzam
12-24-2010, 04:35 PM
when i HIT Edit it pass through this .i wanted to know how to call movecontent() i have question why i need onclick when i already have IF statement and that work pretty good i want call movecontent() immediate pass of if statement i try ed this but it wouldn't work it never called



echo "<script> \n" ;
echo "movecontent(); \n" ;
echo " } \n" ;
echo " </script>\n" ;



if (isset($_GET['edit']) && $_GET['edit'] == 'textupdate'){
echo "<script> \n" ;
echo " function movecontent(){ \n" ;
echo " document.getElementById(\"textarea12\").innerHTML = document.getElementById(\"$divid\").innerHTML; \n" ;
echo " } \n" ;
echo " </script>\n" ;
echo "Insert Row: <br> <textarea rows=\"1\" cols=\"60\" name=\"quote1\" id= \"textarea12\" wrap=\"physical\" > </textarea> \n" ;
}

DJCMBear
12-24-2010, 04:46 PM
Do this.



if (isset($_GET['edit']) && $_GET['edit'] == 'textupdate'){
echo "<script type=\"text/javascript\"> \n".
"window.onload=(function(){document.getElementById(\"textarea12\").innerHTML = document.getElementById(\"{$divid}\").innerHTML;}); \n".
"</script>\n".
"Insert Row: <br> <textarea rows=\"1\" cols=\"60\" name=\"quote1\" id= \"textarea12\" wrap=\"physical\" ></textarea> \n";
}

simzam
12-24-2010, 05:40 PM
thanks A lot ! it works Like Char M! :thumbsup:

DJCMBear
12-24-2010, 05:50 PM
No problem if you have any more problems just post here and I'll help.

simzam
12-24-2010, 09:22 PM
hay when page reload or i click on link <textarea> set to default value
Is there any way if page reload or link clicked text remembers previous value
How to tackle this

need to create session for that ?
or java scripts helps ? :rolleyes:

DJCMBear
12-24-2010, 09:24 PM
hay when page reload or i click on link <textarea> set to default value
Is there any way if page reload or link clicked text remembers previous value
How to tackle this

need to create session for that ?
or java scripts helps ? :rolleyes:

What do you mean?

Can you elaborate abit.

simzam
12-24-2010, 09:33 PM
i mean when i click on EDIT it refresh page and textarea set to default value and its none it didn't remember previous value

DJCMBear
12-24-2010, 09:41 PM
This is because javascript is client side and if the page reloads then the javascript also reloads and sets everything to its default values.

simzam
12-24-2010, 10:40 PM
cannot it done by session ?

I'm trying this but its not even working ! textarea should remember previous text value on refresh of page


if(isset($_SESSION["quote1"]))
$mysession= $_SESSION["quote1"];
else
$mysession= "";
echo "Insert Row: <br> <textarea rows=\"1\" cols=\"60\" name=\"quote1\" id= \"textarea12\" wrap=\"physical\" value= \"$mysession\"> \n";
echo "</textarea> \n";

DJCMBear
12-24-2010, 10:51 PM
Let me understand a bit better before I do any codes, you want the div to get updated to the text that has just been entered into the textarea and if they go to edit it again it will have the div content from the updates that was just done, a bit like this forum does?

simzam
12-24-2010, 10:59 PM
yes !

here u can access that page
http://203.99.185.73/insert/insert.php?

when i edit it shows value but on reload i didn't remember previous value

DJCMBear
12-24-2010, 11:10 PM
What are you trying to do??

Like if you click edit you want to be able to edit the text and then update it with no page loads?

simzam
12-24-2010, 11:28 PM
if page loads cannot we use session that remembers textarea content
coz im using pagination it reloads page so textarea set on default as bec of java script client side
if we put session it wouldn't forget previous value
hope u understand !

DJCMBear
12-24-2010, 11:38 PM
That's the whole reason of AJAX, AJAX communicates with the server through javascript so this way you can stop page loads file updating the content and store the update server side so the edits never get lost.

simzam
12-24-2010, 11:52 PM
i understand but what is for session ? is not helping ?

DJCMBear
12-24-2010, 11:58 PM
Is the list shown on the insert page in a database?

simzam
12-25-2010, 12:29 AM
yes !

DJCMBear
12-25-2010, 12:38 AM
Then do an update on form submit for example once you finish the edits have a submit button to update the content in the database as this way you don't need session or any Javascript/AJAX codes as the list is called from the database every page load so once the edit is stored in the database then the page loads the edits will always be there.

simzam
12-25-2010, 01:08 AM
if it is possible with session than help i need to learn session as well .
ok just tell me how <textarea> works with session

need example !

DJCMBear
12-25-2010, 04:04 AM
Here's a little demo code I put together to show you how you could do this.



<?php # Home Page - index.php

#######################################
# #
# @SESSIONS #
# #
# This code will get the user to #
# insert their name and message #
# then submit the form, this will #
# display the message a little like #
# Facebook does in some ways #
# #
#######################################

session_start();

$name = stripslashes($_POST['name']);
$text = stripslashes($_POST['text']);

if(isset($_POST['set']) && !empty($name) && !empty($text)) {
$_SESSION['demo'] = array("name"=>$name,"text"=>str_replace("\n","<br />",$text));
header("location: {$_SERVER['HTTP_REFERER']}");
} elseif(isset($_GET['do']) && $_GET['do'] == "delete") {
unset($_SESSION['demo']);
header("location: {$_SERVER['HTTP_REFERER']}");
} else {
$page = "<!DOCTYPE html><html<head><title>Please Set Your String</title>".
"<style type=\"text/css\">input[type=\"text\"],textarea{outline:none;".
"padding:5px;border:1px solid #CCCCCC;}input[type=\"submit\"]{border:".
"1px solid #CCCCCC;padding:3px 5px; 3px 5px;background:#FFFFFF;".
"cursor:pointer;}</style></head>\n<body>";
if(empty($_SESSION['demo'])) {
$page .= "<form method=\"post\" action=\"{$_SERVER['PHP_SELF']}\"><table><tr><td>".
"Name: <input type=\"text\" name=\"name\" value=\"{$name}\" style=\"width:".
"215px;\" /></td></tr><tr><td><textarea cols=\"30\" rows=\"5\" ".
"name=\"text\" style=\"resize:none;\">{$text}</textarea></td>".
"</tr><tr><td align=\"right\"><input type=\"submit\" value=\"".
"Submit\" name=\"set\" /></td></tr></table></form>";
} else {
$page .= "<table width=\"300px\"><tr><td style=\"word-break:break-all\"><strong>".
"{$_SESSION['demo']['name']}</strong> <span style=\"color:#666666;\">said".
"</span> {$_SESSION['demo']['text']}</td></tr><tr><td align=\"right\">".
"<a href=\"{$_SERVER['PHP_SELF']}?do=delete\" style=\"color:#245289;\">".
"delete</a></td></tr></table>";
}
$page .= "</body></html>";
print $page;
}
?>

simzam
12-25-2010, 12:14 PM
very nice
!

can we get javascript document.getElementById("mytext").innerHTML;
to php variable

$mytext = "getlementid("mytext) ";

DJCMBear
12-25-2010, 12:40 PM
No you can not do that as PHP is run before page load and Javascript is run after page load so as I said before the only way to set the Javascript variable to a PHP variable you will need to use AJAX.

simzam
12-25-2010, 01:23 PM
fine now i think i need to use Ajax it didn't support old browsers but at least it provide solution ! :)
i will learn Ajax slowly slowly Lol here is my first code Ajax that i bit understand
How to update textarea how it shows Div content in textarea second thing
how to call function on.load coz i don't want to put button on it thanks help really appreciated !


<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
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.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<textarea id= "textID"></textarea>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>

DJCMBear
12-25-2010, 01:39 PM
How will you update the content if you don't have a button to submit the updates?

If you run the updater onload then the edits will never be saved?

simzam
12-25-2010, 01:46 PM
How will you update the content if you don't have a button to submit the updates?
i use this it update DIV variable as well when click on edit

if (isset($_GET['edit']) && $_GET['edit'] == 'textupdate'){

// echo <script type="text/javascript">
// my Ajax scrip
// </script>

{

If you run the updater onload then the edits will never be saved?
yeah this why if i use session which remember previous content

DJCMBear
12-25-2010, 01:50 PM
I would suggest something in the same lines of what this forum does so for each item on the list you have an edit button and once you click that edit button the div turns into a textarea which you then edit and then click save and then the text will be updated in your database once you click save.

So no session will ever be needed it will just be a simple AJAX code and that's it.

simzam
12-25-2010, 02:38 PM
how to update textarea when clicked on button this little simple example will b helpfull if u make it working


<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
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.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<textarea id= "textID"></textarea>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>

simzam
12-25-2010, 05:39 PM
haY tell me where im doing wrong its not sending mydiv text to <textarea>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<script type="text/javascript">
function changename()
{
//Declare the variable that will hold the XMLHttp Object.
var ajaxobject;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
ajaxobject=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
ajaxobject=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support Ajax!");
}

ajaxobject.onreadystatechange=function()
{
if(ajaxobject.readyState==4)

{
document.getElementById('namehere').innerHTML = ajaxobject.responseText;
}
}
ajaxobject.open("GET","ajax.php?name="+document.getElementById('name').value,true);
ajaxobject.send(null);
}
</script>

<textarea id="namehere" name="namehere"></textarea>
<div id="name" name = "name">My Text Div</div> <br>

<input name="Submit" id="Submit" value="Submit"
onclick="javascript:changename()" type="button"></body>
</html>

<?php
if ( !empty($_GET["name"]) && isset($_GET['name']) ){
echo $_GET['name'];
}
?>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum