Modify Border Color of Textbox upon Entering Text

Need help with a checkbox and a nearby textbox. When the checkbox is checked, the border color of the textbox should turn green. If the checkbox is unchecked, the border color of the textbox should be red. Jquery code:

$('#item_availability1_unlimited').on('change', function () {

    if ($('#item_availability1_unlimited').is(':checked')) {
        $('#item_availability1').css('border', '2px solid #11b818');
    } else {
        $('#item_availability1').css('border', '2px solid #F00');
    }
});

Link to test it out

I have completed the above part successfully, now I need assistance with the following:

If the textbox is empty, the border color should be red. Once text is entered, it should change to green.

Answer №1

It seems like the issue is that you haven't added jQuery to your code in the fiddle.

To fix this, make sure to select jQuery from the Frameworks and Extensions tab.

Check out the updated Fiddle here


Update: According to your comment, it looks like you should use the following code:

$('#item_availability1_unlimited').on('change', function () {

    if ($('#item_availability1_unlimited').is(':checked')) {
        $('#item_availability1').css('border', '2px solid #11b818');
    } else {
        $('#item_availability1').css('border', '2px solid #F00');
    }
}).change();

$('#item_availability1').on('keyup', function () {
 if ($(this).val().length > 0) {
        $('#item_availability1').css('border', '2px solid #11b818');
    } else {
        $('#item_availability1').css('border', '2px solid #F00');
    }
});

See the updated Fiddle for reference

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

Using ASP.NET to validate a radiobutton list using JavaScript, followed by invoking a C# function

After experiencing some errors, I have refined my question to better articulate my objective. By revising the logic of my previous issue - where no text appeared in a pop-up dialog triggered by a C# script utilizing a JavaScript method - I present my updat ...

What is the best way to conceal a KmlLayer?

I successfully integrated a KmlLayer onto the map and it's functioning perfectly. I am in high spirits about this accomplishment. Now, my next task is to figure out how to hide this KmlLayer by simply clicking on a button using JavaScript. Can anyone ...

divs aligned at the same vertical position

Struggling for days to align buttons vertically, I have tried various approaches without success. I attempted using position: absolute; bottom: 0; on the parent with position: relative; set. @import url('https://fonts.googleapis.com/css?family=Mon ...

Display the data submitted from a PHP form on an HTML webpage

In order to create an online quiz utilizing AJAX, I have developed a registration form where users can input their information. The PHP file will validate the details and return a username if they are correct. My goal now is to redirect users directly to ...

Using the method window.open() will launch a new window instead of opening a new tab

When the page loads, I am using JavaScript to call window.open. window.open(url, "Test Page"); Initially, it opens a new Chrome window and displays the page. However, when I use the same JavaScript code after the page has loaded, it opens the page in a n ...

Ways to align two buttons side by side in HTML

I'm struggling with the code on my company's website. I can't seem to get the buttons to float properly with the given code. <div class="text-center"><a class="text-center" href="/contact-us"><button class="btn btn-small btn- ...

The transition effects of Framer Motion do not seem to be working properly when switching between keyframe

Is there a way to create a smooth transition between two keyframe animation variants in CSS? Currently, when switching from one variant to another, the change happens instantly. How can I make it so that all properties transition smoothly? const variants = ...

The module specifier "vee-validate" could not be resolved. Please ensure that relative references begin with either "/", "./", or "../"

In our development environment for the Django project, we do not utilize npm. However, we incorporate VueJS in templates and have successfully integrated vee-validate. I am currently facing a challenge with overriding error messages without importing, whic ...

Unexpected state being returned by Vuex

I am encountering an issue with a pop-up modal that is not behaving as expected. The condition for the pop-up to appear is if the user has no transactions, which is determined by checking the length of the depositHistory array. If the length is greater tha ...

Leveraging node.js and express for incorporating custom stylesheets and scripts

I recently designed a webpage with the following elements at the beginning: <link href="./css/font-awesome.min.css" rel="stylesheet"> <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet ...

Having trouble understanding Responsive Frameworks such as Bootstrap?

Looking to dive into the world of responsive frameworks, but feeling overwhelmed by options like Bootstrap, Foundation, Gumby, UI Kit, and Semantic UI? You're not alone. With so many choices and comparisons out there, it's easy to get lost in the ...

Hide the .prev button on the jQuery slider when it is on the first

Is there a way to hide the .prev button when it is the first one? Also, why does the slider go back to the first slide when the .prev button is clicked at the last slide? How can this issue be resolved? var nextPane = function (e) { e &&am ...

React Js month picker problem encountered

I am currently working on implementing a month picker using the library called react-month-picker The code is functioning correctly in React: https://codesandbox.io/s/react-month-picker-forked-84rqr However, when I tried to integrate the same code into a ...

Elevate the functionality of your table in BoostrapVue by customizing it to display items

How can I modify the code below to turn the items into input fields that the user must enter? Instead of listing the items, I would like to replace them with input fields. <template> <div> <b-form-input v-for="(item, index) in items" ...

Storing values of properties in variables for quick access in Javascript

I have a straightforward read-only JSON object with several properties. I am contemplating whether it would be beneficial to store these properties in variables for caching purposes. Currently, we access them using syntax like jsonObject.someProperty. Th ...

Having trouble importing OrbitControls in three.js with an error?

I'm currently working on localhost and I've encountered an issue while trying to import "orbitcontrols()" which is not functioning properly and displaying an error. Here is the error message main.js:1 Uncaught SyntaxError: Cannot use import stat ...

Can the AJAX URL be loaded onto a new page?

https://i.stack.imgur.com/5l63v.pngPardon the poorly phrased question, but I need some guidance on a specific requirement regarding opening a URL in a new page. Currently, I have designed an AJAX URL and I'm wondering if it's possible to open thi ...

Combining Imported Models in Three.js: A Guide

I'm working on optimizing the draw calls in my THREE.js scene by reducing the amount of rendering required. I have a grid of large 32x32 tiles that are .gtlf models imported from the disk. Each tile has a model with just 8 vertices and a texture. Howe ...

Getting the selected option can be achieved by using the corresponding method

I have set up a dropdown menu like this: var hidDivSpan1 = $('<div></div>').addClass('span3'); var hidlabel1 = $('<label></label>').text('New Status: '); var hidSelect = $('<select na ...

checking the validity of serialized information in Ajax

I am facing a specific issue where I need to validate data before it is saved through an ajax call. When the user switches to a different URL, the save_ass_rub function is triggered. Within my application, there is a custom Window that allows users to inp ...