Click on link, add text to textarea?

Question

Let's say I have this javascript:

<script language="javascript" type="text/javascript">
function addtext() {
    var newtext = document.myform.inputtext.value;
    document.myform.description.value += newtext;
}
</script>

and I want to enable it so I can click on some html link that says "add text" and I want the text to be @ . $username . (using PHP to insert the username). So when you click the "add text" link it'll put into the textarea @username. It is hard to visualize and I'm not sure where to put the text and PHP exactly. Thanks!

Textarea:

    <form Name ="myform" action="<?$posted = $_POST['description'];
    $object->post_tweet($posted); ?>" method="post">
    <table align="left" border="0" cellspacing="1" cellpadding="5">
      <tr>

        <td class="2">
     <textarea name='description' class="color" COLS=84 ROWS=2 type="text" id="eBann" name="bannerURL" maxlength="100" size="60" onKeyUp="toCount('eBann','sBann','{CHAR} characters left',140);"></textarea>
    <br>
      <span id="sBann" class="minitext">140 characters left.</span>
    </td>
  </tr>
</table><BR><BR><BR>
<p><input type='submit' value='Tweet!' /><input type='hidden' value='1' name='submitted' /> </p>
</form>

This is what I want to do with the link:

<a href="#" onclick="addtext("@'. $twit->user->screen_name .'"); return false>reply</a>'

This gives me an error though (I added the addtext function too).

EDIT: Got it! I had mistakes with ' and " haha wow, stupid mistake. Thanks everybody!

Answer 1

Ooh, tough one. This is a fantastic mish-mash of HTML, JavaScript, and PHP, isn't it?

<script language="javascript" type="text/javascript">
function addtext(text) {
    document.myform.description.value += text;
}
</script>

...

<a href="#" onclick="addtext('@<?php echo htmlspecialchars(addslashes($userName)) ?>'); return false"
  >reply</a>

Let's break that down: pretend $userName is "TeaCast". Then the HTML that will get sent to the browser after the <?php ?> part has executed would look like:

<a href="#" onclick="addtext('@TeaCast'); return false"
  >reply</a>

Ah!

Additional notes:

• The href="#" sets up a fake link that gives you the hand cursor but doesn't do anything.
• The addslashes() in the PHP code puts a backslash before any quotes.
• The htmlspecialchars() call ensures that a user name that contains weird characters like '<' or '&' won't mess up your page. Say some evil user who named themselves "<script>alert('haha')</script>" (yes, their user name is a snippet of HTML).

Answer 2

John's answer works fine, but another alternative you can do is store the username in the javascript, such as:

<script language="javascript" type="text/javascript">
var username = '<?php echo htmlspecialchars(addslashes($userName)) ?>';

function addtusername() {
    document.myform.description.value += "@" + username;
}
</script>

...

<a href="#" onclick="addusername(); return false">reply</a>

This way, you can use the variable username in the Javascript for other functions later, instead of using a bunch of php.

Answer 3

I highly recommend that you separate the Javascript and the PHP. By the looks of it, there will be multiple reply links on the same page. Assuming that there is a $usernames array:

<?php
foreach ( $usernames as $username ) {
    // ...
    echo '<a href="#" class="user_reply" id="reply_'.$username.'">reply</a>';
}

And the following javascript to go with it ( placing in external .js file recommended )

/* This function ( taken off the web ) returns an array of
 * elements that have a required class. */
document.getElementsByClassName = function(className) {

    var matchingElements = []; // Matching elements to be returned

    // Regular expression to match against
    var classRegex = new RegExp( '\\b' + className + '\\b' );

    // Array of all elements
    var allElements = this.getElementsByTagName('*');

    // Match all element class names against the regex and add
    // the ones that match to the list
    for ( var i = 0 ; i < allElements.length ; i ++ )
        if ( classRegex.test(allElements[i].className) )
            matchingElements.push(allElements[i]);

    return matchingElements;
};

/* Reply links are of class "user_reply" and all have an id in the
 * form "reply_USERNAME". So this function adds a click listener to
 * each link to append the username to the given textArea when the
 * link is clicked */
function addUsernameTo( textArea ) {

    // All links with user_reply class
    var replyLinks = document.getElementsByClassName("user_reply");

    // Listen for click on all these links with the given function
    for ( var i = 0 ; i < replyLinks.length ; i ++ )
        replyLinks[i].onclick = function() {

            // Append to the textArea ( get username from id )
            textArea.value += "@" + this.id.substring(6);

            // Return false to not "change"
            // the URL (won't add the # either)
            return false;
        };
}

window.onload = function () {
    // Assuming the id for the textArea is input_box
    addUsernameTo( document.getElementById("input_box") );
};

Hope it helps