Question

So I have a greasemonkey script that I am adding onto, and one of the features requires it to insert a checkbox and label onto a page.

So there are already 2 checkboxes and labels where I will be adding another, and I essentially just want to add my checkbox to the line after the current ones, but I have no idea how to do this.

Here is a snippit of code from where I want to add the new checkbox(i will include the entire form at the end)

<span class="smalltext">Type your reply to this message here.<br /><br />
                <label><input type="checkbox" class="checkbox" name="postoptions[signature]" value="1" checked="checked" />&nbsp;<strong>Signature</strong></label><br />
                <label><input type="checkbox" class="checkbox" name="postoptions[disablesmilies]" value="1" />&nbsp;<strong>Disable Smilies</strong></label></span>

So how can I insert a checkbox nad a label after the 2 that are already there

And how can I check if the checkbox is checked or not

Here is the entire form that has the checkboxs in it

<form method="post" action="newreply.php?tid=2292596&amp;processed=1" name="quick_reply_form" id="quick_reply_form">
<input type="hidden" name="my_post_key" value="de77ee8401edd4fe176f2c6a3787d411" />
<input type="hidden" name="subject" value="*" />

<input type="hidden" name="action" value="do_newreply" />
<input type="hidden" name="posthash" value="27dc484678c4aaceb647fc7e461bc869" id="posthash" />
<input type="hidden" name="quoted_ids" value="" id="quoted_ids" />
<input type="hidden" name="lastpid" id="lastpid" value="20693160" />
<input type="hidden" name="from_page" value="2" />
<input type="hidden" name="tid" value="2292596" />
<input type="hidden" name="method" value="quickreply" />

<table border="0" cellspacing="1" cellpadding="4" class="tborder">

    <thead>
        <tr>
            <td class="thead" colspan="2">
                <div class="expcolimage"><img src="http://cdn2.myforums.net/images/blackreign/collapse.gif" id="quickreply_img" class="expander" alt="[-]" title="[-]" /></div>
                <div><strong>Quick Reply</strong></div>
            </td>
        </tr>
    </thead>

    <tbody style="" id="quickreply_e">
        <tr>
            <td class="trow1" valign="top" width="22%">
                <strong>Message</strong><br />
                <span class="smalltext">Type your reply to this message here.<br /><br />
                <label><input type="checkbox" class="checkbox" name="postoptions[signature]" value="1" checked="checked" />&nbsp;<strong>Signature</strong></label><br />
                <label><input type="checkbox" class="checkbox" name="postoptions[disablesmilies]" value="1" />&nbsp;<strong>Disable Smilies</strong></label></span>

            </td>
            <td class="trow1">
                <div style="width: 95%">
                    <textarea style="width: 100%; padding: 4px; margin: 0;" rows="8" cols="80" name="message" id="message" tabindex="1"></textarea>
                </div>
                <div class="editor_control_bar" style="width: 95%; padding: 4px; margin-top: 3px; display: none;" id="quickreply_multiquote">
                    <span class="smalltext">
                        You have selected one or more posts to quote. <a href="./newreply.php?tid=2292596&amp;load_all_quotes=1" onclick="return Thread.loadMultiQuoted();">Quote these posts now</a> or <a href="javascript:Thread.clearMultiQuoted();">deselect them</a>.
                    </span>

                </div>
            </td>
        </tr>

        <tr>
            <td colspan="2" align="center" class="tfoot"><input type="submit" class="button" value="Post Reply" tabindex="2" accesskey="s" id="quick_reply_submit" /> <input type="submit" class="button" name="previewpost" value="Preview Post" tabindex="3" /></td>
        </tr>
    </tbody>
</table>

Answer 1

For simplicity’s sake, do this with jQuery. If you don’t already have it in your script, add this line to the metadata block:

// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

Then the code to add the checkbox and activate it is:

var checkboxCell    = $("#quickreply_e td:eq(0) span.smalltext");
if (checkboxCell.length) {
    checkboxCell.append (
        '<br><label><input type="checkbox" class="checkbox" name="myVeryOwnCheckbox" value="1" />'
        + '&nbsp;<strong>My checkbox</strong></label>'
    );

    $("#quickreply_e input[name='myVeryOwnCheckbox']").change (myCheckboxChangeHandler);
}

function myCheckboxChangeHandler () {
    alert ("My checkbox was " + (this.checked ? "checked" : "unchecked") );
}

---

---

Update: Now that OP has given the target site, verified that the code works against that site. A complete working script is:

// ==UserScript==
// @name    _Checkbox adder
// @include http://www.hackforums.net/showthread.php*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
// ==/UserScript==

var checkboxCell    = $("#quickreply_e td:eq(0) span.smalltext");
if (checkboxCell.length) {
    checkboxCell.append (
        '<br><label><input type="checkbox" class="checkbox" name="myVeryOwnCheckbox" value="1" />'
        + '&nbsp;<strong>My checkbox</strong></label>'
    );

    $("#quickreply_e input[name='myVeryOwnCheckbox']").change (myCheckboxChangeHandler);
}

function myCheckboxChangeHandler () {
    alert ("My checkbox was " + (this.checked ? "checked" : "unchecked") );
}