[Solution: Change my names to arrays by concatenating "[]" to the end. Also, change my IDs to be unique values to conform to HTML specifications]
I'm creating a form, that has a matrix (html table) of checkboxes with one user per row, and user permissions on the columns. Each cell has a checkbox. Each checkbox in a row has the "name" set to the user's email address (unique). The values of the checkboxes are the IDs of the particular permission. when I click the submit button, and inspect the params I get back from the HTTP POST, only the right-most checkbox is set for rows that have multiple boxes checked.
For example, there are three checkboxes, first and second checked, third unchecked. I only get back the name=id of that second checkbox.
I'm building the form in Rails, although I don't believe that to be relevant really. Also, the browser that's giving this behavior is Chrome, Iceweasel, and Epiphany... So I think it's my form.
An excerpt of my form:
<tr>
<td>UserOne</td>
<td>one#oreo.com</td>
<td>
<input checked="checked" id="one_oreo.com" name="one#oreo.com" type="checkbox" value="1" />
</td>
<td>
<input id="one_oreo.com" name="one#oreo.com" type="checkbox" value="2" />
</td>
<td>
<input id="one_oreo.com" name="one#oreo.com" type="checkbox" value="3" />
</td>
<td>
<input checked="checked" id="one_oreo.com" name="one#oreo.com" type="checkbox" value="4" />
</td>
<td>
<input id="one_oreo.com" name="one#oreo.com" type="checkbox" value="5" />
</td>
<td>
<input id="one_oreo.com" name="one#oreo.com" type="checkbox" value="6" />
</td>
</tr>
You have set the name="" on all of them to the same thing, so it is going to replace whatever value was originally there when you tick more than one checkbox.
Either give each checkbox a different name e.g. name="one#oreo.com_check_1" or turn them in to an array using name="one#oreo.com[]" This will then store all values passed to it in an array that you can then process after the form has been submitted!
The names of your checkboxes need to be unique. I suggest puttitempeh user id and permission id in the name. Also you should change the Ida accordingly. The ids don't affect form submission but it is incorrect to have multiple elements with the same id in HTML.
You can't name the name param to the same value for each row. Checkboxes need to be unique or at least an array. Radio buttons are where you would use the same name value.
Related
I'm new to Gatling and have to design a performance test. I need to login with several users, who each have different possibilities to choose from. Each possibility has the option to choose it or not and looks somewhat like this in the HTML-Code (simplified)
<input type="radio" name="Name123" value="1" checked="checked" class="uebernehmen">
I need to give the Element under name in formParam in the script. In this case, that is Name123. Like I said, the possibilities are different for each user and each possibility has a different value under name. Is there any way to get that value from the first possibility in the form?
It might be important to say, that if not obvious already, this is just a part of a form and there are various of these, packed in more HTML. One of these elements inside the form would look like this.
<tr>
<tbody class="tagcontent" id="ID"><tr id="ID" class="kurs" >
<td>
<input type="radio" name="Name123" value="1" class="uebernehmen">
</td>
<td>
<input type="radio" name="Name123" value="2" class="abwaehlen">
</td>
</tbody>
</tr>
In addition there is following block at the beginning of the form, where I need to extract the value of PersonID and AccountID, is that possible too?
<input type="hidden" name="PersonID" value="IDP">
<input type="hidden" name="AccountID" value="IDA">
Thanks in advance!
Use a CSS selector check like demoed in the tutorial and in the Gatling Academy.
Fieldset and legend elements are used to group related form controls. This is easy to understand and apply for "regular" forms, e.g. a "Your Details" fieldset with text input fields for first name, surname etc.
However, should fieldset and legend elements be used on a list page in an application, where users select table rows with associated checkboxes, prior to performing a bulk action on the selected rows?
For example:
<form>
<fieldset>
<legend>Users</legend>
<table>
<thead>
<tr>
<th></th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="SelectedItem" value="Anna" /></td>
<td>Anna</td>
</tr>
<tr>
<td><input type="checkbox" name="SelectedItem" value="Chris" /></td>
<td>Chris</td>
</tr>
</tbody>
</table>
<label for="ListAction">Bulk action</label>
<select id="ListAction" name="ListAction">
<option value="Nothing" selected="selected">Select action</option>
<option value="Delete">Delete</option>
<option value="Suspend">Suspend</option>
</select>
<input type="submit" value="Go" name="BulkActionGo" />
</fieldset>
</form>
https://www.w3.org/TR/WCAG20-TECHS/H71.html states that "Grouping controls is most important for related radio buttons and checkboxes. A set of radio buttons or checkboxes is related when they all submit values for a single named field."
This is the case in the example above, but fieldset/legend still doesn't seem like a natural fit for this use case, which may contain a lot of tabular data - and unrelated pagination controls - rather than a simple set of form controls.
The easiest solution is to name each checkbox with a different name, for instance using an array (which is easily parsable in PHP for instance)
<tbody>
<tr>
<td><input type="checkbox" name="SelItem[0]" value="Anna" title="Select Anna" /></td>
<td>Anna</td>
</tr>
<tr>
<td><input type="checkbox" name="SelItem[1]" value="Chris" title="Select Chris" /></td>
<td>Chris</td>
</tr>
This way it will be apparent for assistive technologies (and any inner algorithm inside your software or external softwares) that your intent is not to create group related checkboxes, but a set of checkboxes related to individual records.
The fieldset is useful for situations where the legend give the instructions:
<fieldset>
<legend>Select your favorite Beatles</legent>
<label><input type="checkbox" nama="fab4" value="John" />John</label>
<label><input type="checkbox" nama="fab4" value="Paul" />Paul</label>
<label><input type="checkbox" nama="fab4" value="George" />George</label>
<label><input type="checkbox" nama="fab4" value="Ringo" />Ringo</label>
</fieldset>
If you want to specify characteristics about individual records, the intent is different and the checkbox names may be linked to the row, not to the column.
<div class="group">
<div class="member">
<div class="name">John</div>
<label><input type="checkbox" name="john[is_singer]" value="1" />Sing</label>
<label><input type="checkbox" name="john[play_guitar]" value="1" />Play guitar</label>
</div>
<div class="member">
<div class="name">Paul</div>
<label><input type="checkbox" name="paul[is_singer]" value="1" />Sing</label>
<label><input type="checkbox" name="paul[play_guitar]" value="1" />Play guitar</label>
</div>
</div>
This will let assistive technologies handle the form easily without the use of any redundant fieldset
No, there's no reason to include it in a fieldset. If you want to apply styling elements or refer to it in JavaScript, you can put it in a div, but a fieldset doesn't have any practical application in this case.
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.
I'm a beginner, so I'd like to ask if someone could give me a hand in building a research form in HTML (with JS) that must have 2 checkboxes and can be disabled by the third.
<table>
<tr>
<td>Do you like fishing?:</td>
<td><input type="checkbox" value="" id="fish"></td>
</tr><br />
<tr>
<td>Or do you like jogging?:</td>
<td><input type="checkbox" value="" id="wake"></td>
</tr><br />
<tr>
<td>None of that:</td>
<td><input type="radio" value="" id="none"></td>
</tr>
</table>`
My goal is to use the third cell to cancel the first and second options.
The logic of your questions tells me you shouldn't use checkboxes because you are asking the user to choose one answer or the other. Radio buttons are perfect for this. Checkboxes allow multiple choices to be selected.
If you want to "disable" items you should use javascript to set the "disabled" attribute to your questions when the "none of the above" is ticked.
Disabled input fields are not in the POST array when the form is submitted.
From the given question you have supplied you should use a radio button group. This will only allow one of the three available answers your question is asking the user to complete.
example: http://www.echoecho.com/htmlforms10.htm
I have the following form code but I cannot select the sell radio in IE
and I can select both radios at once in Google Chrome.
<form method="post" action="dothemath.php" style="width: 403px" class="style1">
<input type="radio" id="rdobuy" style="width: 20px; height: 21px;" checked="checked"/>
<label>Buy</label>
<input type="radio" id="rdosell" style="width: 20px; height: 21px;"/>
<label >Sell</label>
</form>
Is there any thing I am missing...?
Your radio buttons don't have name attribute. They need them for two reasons.
Having the same name groups a set of radio buttons into a single radio group
The name is used to generate the form data to be submitted to the server
You also need a value to say what the submitted data is going to be.
As an aside, your <label>s are useless as they aren't associated with any controls. They need a for attribute with the same value as the id of the control they are to be associated with.
<form method="post" action="dothemath.php">
<input type="radio" id="rdobuy" name="foo" value="buy" checked="checked"/>
<label for="rdobuy">Buy</label>
<input type="radio" name="foo" value="sell" id="rdosell" />
<label for="rdosell">Sell</label>
</form>
You should add a name attribute and the names should be same for both radios.
you should add a name attribute to all your HTML element listed in your code. it helps the browser to identify what it sends to the server. Radios are optional based, you cant select two at a time, except you're using php arrays, simply use a check button instead for that.