Looking for advice on how to handle a radio button input for 'Other':
What is the most efficient and semantically correct way to accomplish this without disrupting the functionality of other radio buttons?
Appreciate any guidance!
Looking for advice on how to handle a radio button input for 'Other':
What is the most efficient and semantically correct way to accomplish this without disrupting the functionality of other radio buttons?
Appreciate any guidance!
Put this together in a hurry. This should help you out: http://codepen.io/chrisdpratt/pen/doBkb
HTML
<ol class="options">
<li class="chosen">
<input id="Amount60" type="radio" name="amount" checked="checked" value="60">
<label for="Amount60">$60</label>
</li>
<li>
<input id="Amount120" type="radio" name="amount" value="120">
<label for="Amount120">$120</label>
</li>
<li>
<input id="Amount360" type="radio" name="amount" value="360">
<label for="Amount360">$360</label>
</li>
<li>
<input id="Amount1020" type="radio" name="amount" value="1020">
<label for="Amount1020">$1020</label>
</li>
<li>
<input id="AmountOther" type="radio" name="amount" value="">
<label for="AmountOther">Other</label>
$<input type="text" name="other" placeholder="Enter amount here">
</li>
</ol>
CSS
body {
font-size:100%;
line-height:1.4;
font-family:heveltica,arial,sans-serif;
}
.options, .options li {
list-style:none;
margin:0;
padding:0;
}
.options li {
display:inline-block;
margin-left:10px;
border:1px solid #222;
background:#fff;
color:#222;
}
.options label
{
display:inline-block;
min-width:3em;
padding:15px;
text-align:center;
cursor:pointer;
}
.options li:first-child {
margin-left:0;
}
.options .chosen {
background:#222;
color:#fff;
}
.options [type=radio] {
position:absolute;
left:-9999px;
width:0;
height:0;
}
.options [type=text] {
width:8.5em;
padding:2px;
margin-right:15px;
border:0;
background:transparent;
color:#222;
border-bottom:1px solid #222;
}
.options .chosen [type=text] {
color:#fff;
border-color:#fff;
}
JS
$(document).ready(function () {
$('.options [type=radio]').on('click', function () {
if ($(this).is(':checked'))
{
var $options = $(this).closest('.options');
var $li = $(this).closest('li');
$options.find('li').removeClass('chosen');
$li.addClass('chosen');
$li.find('[type=text]').focus();
}
})
});
Just to make it clear. With this setup, when the value for amount is empty (which happens when the "Other" radio is selected), the amount is taken from the other field, your text box.
In my React project, I am working on focusing on an input element when specific buttons or elements are clicked. It is important for me to be able to switch focus multiple times after rendering. For instance, if a name button is clicked, the input box for ...
I successfully created both a bar chart and a pie chart using d3.js individually. Now, I am trying to load these charts into another HTML file using jQuery. $(document).ready(function() { console.log("ready!"); $("#piediv").load("file:///usr/local ...
I am facing an issue with my Node Js local server and multiple identical html pages. Each page contains user input fields that are saved on a text file. The problem arises when users refresh the page, as the data from the previous page is sent and saved ag ...
For the button click event, when clicked on desktop screens it will show a prompt message saying 'Hi'. On the other hand, when clicked on mobile screens, the prompt message displayed will be "Hello". ...
Dealing with what seems like a straightforward component here. I'm fetching an array of objects from an API, storing them in a property, and then displaying them in a select list for the user to choose from. When the value changes, I filter the result ...
I've been searching through various discussions to find a solution, but none of them seem to fit my particular scenario. My issue involves a hyperlink with absolute positioning inside a div with relative positioning. The padding and margins are curre ...
Implementing the bootstrap4 framework in my web application, I have a table displaying various values. Each row includes an edit button at the end of the row (last column). The requirement is that when this edit button is clicked, a form should pop up with ...
I have created a JavaScript function with several variables and attempted to test it to display the variables in my HTML document. However, I am facing an issue where the variables do not appear as expected. Specifically, I am trying to insert the variable ...
After years of working on a website, it has grown significantly in size. The CSS files have become quite messy and unclear. I need to figure out how to identify which parts of my extensive CSS file are not being utilized on my homepage so that I can safel ...
Hey there! I have a question... Can I use JavaScript to create a multiple select form? Here's an example: <select name="item[]"> <option value="0">Option 1</option> <option value="1">Option 2</option> </select> &l ...
In the Protractor test snippet below, I am attempting to calculate the quantity of div elements using the CSS locator: let list = element.all(by.css('div[class="ag-header-cell ag-header-cell-sortable"]')); expect(list.count()).toBe(11); ...
Hello, I'm a web designer and facing an issue with the alignment of my lightbox. The lightbox is not center aligned on any resolution, which is causing some trouble. I have also added a black overlay for transparency in the background, but it's s ...
Is there a way to adjust the bootstrap tooltip background-color based on the container? For example, my header has a white background and my footer is black. #header .tooltip-inner{ background-color:fade(@grayWhite,80); } #footer .tooltip-inner{ backgro ...
There are instances where the length of a data piece in one of my table cells causes it to expand and distort the overall layout of the table. Is there a way to avoid this from happening? ...
Just a quick question. I'm wondering if there is a way to apply padding to an ImageView using CSS in JavaFX. I've attempted insets, padding, and other methods with no success. Alternatively, can the same effect be achieved with a Text Object? ...
Currently, I am working on implementing a lightbox effect to showcase images to the user using a GridView. Upon clicking an image, a new layer should appear above the current page displaying a larger version of the image along with some description. Althou ...
My primary navigation menu is managed by WordPress and can be seen below. I aimed to modify the active state when a user clicks on a link in the menu by adding background-color and color for styling purposes. Although changing the background-color upon cl ...
Recently, I encountered a perplexing issue with my navbar. It functions correctly except for one strange behavior that has left me baffled. Why does the menu appear when I adjust the width to 631px, but disappear at 600px? And vice versa – why does it wo ...
After getting inspiration from the material-ui example of cards, I wanted to create a grid layout with multiple cards. My goal was to make all the cards have equal height (which I achieved using height:100%) and position the footer at the bottom of each ca ...
I am attempting to add a linear gradient border around a dynamically created div using JavaScript. However, I am not seeing the border show up as expected and it is not displaying in black. Check out my code snippet below: const devlogList = document.cre ...