Ii am trying to make a checkbox (to send via email) sticky.
To make sure it doesn't make a problem when sent empty I used the following:
<input type="checkbox" name="something" value="1">
<input type="hidden" name="something" value="0">
I have used things such as:
<input type="checkbox" name="something" value="1" <?=(($_POST['something']=='1')?'checked="checked"':'')?>>
But it does not work.
Can someone please help me? Many thanks Francesco
One could interpret that sticky means that user cannot uncheck the checkbox. That would be achieved using disabled="disabled" attribute.
As a side note, however, it wouldn't be very polite to force people to subscribe to some email list...
Do you mean checked?
If so then it would be
<input type="checkbox" name="something" value="1" checked="checked" />
Hope I understood that correctly
Related
I'm trying to enable a submit/go-to site button when only one of my checkboxes(any single box) has been checked - can anyone help?
this is the checkbox I'm using
<input type="checkbox" id="number2" name="number2" value="2">
<label for="number2">02 </label>
hope that helps
if you could give me help using HTML and CSS as I don't know how to use scripts that would be great thanks
try it:
<input type="checkbox" id="number2" name="number2" checked />
the checked attribute is for Checkbox Input element, when you use it and open your page, it have to check your checkbox automatic!
You have to use JS, sample:
<input type="checkbox" id="number2" name="number2" value="2" onclick="
if (this.checked)
document.getElementById('SomeSubmitButton').enable = true;
">
I told:
When user clicked on this Checkbox, enable #SomeSubmitButton if that's checked.
I work on a large Backbone application at work. The interface is essentially a big form. We use the name attribute to map our inputs to our model properties so we can autosave each field on change or enter, letting Backbone do its thing. I just spent two days trying to figure out why one particular section causes the page to reload with a weird URL. The answer is obvious now, but after building a big app over 9 months, you tend to overlook the small things.
Throughout the application we use <input> all over the place without a wrapping <form>. In one case, however, we have a repeating element in the form of a Handlebars template that contains radio buttons with the same name:
<div id="1">
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
<input type="text">
</div>
<div id="2">
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
<input type="text">
</div>
<div id="3">
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
<input type="text">
</div>
The problem with this is that they get grouped together because of they all have the same name attribute. So, instead of getting 3 values (one for each group), we were getting 1 value (for one big group).
Since we know that radio button groups are "scoped" to the containing <form>, we just wrapped it:
<div id="1">
<form>
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
<input type="text">
</form>
</div>
<div id="2">
<form>
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
<input type="text">
</form>
</div>
<div id="3">
<form>
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
<input type="text">
</form>
</div>
This works just fine for the radio buttons, but now that we have a form, hitting enter on the text <input> actually submits the form, instead of autosaving (technically, in addition to autosaving). At the time, this never even occurred to me, since we somehow managed to avoid this everywhere else in the application.
I can think of a few different solutions to this problem: setting a submit handler on the form, setting a submit handler on the text input, leaving the text input outside the form. But these seem like hacks to deal with what I would say is broken behavior. If input elements work outside of forms, then grouping input elements should work outside of forms. And since we're already using the name attribute (which works for everything else), unique names isn't really an option.
So is there a best practice for situations like this? Is there an element other than <form> that will properly scope radio buttons? Am I just going to have to live with <form onsubmit="return false;">?
P.S. We support IE 8+
UPDATE
This is what I ended up with:
<div id="1">
<form onsubmit="return false;">
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
</form>
<input type="text">
</div>
Best thing to do would be to change the names of each group to be unique.
Second best would be to group them by form like you have done, and add the return false.
Third best would be to block form submission using jquery 'preventdefault' (which could work for all forms given a particular id).
Last (and the most ridiculous option) would be to send each group of buttons to it's own small html file and use iframes to display them on the same page.
Looked at the HTML spec, but couldn't make heads or tails of it: http://www.w3.org/TR/html5/the-input-element.html#attr-input-checked
What is the correct way to check a checkbox in HTML (not dynamically)?
checked="true"
checked="checked"
What is the correct way to uncheck a checkbox?
<input type="checkbox" /> with no checked attribute
checked="false"
checked="none"
Where to check the HTML specification to check/uncheck a checkbox?
For checked state
Older browsers may need:
<input type="checkbox" checked="checked" />
But nowadays simply do:
<input type="checkbox" checked />
For unchecked state
Remove checked attribute, like:
<input type="checkbox" />
Reference: http://www.w3.org/TR/html-markup/input.checkbox.html#input.checkbox.attrs.checked
According to HTML5 drafts, the checked attribute is a “boolean attribute”, and “The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.” It is the name of the attribute that matters, and suffices. Thus, to make a checkbox initially checked, you use
<input type=checkbox checked>
By default, in the absence of the checked attribute, a checkbox is initially unchecked:
<input type=checkbox>
Keeping things this way keeps them simple, but if you need to conform to XML syntax (i.e. to use HTML5 in XHTML linearization), you cannot use an attribute name alone. Then the allowed (as per HTML5 drafts) values are the empty string and the string checked, case insensitively. Example:
<input type="checkbox" checked="checked" />
<input type="checkbox" checked />
HTML5 does not require attributes to have values
In jQuery:
To check the checkbox:
$("#checkboxid").attr("checked","checked");
To uncheck the checkbox:
$("#checkboxid").removeAttr("checked");
The other answers hint at the solution and point you to documentation that after further digging will get you to this answer. Jukka K. Korpela has the reason this is the correct answer, basically I followed his link and then looked up the jQuery docs to get to that result. Just figured I'd save future people who find this article those extra steps.
you can use autocomplete="off" on parent form, so if you reload your page, checkboxes will not be checked automatically
Complementary answer to Robert's answer http://jsfiddle.net/ak9Sb/ in jQuery
When getting/setting checkbox state, one may encounter these phenomenons:
.trigger("click");
Does check an unchecked checkbox, but do not add the checked attribute.
If you use triggers, do not try to get the state with "checked" attribute.
.attr("checked", "");
Does not uncheck the checkbox...
I'm not entirely sure why this hasn't been mentioned before, but for me, the following works:
To set it to checked:
<input type="checkbox" checked>
To set it to unchecked:
<input type="checkbox" unchecked>
(I was having the problem that checkboxes remained checked after reloading the page. Using unchecked solved my problem, so it might be useful to someone else.)
You can refer to this page at w3schools but basically you could use any of:
<input checked>
<input checked="checked">
<input checked="">
<form name="myForm" method="post">
<p>Activity</p>
skiing: <input type="checkbox" name="activity" value="skiing" checked="yes" /><br />
skating: <input type="checkbox" name="activity" value="skating" /><br />
running: <input type="checkbox" name="activity" value="running" /><br />
hiking: <input type="checkbox" name="activity" value="hiking" checked="yes" />
</form>
I am working on a Sharpoint site. I have created a Form Web Part, which is connected to a status column in a List. The web part is used to filter the list. In the web part, I have 7 checkboxes to filter the list. When I select one of the checkbox, the list gets filtered, as expected, but it checks all other 6 checkboxes. This is really annoying behavior. Can someone help?
Here is the HTML source I used for webpart:
------>
<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
<input type="checkbox" name="Status" value="Approved" checked="checked">Approved<br>
<input type="checkbox" name="Status" value="Beta-Test" >Beta-Test<br>
<input type="checkbox" name="Status" value="Under-Development" >Under-Development<br>
<input type="checkbox" name="Status" value="Created" >Created<br>
<input type="checkbox" name="Status" value="Rejected" >Rejected<br>
<input type="checkbox" name="Status" value="Estimated" >Estimated<br>
<input type="checkbox" name="Status" value="Deployed" >Deployed<br>
<input type="button" value="Go" onclick="javascript:_SFSUBMIT_"/>
</div>
<------
Select one of the status.
Click on GO.
Filter operations on the list suceeds, but all the checkboxes are selected :(.
Thanks in advance.
Madhu
I'm not good in javascript but i can say that you have it works if u get one value. But as u want to store multiple value need to have an array. That is name="status[]" . This may work
On form submission, how could you possibly mark a checkbox/radiobutton as required?
Source of inspiration: Pekka's answer to a question
Required checkboxes are not unusual. Practically every registration form uses some form of the "I have read and accept the User Agreement" checkbox.
If you have Opera handy try out the code below. The form won't submit unless the checkbox is checked.
<!doctype html>
<html>
<head>
<title>html5</title>
</head>
<body>
<h1>html5 test</h1>
<form action="/">
<input type="checkbox" required="required" id="cb" name="cb">
<label for="cb">required checkbox</label>
<input type="submit">
</form>
</body>
</html>
For checkboxes, the best way is probably to pre-select it and set it to disabled. Just kidding.
To ensure one radio button in a group has been selected, either start with a default choice or validate using javascript. There are no HTML-ways to do that because every possible selection is valid.
In html5 there is a required attribute for checkboxes.
They are somehow weird, so let me quote something to explain how they work.
For checkboxes, the required attribute shall only be satisfied when one or more of the checkboxes with that name in that form are checked.
For radio buttons, the required attribute shall only be satisfied when exactly one of the radio buttons in that radio group is checked.
Of course you always have to validate server side because the client can always send you whatever he desires. Just use these methods for better user experience.
I tested required attribute for Radio Buttons today on Firefox 17.0.1 on XP SP2.
It seems to comply with the specification of required attribute for radio buttons/groups. As Firefox prompts "Please select one of these options." for both of the code snippets below:
Either you set required attribute for each of the radio buttons
<input type="radio" name="gender" value="male" required="required" />
<input type="radio" name="gender" value="female" required="required" />
Or Any One of the Radio elements
<input type="radio" name="color" value="blue" />
<input type="radio" name="color" value="red" required="required" />
<input type="radio" name="color" value="green" />
Any comments and updates are welcome.
I just tried it on a radio button in Firefox 4. Adding required to one radio input, then submitting before selecting one, triggers a "Please select one of these options" tooltip.
E.g. this works:
<input type="radio" name="gender" value="m" required />
<input type="radio" name="gender" value="f" />