How do I append a dynamic form to the end of a table?

Question

Hello all,

I'm completely new to Javascript and Greasemonkey, so feel free to correct me if I'm doing this inefficiently or incorrectly.

In this forum that I post in, clicking the "reply" button brings up a new window with just text form to post in. I want to create a greasemonkey script that adds the script for the reply form onto the actual thread page.

So the program goes through the table which stores the discussion, and appends a childNode to the end of the table. I want that childNode to be the form that is created in the reply page.

Here's the skeleton of my script:

// ==UserScript== 
// @name QuickEeply 
// @namespace  http://userscripts.org/users/181447 
// @description    Adds "QuickReply" forms to TCC discussion posts 
// @include        * 
// ==/UserScript==



var tables = document.getElementsByTagName("td");  


for (var i = 0; i < tables.length; i++) {

 if (tables[i].className == "content") 
 {    var editTable = tables[i];
 } 

}

editTable.appendChild = ''

---

Here's the script I copied and pasted from the "reply page"

<form method="POST" action="http://dl.tccd.edu/index.php/classforums/posts/event=saveReply"&gt;
 <input type="hidden" name="subject" size="45" id="txt_subject" maxlength="200" value="">
 <br>
 Message:<br>
 <textarea rows="20" style="width:70%;" name="message" id="message"></textarea>

 <br>
 <br>
 <input type="submit" id="submit_post" value="Post Reply">
 <input type="hidden" name="post_id" value="1010815">
 <input type="hidden" name="thread_id" value="1010815">
</form>

So how can I go about creating a script that finds the thread_id of the current page, and creates a replybox for each page on the page where the thread is actually located.

Thanks.

Edit: Here is the Source Code-

http://pastebin.com/2UaUVGJA (the main discussion page) ht[]tp://pastebin.com/hAx2SPUu (the reply page-- obfuscated because I can't yet post two links)

EDIT 2:

I've used Brock's template, and it's not working.  What do I need to do to correct it?

// ==UserScript==
// @name           Quick_ReplyTest
// @namespace      http://userscripts.org/users/181447
// @description    Inserts QuickReply
// @include        *
// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==



/* Optional:
window.addEventListener ("load", Greasemonkey_main, false);
*/

$(document).ready (Greasemonkey_main);


function Greasemonkey_main ()
{
    /*--- Get the first node inside the id="main" span (Google.com)
        If that's not there, then get the first node of the html body.
    */
    var TargetNode  = $("a[href*='event=reply/post']");
    if (!TargetNode)
        TargetNode  = $("body *:first");



  $(TargetNode).after
    (
        "<form method="POST" action="http://dl.tccd.edu/index.php/classforums/posts/event=saveReply"&gt;
        + "<input type="hidden" name="subject" size="45" id="txt_subject" maxlength="200" value="">"
        + "<br> Message:<br>"
        + "<textarea rows="20" style="width:70%;" name="message" id="message"></textarea>"
        + "<br> <br>"
        + "<input type="submit" id="submit_post" value="Post Reply">"
        + "<input type="hidden" name="post_id" value="1010815">"
        +"<input type="hidden" name="thread_id" value="1010815">"
        +"</form>"
    );
}

Answer 1

Go to this answer and get the Greasemonkey template.

It shows you how to insert HTML, like your form, at specific node(s).

Replace that sample's table HTML with your form HTML. Then your TargetNode will be something like $("a[href*='event=reply/post']") -- based on the referenced page. Note that this should insert the form at every post entry.

Warning: the form will not necessarily be where you want it, and we haven't synced the form to each post yet.

Do what you can, but those next stages should be asked in a new question after you get the first part working and your accept-rate up. ;-)

Answer 2

Re:

EDIT 2: I've used Brock's template, and it's not working. What do I need to do to correct it?

You need to be extremely careful about multi-line strings and strings with quotes or apostrophes. There was a javascript syntax error in the <form> string.

I've cleaned it up for you (and changed the syntax to my preferred style)...

Notice how StackOverflow's syntax highlighting keeps the string all red? Most programming editors will give that kind of clue, too.

$(TargetNode).after
(
   '<form method="POST" action="http://dl.tccd.edu/index.php/classforums/posts/event=saveReply"&gt;    \
    <input type="hidden" name="subject" size="45" id="txt_subject" maxlength="200" value="">        \
    <br> Message:<br>                                                                               \
    <textarea rows="20" style="width:70%;" name="message" id="message"></textarea>                  \
    <br> <br>                                                                                       \
    <input type="submit" id="submit_post" value="Post Reply">                                       \
    <input type="hidden" name="post_id" value="1010815">                                            \
    <input type="hidden" name="thread_id" value="1010815">                                          \
    </form>                                                                                         \
   '
);

.

For further issues, please open a new question, so that this one doesn't get too hard to follow.