Insert elements into a form with Greasemonkey?

Question

I'm a novice programmer trying to automate an extremely redundant task at work.
I want to insert some form elements and a text button, but I can't find the correct way to do it.

Here's what I have:

//function stuff

var searchyText = document.createElement("TEXTAREA");
var searchyDiv = document.createElement("P");
    searchyDiv.innerHTML="<p><a href='#' onClick='searchyTimeGo()'>Click to Search</a></p>";

document.forms[0] ... ?

//    document.insertBefore(searchyDiv, document.forms[0]);
//    document.insertBefore(searchyText, searchyDiv);

The question mark is where I got lost, and the comments at the bottom are the failed results of my attempts so far.

I just can't get the text to show up on the page. I've looked at a few video tutorials and realized that I know exactly squat about nodes. There's only one form on the page.

I've gotten "undefined" to write itself in a few times -- when I tried to concatenate the raw HTML to the form[0].innerHTML.
I felt dirty and ugly for even trying that, and it still didn't work.

I'm aware that the onClick method I've included above will probably fail, but I know how to fix that.

Thank you for your time!

Can you create a [jsfiddle](http://jsfiddle.net/) for your szenario? — MCL, May 31 '13 at 06:50

score 1 · Answer 1 · edited May 23 '17 at 10:25

Several things:

Is there a possibility that the form is getting added via AJAX (javascript)?
Use document.querySelector()^Doc, or else jQuery, to get the form (or just about anything else). This gives you the flexible power of CSS selectors.
For a <p> element, don't set the innerHTML to another <p>
Is searchyTimeGo() defined by the page or by your script? If by you, then never, ever, use onclick (or similar).
It's named searchyDiv but you are creating a paragraph (<p>).
It looks like you are trying to add the elements before the form, not into it?
Use DOM methods. Avoid using innerHTML, as a rule.

Putting it all together your code would be (assuming no AJAX):

//-- This gets the FIRST form.
var targForm    = document.querySelector ("form");
if (targForm) {
    var searchyText = document.createElement ("TEXTAREA");
    var searchyDiv  = document.createElement ("DIV");
    var searchyPghp = document.createElement ("P");
    var searchyBtn  = document.createElement ("A");

    searchyBtn.textContent  = "Click to Search";
    searchyBtn.href         = "#";

    searchyBtn.addEventListener ("click", searchyTimeGo,   false);

    searchyDiv.appendChild  (searchyPghp);
    searchyPghp.appendChild (searchyBtn);

    targForm.parentNode.insertBefore (searchyText, targForm);
    targForm.parentNode.insertBefore (searchyDiv, targForm);
}
else {
    alert ("No form found on the page!");
}

function searchyTimeGo () {
    //- DO WHATEVER, HERE.
    console.log ("Search button clicked");
}

Or a complete script showing the jQuery way:

// ==UserScript==
// @name     _Add custom form elements
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
var firstForm = $("form:first");
if (firstForm.length) {
    firstForm.insertBefore (
          '<textarea id="gmMyTextArea"></textarea>'
        + '<div id="gmMySrchDiv"><p><a href="#">Click to Search</a></p></div>'
    );

    $("#gmMySrchDiv > p > a").on ("click", searchyTimeGo);
}
else {
    alert ("No form found on the page!");
}

function searchyTimeGo () {
    //- DO WHATEVER, HERE.
    console.log ("Search button clicked");
}

Insert elements into a form with Greasemonkey?

1 Answers1