search submitbutton in all forms with textareas with jquery

Question

Hi there

i'm working on a ff-plugin which searchs a webpage for all textareas and places a warning before the submit button.

my code looks like this

var submitWarning = content.document.createElement("div");
submitWarning.innerHTML = "Fancy Message";
$('textarea', window.content.document).each(function() {
    var form = $(this, window.content.document).parents('form:first');
    $(form, window.content.document).children('input[type=submit]').each(function() {
         form.insertBefore(submitWarning, this);
    });
});

if i search all submits with $('input[type=submit]'.each... it works fine but since i added the thing with the textarea and the form:first i got problems (nothing happens)

p.s. i use the window.content.document thingy because its a ff-plugin and it won't work nothing without it

Answer 1

Try var form = $(this, window.content.document).closest('form');. Not sure if that's the ticket, but it's the first thing off my head.

Answer 2

You need to change it a bit, like this:

var submitWarning = content.document.createElement("div");
submitWarning.innerHTML = "Fancy Message";
$('textarea', window.content.document)
   .closest('form')
   .find('input[type=submit]')
   .before(submitWarning);

The argument syntax is $(selector, context), when finding the form, first there's .closest() which makes this easier, also when you have an element, you can just use $(this) inside it's .each(), no need to search for it again. Also, you can use .before() to make it easier :)

Answer 3

The :has() selector is the best choice for me. Get rid of your extensive code and use this instead.

var buttons = $("form:has(textarea) input[type=submit]", window.content.document);
$("<div>").html("Fancy Message").insertBefore(buttons);