Adding a button inside a text input field in a website form with the help of html, css, and javascript

Question

Adding a button inside a text input field in a website form with the help of html, css, and javascript

I am interested in creating a greasemonkey script that can add a button inside text entry forms on various websites to enhance their appearance. I envision the text entry forms looking like this:

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

My goal is to achieve this functionality using javascript, html, and css. However, I need the script to be able to work on websites with unknown layouts, ruling out the image repositioning method described in this post: How do I add a "search" button in a text input field?

javascript html css

Answer 1

Answer №1

Let's kick things off with jQuery for a more concise approach.

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

Check out the demo here.

Edit: Now, let's dive into the non-jQuery version of the solution.

Alright, let's get started!

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);        
    }
}

You can view the updated code here.

I hope this explanation clears things up for you.

Answer 2

Let's kick things off with jQuery for a more concise approach.

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

Check out the demo here.

Edit: Now, let's dive into the non-jQuery version of the solution.

Alright, let's get started!

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);        
    }
}

You can view the updated code here.

I hope this explanation clears things up for you.

Adding a button inside a text input field in a website form with the help of html, css, and javascript

Answer №1

Similar questions

BeautifulSoup is throwing an AttributeError because it cannot find the attribute 'h3' in the list object

using response.redirect to navigate to a new page with a database value

Exploring Ways to Retrieve Property Names in AngularJS JSON

Transmit updated value to masterpage upon selection alteration

Invoke a JavaScript file within the MongoDB shell

Struggling to locate the module 'firebase-admin/app' - Tips for resolving this issue?

Colorful radial spinner bar

A simple guide on integrating personalized color palettes into Material-UI Theme

What is the best way to extract the image tag from HTML code and use it as the image source in Glide for images

Update the page using Ajax without relying on jQuery

The message I'm attempting to include in the request is not being transmitted along with the request

Using the HtmlTable Control to populate data from an HtmlTable object in ASP/C# Programming

What is the best way to adjust the height of a Div to be 100%?

Can you provide guidance on showcasing mongodb data in a flask template with flask_pymongo?

Looking for a Horizontal Layout?

Is there a way to retrieve values from a different menu without the need to refresh the page?

Django: Occasionally, text entered into a text field may not be successfully submitted after a post request

Tips for implementing a nested ng-repeat with nested JSON array data triggered by a button click

Transferring information between Flask and JS using AJAX for a Chrome extension

What could be the reason for the sudden lack of content from the Blogger API?