Adjust the color of a glyphicon when the text changes using Jquery

Here is a snippet of code that I am working with :

<div class="col-xs-6">
    @Html.TextBoxFor(model => model.TagName, new {@class = "textBoxTextFormat", @id = "newTagText"})
</div>
<div class="col-xs-3" >
    <a href="#" id="addNewTagButton"><span class="glyphicon glyphicon-floppy-disk" style="color: #4790b8; vertical-align: bottom; margin-top: 5px; font-size: 30px;"></span></a>
    <a href="#" id="cancelNewTagButton"><span class="glyphicon glyphicon-remove-circle" style="color: #4790b8; vertical-align: bottom; margin-top: 5px; font-size: 30px;"></span></a>
</div>

This code generates the following output: ScreenShot

I am looking to update the save and cancel buttons when the text in the textbox changes. However, my current solution does not seem to be effective:

$(document).on('change', '#newTagText', function (e) {
    $('#addNewTagButton').css('color', '#0000FF');
});

If anyone has any insights on how to achieve this, please let me know.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Send the input field event to this function.

jQuery(document).ready(function($){
$('.clickable').on("click", function(){
    $(this).find('.glyphicon').css("color", "#EF3421");
});
});

Check out the demo here

Answer №2

To update the color of a span, follow these steps: 

$(document).on("change", "#newTagText", function (e) {
    $("#addNewTagButton span").css("color", "#0000FF");
});

Answer №3

At last, I found the solution: Using 'keyup' instead of 'change' did the trick!

  $(document).on("keyup", "#newTagText", function (e) {
        $(".glyphicon-floppy-disk").css("color", "#0000FF");
        $(".glyphicon-remove-circle").css("color", "#0000FF");
    });

Answer №4

$(".newTagText").on('input', function () {
    $('#addNewTagButton').css('text-color', '#0000FF !important');
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn the process of uploading a default file with C# in ASP.NET

Is there a way to upload a default file from the client side without having to use the browse button in the file upload control? For example, I want to upload a specific file every time I click a button, without showing the file dialog. Can this be achie ...

javascriptc#asp.net

Attempting to utilize the Put method with Ajax, but the script does not seem to be executing

Currently, I am working on implementing the Put method using Ajax: <!doctype html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></ ...

javascriptajaxspringbootstrap-4thymeleaf

Is it possible for ResizeObserver to only observe changes in width?

Is there a way to have ResizeObserver only trigger on width changes and not on height changes? For example: const resizeObserver = new ResizeObserver(updateLayout); resizeObserver.observe(layout.current); const updateLayout = () => {/*perform action*/ ...

javascriptnext.jsresize-observer

Add a variable from a callback function in AJAX's success response

Is there a way to effectively utilize the variable in the appended message of the AJAX success call? http://codepen.io/anon/pen/fdBvn data['name'] = $('#goofy').val(); $.ajax({ url: '/api/1/email/test/', data: data, type ...

javascriptjqueryajax

Leverage the retrieved JSON data from the database within an HTML template using the Play

Currently, I am facing a challenge with implementing a login feature in my project. I am struggling to figure out how to showcase the JSON string that is returned on the webpage. Below is a snippet of my code: Security.java: public Person webLogin(Perso ...

javascriptjavahtmljsonplayframework

Trouble with vertical drop-down navigation

I am currently working on adapting a horizontal desktop navigation menu to be responsive. I successfully changed it to display horizontally on smaller screens, but now I am facing an issue with the dropdown submenus covering the parent items below them. Wh ...

htmlcssresponsive-designnavigation

The function call datatables rows().ids() does not return a defined value

I have implemented the ID attribute for rows in my datatable: 'createdRow': function (row, data, dataIndex) { $(row).attr('id', data.json.unid); } Now, I am trying to retrieve the IDs under a button click: action: function () { ...

javascriptdatatables

What is the best way to align an li element to the right?

Is there a way to align an li element to the right using Bootstrap 4? Currently, I have tried positioning it to the right, but the bullet of the list item is slightly off. How can I fix this issue while keeping the position as static? <h6>Test1< ...

htmltwitter-bootstrapcssbootstrap-4

The Ajax request was a success, but unfortunately the value in $_POST['value'] is empty

PROBLEM SOLVED The problem appeared to be browser-related. Switched to a different system and the issue was resolved. I am currently working on coding a live search feature that displays user details from a database using ajax and php. The input from t ...

javascriptphpajax

Utilize the toString function along with the substring method within an ejs template

I am attempting to showcase an employee's ID by displaying only the last four digits in a table on an EJS page. The data is stored in MongoDB and I am using Express for handling routes. Here is my Express route: app.get('/routehere', async ...

javascriptmongodbexpressejs

Testing XMLHttpRequest with Jasmine: A Complete Guide

Is there a way to test the onreadystatechange function on XMLHttpRequest or pure JavaScript AJAX without using jQuery? I need to do this because I'm working on a Firefox extension. It seems like I may have to use spies, but I'm having trouble bec ...

javascriptajaxjasmine

Storing values in localStorage with a specific format can be accomplished by following these steps

How can I save a localStorage value with special characters? I currently have the following value: ald:20221219_1833|atrv:lMh2Xiq9xN0-is9qy6DHBSpBL3ylttQQew but when I try to store it, it appears as if there is an arrow indicating that the value can be ex ...

javascriptlocal-storage

Tips for implementing personalized command buttons in Kendo Grid with AJAX request utilizing JavaScript

I am struggling with implementing custom command buttons in a Kendo grid that makes an AJAX call using JavaScript to call a web API post action with dynamic parameters (start, stop, restart) behind button clicks. datasource dataSource = new ken ...

javascriptjqueryajaxtelerikkendo-grid

What is the best way to utilize clip() in html canvas when using text as a path?

I have written the code below, which is close to what I am trying to achieve but doesn't quite get there. My goal is to fill text in multiple colors, currently it is only in #FF00FF. Check out the Playground I suspect the issue lies in my lack of kn ...

javascripthtmlcanvas

What is the best way to invoke a jQuery function with a dynamic ID?

I am a newcomer to JQuery and need assistance with calling a function on click for an image with a dynamic ID. While I have come across posts about calling a function using the ID, I am struggling to find one that addresses working with a dynamic ID. Is i ...

jqueryhtml

Creating multiple blocks with a 100% height in HTML

Is it true that a parent element must have a fixed height to use percentage-based height? For example, 500px. I'm designing a grid with divs arranged hierarchically. The parent has a fixed height of 500px, and the children have percentage heights, ea ...

htmlcssweb

Angular.js: automatically select default option based on ID

In my angular.js single page application, I am retrieving initial data from a rest endpoint. The data consists of a list of IDs representing saved models and a tree of options for cascading dropdowns. How can I automatically set the default path in the t ...

javascriptangularjsangularjs-ng-repeatng-options

Customized dropdown date filters for DataTables

Want to check out my test file? You can find it here: I'm currently working on a new dropdown feature labeled 'Sort By Year' that will extract all the dates from the 'Date' field in the JSON file. The goal is for the Sort By Year ...

jqueryjsondatatables

Having trouble with your Ajax post request?

I am currently working on creating a form that allows users to input information and submit it without the page refreshing. The processing of the form data will occur after the user clicks the submit button. To achieve this, I am utilizing jQuery and Ajax ...

javascriptphpjqueryajax

Each consecutive execution results in: MongoError: Topology was dismantled

I am in the process of creating a REST API, however, I keep encountering a MongoError: Topology was destroyed every other time I refresh my website. Can anyone offer assistance with resolving this issue? I suspect that the problem lies within the asynchr ...

javascriptnode.jsmongodbtypescriptexpress