Jump to content

Javascript help i want to click a link and have text get copied into a textarea


turkman

Recommended Posts

i have a php forum and in the posts i have a link to quote the post... when clicked i want javascript to automatically update the textarea called quickreply at the bottom of the page by entering the quote into it.

 

also i want to be able to quote numerous people. So for example

 

if a thread has 10 replies ... you go to reply 1 and press quote it should input reply 1's content in the textarea at the bottom

if you then click quote on reply 3 for example it should keep reply 1's text there and on a newline put reply 3 's content.

 

all i know is in the links ill have to have something like onclick='quotePost(".$postcontent.")'

Then obviously ill have to have a quotepost javascript function that will get the text and display it in the textarea called quickreply.

 

Can someone show me how to code the quotepost function ?

 

 

ok this is what i have so far and it isnt working but i dont understand why.

 

firstly quote_cite.js

 

function quotePost( var post){

document.write("<h1>In quotePost </h1>" + post);

document.getElementById('message').value = document.getElementById('message').concat('>',post,'\r\n');

}

 

 

ok this is how i link to that script

 

<head>
<link rel="stylesheet" type="text/css" href="style/don3.css" />
<title> <?PHP echo getSetting("PAGE_TITLE") ; ?> </title>
<script type="text/javascript" src="scrips/quote_cite.js"></script> 
</head>

<body>

 

This is how im echoing out the contents in my php file

 


      <div class = 'postoptions'>
              <a href = '#'>Reference</a>
              <a href = '#'onclick = \"quotePost('".filter_text(nl2br(stripslashes($row['message'])))."')\">quote</a>
              <a href = '#'>Rage</a>
              </div>

 

this is how it displays in html

 

<div class = 'postoptions'> 
              <a href = '#'>Reference</a> 
              <a href = '#'onclick = "quotePost('i hope soooooo')">quote</a> 
              <a href = '#'>rage</a> 
              </div> 

 

this is the textarea i want to update

 

echo "<br/>
      <table cellspacing = '0'>
          <form action = 'includes/back_process.php?replytothread=$id' method = 'POST' enctype='multipart/form-data'>
          
      
          <th class = 'label'>Quick Reply</th>
          <tr><td><input type = 'textbox' name = 'name' value = '$name'/>  Enter Name</td></tr>
          <tr><td><textarea  id = 'message' name = 'message' rows = '10' cols = '100'></textarea> </td></tr>
          <tr><td><input type = 'file'  name = 'image'></td></tr>";

 

 

 

When i click the quote button nothing happens... i was hoping it would appear in the textarea... do you see any probelms with it?

One thing I'd consider at least is ditching your extra spaces.

 

For example, you have

<textarea  id = 'message' name = 'message' rows = '10' cols = '100'>

when it should be

<textarea  id='message' name='message' rows='10' cols='100'>

 

Starting with proper HTML will at least help narrow down the problem area.

i changed the function quotePost(var post)

 

to have a window.open("www.google.com");

 

at the top - just to see if the function actually gets called...however when i click the link nothing happens and no window gets opened which leads me to believe that the function never actually get called.

 

Does this help narrow it down?

Here is a quick mock-up of one possible solution:

<html>
<head>
<style>
.post { background-color: #ccccff; }
.post_title { font-weight: bold; float: left; }
.quote_link { text-align: right; }
</style>

<script type="text/javascript">

function addQuote(postID)
{
    var replyObj = document.getElementById('reply');
    var quoteAuth = document.getElementById('post_'+postID+'_author').innerHTML;
    var quoteText = document.getElementById('post_'+postID+'_text').innerHTML;
    var replyContent = '[quote author='+quoteAuth+']'+quoteText+'[/quote]';
    replyObj.value += "\n" + replyContent;
    return false;
}
</script>
</head>

<body>

<div id="post_1" class="post">
<div id="post_1_header" class="post_title">Post By: <span id="post_1_author">Bob</span></div>
<div class="quote_link"><a href="#" onclick="return addQuote('1');">Quote</a></div>
<div id="post_1_text">Hey how many feet are in a mile?</div>
</div>
<br />
<div id="post_2" class="post">
<div id="post_2_header" class="post_title">Post By: <span id="post_2_author">Jane</span></div>
<div class="quote_link"><a href="#" onclick="return addQuote('2');">Quote</a></div>
<div id="post_2_text">There are 5,280 feet in a mile.</div>
</div>
<br />
<div id="post_3" class="post">
<div id="post_3_header" class="post_title">Post By: <span id="post_3_author">Bob</span></div>
<div class="quote_link"><a href="#" onclick="return addQuote('3');">Quote</a></div>
<div id="post_3_text">Great, thanks.</div>
</div>
<br />

Reply:<br />
<textarea name="reply" id="reply" style="width:600px; height:250px;"></textarea>

</body>
</html>

hey thanks for the reply... im confused though as im very new to javascript and thats not how i laid out my info...

 

you went into good details there... but what i have basically discovered is that when i echo out the javascript to call the function, even when i click the link... the function never gets called... i tested it by adding an alert("in addquote"); to the quotePost() function... but this never displays.

 

Also i have the content stored in a php variable... which i want to pass to the quotePost directly... as it will save me having to do that innerhtml stuff.

 

i just cant work out why the quotePost never gets called... yet when i change quotePost to alert('working') i get a alert box popup.

 

is it how im echoing out the code or am i calling the external file wrong?

ive changed my code to make it simplier but still it doesnt seem like quotePost ever gets called

 

<script type="text/javascript">

function quotePost( var post){

alert("In Function");

var reply_sting = ">" + post + "\n";
document.getElementById('message').value += reply_string;



}

 

 

 

then in the php file

 

<a href = \"javascript:quotePost('Working')\">quote2</a>

 

which displays like this in html

 

<a href = "javascript:quotePost('Working')">quote2</a>

ok this is a start... now it reaches the function because the  alert box shows up... however the textarea's value does not change.

 

So its in the function, This part doesnt work

 

var reply_sting = ">" + post + "\n";

document.getElementById('message').value += reply_string;

 

is this because its a textarea i know setting a value in a textarea is different from say a textbox

quick note

 

function quotePost(post){
alert(post);
var reply_sting = ">" + post + "\n";
alert(reply_string);
document.getElementById('message').value += reply_string;

}

 

if i pass the value working, the alert box pops up saying working...

 

however the second alert box doesn't show... so i assume the code breaks down when im assigning the reply_string variable?

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.