0

I would like to write a greasemonkey script that make a button inside of a text entry form on some websites, so that the text entry forms would look something like this:

         ____________________ 
Username:|___________|BUTTON|
         ____________________
Password:|___________|BUTTON|

Is there any way I can do this with javascript, html, and css? Note that I want my greasemonkey script to work on website's who's layout I do not know, so I can't use the image repositioning trick as in this post: How do I add a "search" button in a text input field?

Community
  • 1
  • 1
MYV
  • 4,294
  • 6
  • 28
  • 24
  • 1
    This question may be what you're looking for: http://stackoverflow.com/questions/15314407/how-to-add-button-inside-input – Shaun Aug 08 '13 at 04:16
  • From what I understand you want to find every form field on the page and inject a button right after each text input element in that form? – Fuzzley Aug 08 '13 at 04:20
  • @Fuzzley, You are correct. Shaun, the linked questions are answered using the css repositioning trick that I do not want to use. – MYV Aug 08 '13 at 04:21
  • Are you okay with using jQuery? You can do it without jQuery, but it is much more verbose. I can try answer it in the format that you prefer. – Fuzzley Aug 08 '13 at 04:25
  • Alright, both methods posted. Let me know if there are any problems. – Fuzzley Aug 08 '13 at 04:42

1 Answers1

2

Okay, let's start with jQuery, since it's more concise. 

$('form').each(function () {
    $(this).find('input').filter(':text').each(function () {
        $(this).after($('<button>').text('My Button'));
    });
});

http://jsfiddle.net/xERT8/2/

Edited for non-jquery version.

Okay, here we go!

var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i++) {
    var form = forms[i];
    var inputs = form.querySelectorAll("input[type=text]");
    for (var j = 0; j < inputs.length; j++) {
        var input = inputs[j];
        var button = document.createElement('button');
        button.innerText = 'My Button';
        input.parentNode.insertBefore(button, input.nextSibling);        
    }
}

http://jsfiddle.net/53QQU/6/

Hope that helps.

Fuzzley
  • 306
  • 2
  • 8