I am not good with front-end and HTML is what I would ideally like to work with here (if I can avoid engaging js/jquery here). I have a single textbox with multiple radio buttons - say, item1, item2,...item5. Each item1, 2... corresponds to a field. When a user enters, say, 'abc' in a textbox and selects 'item3', it should return all items having 'abc' in item3 field. I can do it with individual textboxes for each item1, 2.. but I need just one textbox associated with all the radio fields.
Here's the relevant html/template code.
<form action={% url 'search-fields-radiofields' %} method="get">
<div align="left">
<input type="text" name="name" size="54" />
<br><br>
<input type="radio" id="radio1"name="name">
<label for="radio1">item1</label>
<input type="radio" id="radio1"name="name">
<label for="radio2">item2</label>
<input type="radio" id="radio1"name="name">
<label for="radio3">item3</label>
<input type="radio" id="radio1"name="name">
<label for="radio4">item4</label>
<input type="radio" id="radio1"name="name">
<label for="radio5">item5</label>
<br><br>
<input id="search_fields" type="submit" value="Search" size="100"/>
</div>
</form>
Say, the search term is 'test'. And I select item5. Returns a MultiValueDictKeyError with Get data of
Variable Value
u'name'[u'test', u'on']
. name is one of the fields in the db and item5 is supposed to correspond to it. Similarly, if I change the textbox name to 'item1', then Get data is
Variable Value
u'item1' [u'test', u'on']
I have a dedicated view to handle all the radio inputs and it works with individual textboxes corresponding to each of the items. But I need to associate all 5 radio buttons with only 1 textbox as above.
There's no need to "associate" the buttons with the text box at all.
What you are missing is that each of the radio buttons themselves needs a value. Once you've done that, but given them a different name, you're all set.
<input type="text" name="name" size="54" />
<input type="radio" id="radio1" name="field" value="item1">
<label for="radio1">item1</label>
<input type="radio" id="radio1" name="field" value="item2">
<label for="radio2">item2</label>
...etc
Now request.GET will be {'name': 'test', 'field': 'item1'} or whatever.
Thanks all. Solved it from backend myself. The problem was that I was trying to get the request to send just the text value with the key=whatever-radio-is-selected. What I did was looked at the request it was sending which was name=? and textbox=? and then used these two keys to send the right response.
Related
I have a HTML form with radio buttons and are able to select multiple but why? I can't help myself.
This is my HTML:
<input type="radio" name="nameA" id="nameA" value="nameA">
<label for="nameA">Choice A</label>
<input type="radio" name="nameB" id="nameB" value="nameB">
<label for="nameB">Choice B</label>
For anyone finding this question: Solution is to give them the same NAME
<input type="radio" name="sameName" id="nameA" value="nameA">
<label for="nameA">Choice A</label>
<input type="radio" name="sameName" id="nameB" value="nameB">
<label for="nameB">Choice B</label>
All radio buttons that share the same name and are controls in the same form are part of a group.
Only one radio button in a group can be checked.
You have two radio buttons with different names. This means that you have two radio groups, each containing one radio button.
You need to put them in the same group (by making them share a name) if you only want one of them to be selected.
(They should still have unique ids (so you can give each one a label) and values (which is how you determine which one was checked when the form is submitted to the server)).
<form>
<fieldset>
<legend>Thing that is being chosen</legend>
<input type="radio" name="name" id="nameA" value="nameA">
<label for="nameA">Choice A</label>
<input type="radio" name="name" id="nameB" value="nameB">
<label for="nameB">Choice B</label>
</fieldset>
</form>
Whenever you are creating radio buttons (with the intention of
ensuring users would be able to select only 1 option), please ensure
to have the value of the name attribute the same
Please update your code like this :
<input type="radio" name="sameName" id="nameA" value="nameA">
<label for="nameA">Choice A</label>
<input type="radio" name="sameName" id="nameB" value="nameB">
<label for="nameB">Choice B</label>
I am working on this little project with an online order service for pizzas.
(using Spring Web MVC, Thymeleaf, ...)
Yesterday, someone helped me out adding inputs for selecting an specific amount and size.
<div>
<form th:action="#{/saveOrderAndReload(name=${pizza.name})}" method="post">
<div class="input-group">
<span class="input-group-addon">Bestellmenge (min. 1, max. 10):</span>
<input type="number" name="amount" class="form-control" min="1" max="10" placeholder="1"/>
</div>
<div class="input-group">
<input type="radio" name="size" value="1"> Klein</input>
<input type="radio" name="size" value="2"> Mittel</input>
<input type="radio" name="size" value="3"> Gross</input>
</div>
<div class="form-group">
<div class="form-group">
<input type="submit" class="btn btn-primary btn-success" value="zur Bestellung hinzufuegen"/>
</div>
</div>
</form>
The "amount" field protects the application itself from false input because it only allows integers from 1-10, otherwise the User gets a notification asking for an numeric input.
The radio input where you can select between 3 sizes has 2 problems:
1) The buttons arent among themselfes, they are next to each other.
2) I dont know how to prevent the user from doing no input.
I looked around for quite some time finding the standart html version for this:
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
And something like this:
<ul>
<li th:each="ty : ${allTypes}">
<input type="radio" th:field="*{type}" th:value="${ty}" />
<label th:for="${#ids.prev('type')}" th:text="#{${'seedstarter.type.' + ty}}">Wireframe</label>
</li>
</ul>
We didnt learn anything about the second one so I decided to use the standart html. But I does not want to work like that example: It gets errors that this "checked" expression is not allowed, " tag is not closed" and whatnot.
So my questions are:
1) What can I do to make the input look better?
2) How can I set like a placeholder or standart value so the application always gets this input and does not crash?
As you might have realized I am a complete beginner with this type of stuff so be lenient ;)
Answer 1
If you want the change the way the radio buttons are looking, this might help: http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/.
Some notes and Answer 2
It gets errors that this "checked" expression is not allowed, " tag is
not closed" and whatnot.
Thymeleaf dies not allow attribute minimization. That means that you need to provide a value for each attribute. You just have to use checked="checked" instead of checked.
<form method="post">
<!-- Make sure to always set a value for attributes when using thymeleaf (use checked="checked" instead of checked) -->
<div><input type="radio" name="gender" value="male" checked="checked" />Male</div>
<div><input type="radio" name="gender" value="female" />Female</div>
<div><input type="radio" name="gender" value="other" />Other</div>
</form>
This is actually wrong:
The "amount" field protects the application itself from false input
because it only allows integers from 1-10, otherwise the User gets a
notification asking for an numeric input.
You are only validating on the client side. Clientside validation is okay if you want to give your users feedback even before they submit your form but it is not enough to protect yourself from bad input.
Nathan Long does explain why client side validation is not enough pretty well (JavaScript: client-side vs. server-side validation):
It is very dangerous to trust your UI. Not only can they abuse your
UI, but they may not be using your UI at all, or even a browser. What
if the user manually edits the URL, or runs their own Javascript, or
tweaks their HTTP requests with another tool? What if they send custom
HTTP requests from curl or from a script, for example?
As you are using spring-mvc you should take adventage of it and take a look at the following tutorial: https://spring.io/guides/gs/validating-form-input/.
To provide default values when working with spring-mvc you can just give the field a value:
public class PersonForm {
// this field will have a default value (foo)
// NotNull will ensure that a value is set for this field when validated by spring (however it can be an empty string... take a look at hibernates #NotBlank annotation if you want to prevent empty string or use a regex)
#NotNull
private String gender = "foo";
}
However default values often dont make sense for input[type="text"]. If you want to prodive a placeholder for any input you could just use the html attribute placeholder="the placeholder":
<input type="text" name="name" value="" placeholder="Enter your name" />
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.
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
I remember reading in the spec once that both the id attribute and the name attribute share the same namespace and have to be unique. Henceforth I've always tried to fulfill this requirement in my applications, dreading even to give the same id and name to the same element.
But lately I've started working with ASP.NET MVC 3, and it (like PHP) can use the same name attribute on several input controls to form a collection of values at server-side. I tried to look up the relevant section in the spec - but failed to find it. Perhaps I have misunderstood something then, or read the wrong documentation?
How is it then? I want to produce as valid HTML as possible (both 4.01 and 5 in different apps). Can I use this trick without fear? Or would I be violating something and should better stick to unique values?
The name attribute is only valid on the <form> and form elements (<input>,<textarea> and <select>). It's used to specify the name to associate with the name/value pair that is submitted on a form post.
For example:
<input type="checkbox" name="foo" value="1" />
if checked will submit foo=1. In the DOM you can reference form elements from the form.elements collection by specifying the name as the index. If name is not unique, the collection returns an array of elements rather than the element. Modern DOM's support looking up form elements by name as:
document.getElementsByName(nameValue)
note: it always returns an array even if only one element is found.
id attribute is from the XML world, and is a unique id for any node, not just form elements. Unlike the name attribute it is valid on any HTML node. Also like the name attribute, it must follow the valid identifier rules. The identifier should start with an alpha, and only contain alpha ([a-zA-Z]), numbers, hyphen, underscore and colons (note ASP.NET breaks this rule by starting reserved IDs with a underscore - thus they will always fail an HTML/XML lint - actually some proxies strip them). To find any HTML element by id you use:
document.getElementById(idvalue)
this only returns one DOM node.
The name attribute is not unique. For instance, it is used to group radio buttons. It represents the value of a particular form property. ids must be unique.
ID should be unique but you can use multiple form elements with the same NAME. This is standard for how radio buttons work so you can force one seletion of a radio button group.
Must names be unique between forms for radio input groups?
I understood that name didn't have to be unique because radio elements can share the same name, but nobody said whether or not groups of radio elements in different forms would interfere with each other or not. So I created this simple example below to test. In my browser, I can pick 2 of the 6 radios in the example below, and there are two forms. So it appears that putting them in separate forms will isolate them.
<form>
<input type="radio" name="test" value="1">
<input type="radio" name="test" value="2">
<input type="radio" name="test" value="3">
</form>
<form>
<input type="radio" name="test" value="a">
<input type="radio" name="test" value="b">
<input type="radio" name="test" value="c">
</form>
I also wondered if the same behavior would hold true with the newer <fieldset> element, however it doesn't seem to. I guess that makes sense because if I sent the form it would need to format the data to accommodate the name conflict somehow. I can only pick 1 among the 6 radios here:
<form>
<fieldset name="test1">
<legend>test1</legend>
<input type="radio" name="test" value="1">
<input type="radio" name="test" value="2">
<input type="radio" name="test" value="3">
</fieldset>
<fieldset name="test2">
<legend>test2</legend>
<input type="radio" name="test" value="a">
<input type="radio" name="test" value="b">
<input type="radio" name="test" value="c">
</fieldset>
</form>
I'm not sure why anyone would want to do this, but you can also associate each element with a different form by using the form=<form id> attribute. It seems to separate the radio groups again. As shown here:
<form id="a">
</form>
<form id="b">
</form>
<fieldset name="test1">
<legend>test1</legend>
<input form="a" type="radio" name="test" value="1">
<input form="a" type="radio" name="test" value="2">
<input form="a" type="radio" name="test" value="3">
</fieldset>
<fieldset name="test2">
<legend>test2</legend>
<input form="b" type="radio" name="test" value="a">
<input form="b" type="radio" name="test" value="b">
<input form="b" type="radio" name="test" value="c">
</fieldset>
I think ideally a fieldset would create some sort of grouping that was more than just visual, but it doesn't oh well. At least radio groups can be separated by forms.
Addendum: What does the form data look like when you use the same name within two or more fieldsets inside of one form? Let's see.
My suspicions are confirmed. There's just one 'test' parameter and fieldsets have no effect on the data at all. Try picking a radio and hitting submit.
function examine(e){
e.preventDefault()
e.stopPropagation()
var formData = new FormData(e.target)
,formProps = Object.fromEntries(formData)
document.getElementById('out').innerText = JSON.stringify(formProps,null,2)
return false;
}
document.getElementById('mainform').addEventListener('submit',examine)
<form id="mainform">
<fieldset name="test1">
<legend>test1</legend>
<input type="radio" name="test" value="1">
<input type="radio" name="test" value="2">
<input type="radio" name="test" value="3">
</fieldset>
<fieldset name="test2">
<legend>test2</legend>
<input type="radio" name="test" value="a">
<input type="radio" name="test" value="b">
<input type="radio" name="test" value="c">
</fieldset>
<button type="submit">examine</button>
</form>
<pre id="out"></pre>