I am creating a small form where the user
Enters some text in an input box
Chooses from a bunch of options
regarding the actions that need to
be taken with the data
Clicks a submit button
Disconnect does something similar in a better way:
you can click on any of the five divisions here. This is wonderful because it makes it easier for users to perform the same task and simplifies choose and click to click.
What technology is used to display such a menu?
A nice way of doing this is - which doesn't need javascript - is to use radio buttons, but make them invisible. The clickable text and icon go inside of the label for each radio button, so you can click the label or icon to select the radio button.
This ensures a few important things:
Only one item can be selected
The selection is passed back with the form
The browser's native form handling still works
Accessibility options still work
You do have to be careful to make the labels obviously clickable, since you lose the visual cue of having the radio buttons visible.
IE6 & 7 also require a hack - they have a weird behaviour that a display:none or visibility:hidden radio button or checkbox cannot be selected by clicking its label.
Here's an example: http://www.spookandpuff.com/examples/clickableToggles.html
(I haven't included the icons - you can easily add these by setting them as the background in CSS for each item (don't use <img> tags).
Edit Oh man - I just read the question properly! Sorry, you want the behaviour to be 'choose' rather than 'choose and submit'... An easy way to do this is to add some javascript to the inputs to have them auto-submit the forms when they're selected. I've updated the example to show this.
Looks like JavaScript: https://github.com/disconnectme/disconnect.me
Related
I have a group of <buttons> that I would like to act similarly to radio buttons. When a button is clicked, I need it to stay active, and when another button in that set is clicked, it needs to be made inactive and the new button needs to become active. I am using React.
I've tried different solutions and none have worked. Is there a way to do it with vanilla JS or React? Should I just use jQuery?
You can try some npm package that provides Radio Componenet to achieve this. You can search for packages and use the one you like. I am currently using Mantine which provides a lot of React components.
However, This is the one that I made. Take a look at it. Here is the link.
https://codesandbox.io/s/cold-water-ij5bfx?file=/src/App.js.
I’m looking to create a pop up where by the user inputs data, then select one of two radio options by the UI seems to screw up when I have a combination of both text type and radio type in a pop-up.
Here is my code:
I was also looking for same thing today.
But look at this discussion, which says mixing of radio, checkbox or text box is not available right now.
I also tried to add mixture of radio and text field in alert. But styling never appeared correct.
I am moving on to implement this feature using a ionic page so that I can use Ionic Modal. This behaves as a modal window on large screen and as pushed page in smaller screen.
I needed to send back data from parent page to child page and other way too. Thus Ionic Modal suited best for this in my situation which can be used on component/page.
Refert to this detailed usage instructions for Ionic Modal.
Same feature has been requested from Ionic team.
Anyone with firefox browser can you open up this fiddle.
The issue I have is with this checkbox button I have, it requires multiple clicks to turn it off and my question is how can I stop this from happening? I know its the posistion:relative which is causing this but I need this so that every time I click on a button, it does not go to the top of the page. I just want the button to turn on and off in one click, not multiple clicks
(See comments below the question - now I know what happens to you)
Ahhh - you cannot solve this without Javascript: quick (double?) click on the TEXT ITSELF is interpreted as "select text" by the browser, and it does not send the event to the checkbox when that happens. With Javascript you can force "un-select" of the text on click.
Click "slowly" - avoiding double click text selection - and it will work (just to show the cause of the problem, no solution without Javascript or proprietary CSS).
Try adding this: Prevent text selection after double click
Maybe you should use a full Javascript Checkbox-Button solution instead of trying to accomplish it with just CSS.
Take a look at this sample: http://jsbin.com/imivek/1/edit
Clicking the text field, which is part of the label, behaves oddly in Firefox (tested in v17.0.1):
Clicking it once will give it focus for a very brief period of time, after which the focus moves to the radio button.
Clicking it twice shortly after each other will maintain focus.
Focusing it by other means (f.e. tab) will work fine and as expected.
Handling the text field's click event and preventing it from bubbling up (e.stopPropagation() in jQuery terms) doesn't change anything.
Who can explain this behavior and recommend how to best work around it?
You may have only one form control inside a label. You have two. Your HTML is invalid so weird behaviour is to be expected as browsers attempt to compensate for your mistake.
Clicking it once will give it focus for a very brief period of time, after which the focus moves to the radio button.
You clicked on the label. That sets the focus to the radio button (since the label appears to be a label for it).
Clicking it twice shortly after each other will maintain focus.
Probably some sort of error recovery
Focusing it by other means (f.e. tab) will work fine and as expected.
You aren't clicking the label then
Handling the text field's click event and preventing it from bubbling up (e.stopPropagation() in jQuery terms) doesn't change anything.
It is native functionality, not scripted functionality.
Write valid HTML.
Why do you have two <input>'s in the same <label>? What are you trying to do? A label is supposed to be bound to one input element and act as a caption for it, so that when you click it, the input takes focus.
This is a FF bug
https://bugzilla.mozilla.org/show_bug.cgi?id=213519
Reported in 2003, still not fixed!
Ok, here's the thing.
I've done a webpage which contains forms and so I added buttons as elements and this works great. I created their own css classes and use graphics as background images for each of them. All working great (these are submit buttons btw)
Anyway, I've also got a jQuery script from before that takes all a href hyperlinks and add content from a set div from an external file and adds to a div in my current page, all in one animation. But this would probably not work with form buttons?
In any case I need to be able to have these buttons work as traditional hyperlinks anyway. So what do I do?
I thought about using css-buttons alltogether, but I'm not able to have them stack vertically. Using float left or right just put the buttons outside of their parent containers (probably a different fix for that).
But in any case, using css buttons, that wouldn't work as a submit button for the forms anyway would it? Should I perhaps use both form buttons and css buttons? What do you do?
<button> elements.
You should never use links to submit data, users with javascript disabled won't be able to use them, crawlers can submit data accidentally, etc...