The form on my website has the following structure:
<form role="search" method="get" id="searchform" action="">
<input type="text" name="s" id="s" placeholder="Search..." />
<input type="submit" id="searchsubmit" />
</form>
I want the background of the submit button to change when the input field is clicked. How can I achieve this?
An elegant solution using only CSS:
input[type="email"]:focus + button[type="submit"]{
border-color: blue;
}
See it in action here: http://jsfiddle.net/af23lh49/
The key to this solution is the + selector, which targets a submit button that comes immediately after a focused email input field.
Here's an example:
$('#input').on('click',function(){
$('#submitBtn').css('background-color','#00f');
}).on('mouseleave',function(){
$('#submitBtn').css('background-color','');
});
Witness a practical illustration that is simple and easily understood
Code Example
<section role="search" method="get" id="searchform" action="">
<input type="text" name="s" id="s" placeholder="Search..." />
<input type="submit" id="searchsubmit" />
</section>
Jquery Implementation
$(document).ready(function() {
$('#s').on('focus',function(){
$('#searchsubmit').css('background-color','red');
});
});
Here's an example using the focus and blur functions together:
$('#input').focus(function(){
$('#button').css('background-color','#f00');
}).blur(function() {
//return to previous state
$('#button').css('background-color','#ff0');
})
My end goal is to achieve a final view that looks like this: https://i.sstatic.net/VUGdb.png The values are supposed to have a counter animation from 0 to the specified final value. I have also implemented a currency pipeline in the value section for sep ...
In my setup, I have a straightforward configuration: <button> Lorem </button> <input type="text" value="Ipsum"> both positioned side by side with the help of display: inline-block: button, input{ height: 34px; line-height: ...
I'm fetching data from MySQL to PHP using AJAX. I am trying to implement an edit feature on my website within a modal window. The select input with options (subcategories) is loaded via AJAX after the radio input categories are loaded by a previous AJ ...
I've been working on a project for some time now, and here's the situation: A friend of mine has a web application that generates data for charts using HTML. I need to extract specific values from a table on his website so that we can store this ...
I am looking to develop a customized reporting system where users can select the specific fields they want to include in the report as well as arrange the layout of these fields. The data for the reports is sourced from a CSV file with numerous columns. Us ...
In my Angular 5 project, I am implementing a javascript library. If I create a global variable in my .js file, how can I access that variable from my .ts file? ...
Having trouble utilizing a value retrieved from an API call. Below is my TypeScript code: private async fetchPersonName() { let fullName = await Api.getName('Data($select=FullName)', `personId eq ${currentPersonId}`); ...
I have a unique html template displayed below CustomTemplate.vue <template> <div class="content custom-page"> <md-card class="page-display"> <md-card-header class="page-header"> <md-card- ...
Can you help me with this code? I am trying to make a successful $.ajax call and return its response as the result of function a(). However, before the response from the ajax call is ready, it is returning an empty result. Any assistance would be appreci ...
Here is the code snippet: <p><input type="checkbox" /> Pavement <input type="checkbox" /> Dirt or rocky trails <input type="checkbox"/> Gravel roads</p> As well as the accompanying CSS: h1, input, button, textarea, progress ...
Consider the JSON object below: var data = { "ok" : true, "messages" : [ { "type" : "message", "subtype" : "bot_remove" }, { "type":"message", "subtype":"file_share", ...
I want to create a JavaScript server on Raspbian that not only serves .html content to the browser but also allows for user input through events like button clicks. Both my .html and .js files are located in the same directory, and I have used absolute pat ...
I have created a bootstrap resume that I want to integrate with a button on my portfolio website. As someone who is still learning and fairly new to this, please bear with me if this question seems odd. When I try to link it using an href tag, the button ...
I made a Owl Carousel Slider with an autoplay feature, but I'm having trouble getting it to slide smoothly. Does anyone have any tips on how to make the following code run more smoothly? Javascript Code var owl = $('.owl-carousel'); owl.ow ...
Encountering a recurring issue where changes made to CSS or Javascript files do not reflect in client browsers unless they manually refresh the page with ctrl+F5. This poses a challenge, especially in a school system with numerous users who may not be awar ...
Using my MacBook with a display size of 15.4-inch (2880 x 1800), I have captured screenshots of different sections of my homepage to show how they appear. #app (section1) https://i.sstatic.net/QjrXe.png #section2 (section2) https://i.sstatic.net/5HWp0. ...
Within my home.component.html file, you will find the following code: <div class="grid grid-cols-5 gap-4 pt-10"> <div *ngFor="let card of cards" class=""> <div *ngIf="card==null;then nil else notnil&q ...
Seeking guidance on resolving a persistent issue. To provide a brief overview before sharing the code: I have two files - an HTML file named "bookings.php" containing JavaScript, and a PHP file named "getBookings.php" with PHP code. The bookings.php file ...
Looking to enhance the aesthetic of this blog by adjusting the height of the #content div to match that of the last article. This will allow the background image to repeat seamlessly along the vertical axis. I attempted the following code: $(document).re ...
I need help figuring out how to create a dynamically sized div based on the browser's height. I'm not sure where to start or how to approach this problem. The layout I have in mind includes a 50px high header, followed by the dynamic div and the ...