Basically what I'm looking to do is the following:
Have an HTML table in my jsp. Each row corresponds to a specific part. In one of the columns I would like to have a radio button that corresponds to an action for that specific part Let's say 'Delete', 'Archive', 'Ignore'. I'd like to pass this information on to my servlet.
Ideally I'd like to parse the entire table, for each part ID seeing whether the user selected 'Delete', 'Archive' or 'Ignore' then perform an action based on that. I have two questions:
First, What is the best way/is it possible to access the entire table from the request?
Second, How can I access the radio buttons for a specific row (part id) and determine which one was selected?
<form action="">
<table>
<tr>
<th>Row ID</th>
<th>Radio</th>
</tr>
<tr>
<td>12341</td>
<td>
<label class="radio-inline"><input type="radio" name="12341_radio" value="1">Delete</label>
<label class="radio-inline"><input type="radio" name="12341_radio" value="2">Archive</label>
<label class="radio-inline"><input type="radio" name="12341_radio" value="3">Ignore</label>
</td>
</tr>
<tr>
<td>12342</td>
<td>
<label class="radio-inline"><input type="radio" name="12342_radio" value="1">Delete</label>
<label class="radio-inline"><input type="radio" name="12342_radio" value="2">Archive</label>
<label class="radio-inline"><input type="radio" name="12342_radio" value="3">Ignore</label>
</td>
</tr>
<tr>
<td>12343</td>
<td>
<label class="radio-inline"><input type="radio" name="12343_radio" value="1">Delete</label>
<label class="radio-inline"><input type="radio" name="12343_radio" value="2">Archive</label>
<label class="radio-inline"><input type="radio" name="12343_radio" value="3">Ignore</label>
</td>
</tr>
<tr>
<td>12344</td>
<td>
<label class="radio-inline"><input type="radio" name="12344_radio" value="1">Delete</label>
<label class="radio-inline"><input type="radio" name="12344_radio" value="2">Archive</label>
<label class="radio-inline"><input type="radio" name="12344_radio" value="3">Ignore</label>
</td>
</tr>
<tr>
<td>12345</td>
<td>
<label class="radio-inline"><input type="radio" name="12345_radio" value="1">Delete</label>
<label class="radio-inline"><input type="radio" name="12345_radio" value="2">Archive</label>
<label class="radio-inline"><input type="radio" name="12345_radio" value="3">Ignore</label>
</td>
</tr>
</table>
<input type="hidden" name="id_list" val="12341,12342,12343,12344,12345">
</form>
In above code i have put common name for radio in same row. And every group name contains rowid following with _radio and an hidden input containing comma separated list of row ids.
On submitting form on servlet side you should perform operations listed below :-
First of all get the hidden input.
Separate then into an array.
Iterate over array so you have id list and form string rowid_radio i.e. '12341_radio','12342_radio' etc.
then you can get values of all the radio buttons from different row.
Related
I'm trying to get a form to output a number value based on the outcome of two fields. A value input and a radio selection but I can't seem to get it to work.
<form oninput="retVal.value=parseInt(pavVal.value)-(parseInt(pavVal.value)*parseInt(pavCAT.value))">
<table>
<tr>
<td>
<label for="pavVal"><b>PAV:</b></label>
</td>
<td>
<input type="number" id="pavVal">
</td>
</tr>
<tr>
<td>
<label for="pavCAT" ><b>CAT:</b></label>
<td>
<input type="checkbox" name="pavCAT" id="pavCAT" value="0.3">
<label for="0.3" > N (30%)</label>
<input type="checkbox" name="pavCAT" id="pavCAT" value="0.2">
<label for="0.2" > S (20%)</label>
<input type="checkbox" name="pavCAT" id="pavCAT" value="0.1">
<label for="0.1"> B (10%)</label>
</td>
</tr>
<tr>
<td>
<label for="retVal"><b>Retention Value:</b></label>
</td>
<td>
<output name="retVal" for="pavVal pavCAT"></output>
</td>
</tr>
</table>
</form>
Anyone able to tell me where I'm going wrong>
Ids must be unique -- there were three #pavCAT. When the browser is told to do anything with #pavCAT, it will find the first #pavCAT do whatever it was supposed to do then quit, leaving the other 2 #pavCATs untouched as if they never existed. The easiest solution is to suffix each id with a number.
The rest of the code should work since in this case the id #pavCAT is just as accessible as the name [name="pavCAT"].
Also, the HTML had checkmarks not radios.
The inline event handler is now streamlined:
oninput = "retVal.value = pavVal.value - (pavVal.value * pavCAT.value)"
Note that parseInt() isn't used to convert the string values into numbers. That's because the strings are being coerced into numbers by the use of these operators: - and *.
<form id='calc' oninput = "retVal.value = pavVal.value - (pavVal.value * pavCAT.value)">
<table>
<tr>
<td>
<label for="pavVal"><b>PAV:</b></label>
</td>
<td>
<input id="pavVal" type="number">
</td>
</tr>
<tr>
<td>
<label for="pavCAT"><b>CAT:</b></label>
</td>
<td>
<input id="pavCAT3" name="pavCAT" type="radio" value="0.3">
<label for="pavCAT3"> N (30%)</label>
<input id="pavCAT2" name="pavCAT" type="radio" value="0.2">
<label for="pavCAT2"> S (20%)</label>
<input id="pavCAT1" name="pavCAT" type="radio" value="0.1">
<label for="pavCAT1"> B (10%)</label>
</td>
</tr>
<tr>
<td>
<label for="retVal"><b>Retention Value:</b></label>
</td>
<td>
<output name="retVal" for="pavVal pavCAT"></output>
</td>
</tr>
</table>
</form>
Your formula is working, but you assigned the same ID for the pavCat checkbox elements, thus returning NaN and not the correctly assigned value - try it yourself with removing/commenting out two ot the pavCAT elements.
imho is a checkbox the wrong UI element - go for a single select dropdown or even better a radio input.
Also parseInt should be parseFloat instead for pavCat. Anyways it's a little bit over the top in this situation and you could totally remove it in this simple example - maybe you have more context to justify parsing it.
<input type="radio" id="pavCat1" name="pavCAT" value="0.3">
<label for="0.3" > N (30%)</label>
<input type="radio" id="pavCat2" name="pavCAT" value="0.2">
<label for="0.2" > S (20%)</label>
<input type="radio" id="pavCat3" name="pavCAT" value="0.1">
<label for="0.1"> B (10%)</label>
https://jsfiddle.net/p9v1f53w/16/
This question already has an answer here:
2 sets of radio buttons with same IDs
(1 answer)
Closed 10 months ago.
When I click the text of "prefer not to say" of the second and third questions, the first question's answer changes to "prefer not to say". When I click the text of 'other' of the third question, the second question's answer changes to 'other'. In both cases, the third question's 'other' and 'prefer not to say' do not check when I click text. What is wrong with this code?
It runs well when I click the radio button.
<div>
<p><strong>1. What is your age?</strong></p>
<input type="radio" id="Under18" name="h11" value="Under18">
<label for="Under18">Under 18</label><br>
<input type="radio" id="18-25" name="h11" value="18-25">
<label for="18-25">18 - 25</label><br>
<input type="radio" id="26-35" name="h11" value="26-35">
<label for="26-35">26 - 35</label><br>
<input type="radio" id="46-55" name="h11" value="46-55">
<label for="46-55">46 - 55</label><br>
<input type="radio" id="Over55" name="h11" value="Over55">
<label for="Over55">Over 55</label><br>
<input type="radio" id="Prefer not to say" name="h11" value="Prefer not to say">
<label for="Prefer not to say">Prefer not to say</label>
</div>
<div>
<p><strong>2. What is your gender?</strong></p>
<input type="radio" id="Female" name="h12" value="Female">
<label for="Female">Female</label><br>
<input type="radio" id="Male" name="h12" value="Male">
<label for="Male">Male</label><br>
<input type="radio" id="Other" name="h12" value="Other">
<label for="Other">Other</label><br>
<input type="radio" id="Prefer not to say" name="h12" value="Prefer not to say">
<label for="Prefer not to say">Prefer not to say</label>
</div>
<div>
<p><strong>3. What is your ethnicity?</strong></p>
<input type="radio" id="White/Caucasian" name="h13" value="White/Caucasian">
<label for="White/Caucasian">White/Caucasian</label><br>
<input type="radio" id="Hispanic/Latino" name="h13" value="Hispanic/Latino">
<label for="Hispanic/Latino">Hispanic/Latino</label><br>
<input type="radio" id="Black/African American" name="h13" value="Black/African American">
<label for="Black/African American">Black/African American</label><br>
<input type="radio" id="Asian/Pacific Islander" name="h13" value="Asian/Pacific Islander">
<label for="Asian/Pacific Islander">Asian/Pacific Islander</label><br>
<input type="radio" id="Native American/American Indian" name="h13" value="Native American/American Indian">
<label for="Native American/American Indian">Native American/American Indian</label><br>
<input type="radio" id="Other" name="h13" value="Other">
<label for="Other">Other</label><br>
<input type="radio" id="Prefer not to say" name="h13" value="Prefer not to say">
<label for="Prefer not to say">Prefer not to say</label>
</div>
This is because your radio inputs have the same ID.
Every element needs to have unique ID, so just change some of them and you should be fine. Don't forget to update your for attributes aswell.
IDs are global in the DOM.
Your label is targeting the control with the id "Prefer not to say", so the first control with the ID that matches the for attribute in the label is activated.
Add a 1, 2, 3, etc... to the ids and for attri
I would like to pass multiple value with check box,is any provision to pass multiple value using
check box in html.
<input type="checkbox" name="service_id[]" value="1">
please suggest me how should be it is possible
It can be done this way:
HTML
<form method="post">
<input type="checkbox" name="service_id[0][]" value="1">
<input type="checkbox" name="service_id[0][]" value="2">
<input type="checkbox" name="service_id[1][]" value="3">
<input type="checkbox" name="service_id[1][]" value="4">
<input type="checkbox" name="service_id[1][]" value="5">
<input type="submit">
</form>
PHP
<?php
if(!empty($_POST['service_id']))
var_export($_POST['service_id']);
You can only have one value per input. If you want to have multiple values, then either:
give each set of values a unique identifier and resolve it on the server
encode the data in a format like JSON or CSV and then parse it on the server
If you want to have multiple inputs with different values, then just create multiple elements in the HTML.
PHP will discard all but one of them if they come from inputs which share a name and that name doesn't end with [], but your name does:
<input type="checkbox" name="service_id[]" value="1">
<input type="checkbox" name="service_id[]" value="2">
<input type="checkbox" name="service_id[]" value="3">
<input type="checkbox" name="service_id[]" value="4">
<input type="checkbox" name="service_id[]" value="5">
<input type="checkbox" name="service_id[]" value="6">
I've following form
<form method="post" action="getParameterValuesServlet">
<table border="1">
<tr>
<td>User Name</td>
<td><input type="text" name="userName"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>Gender</td>
<td>
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female<br>
</td>
</tr>
<tr>
<td>Hobbies</td>
<td>
<input type="checkbox" name="hobbies" value="cycling">Cycling<br>
<input type="checkbox" name="hobbies" value="swimming">Swimming<br>
<input type="checkbox" name="hobbies" value="treking">Treking<br>
</td>
</tr>
<tr>
<td>City</td>
<td>
<select name="city" multiple>
<option value="mysore">Mysore</option>
<option value="pune">Pune</option>
<option value="chandigarh">Chandigarh</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Register"></td>
</tr>
</table>
</form>
When I submit this form without entering or selecting any values, I see only blank userName and password (text & password) in post body (same is the case with GET query string)
Why don't radio button, check box and drop down values get submitted with default values?
One more thing, if I remove "multiple" attribute from "select" tag, the first option gets submitted.
Would be thankful, if someone explains this behavior!!
FYI, I'm using Fiddler Web Debugger tool to trace the request and response and submitting this form to a Java Servlet
What default values do you imagine would be sent?
The only values that get sent are the selected options; since no options are selected, there's nothing to send.
That's in contrast to text and password controls, which always have a value, even if that value is the empty string.
You can use a hidden field with a fallback value, if a checkbox in a form is submitted unchecked:
<input type="hidden" name="hobbies" value="">
<input type="checkbox" name="hobbies" value="swimming">Swimming<br>
This seems to work also with radio buttons:
<input type="hidden" name="gender" value="">
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female<br>
I want to change the text of a radio button (HTML element), not an ASP.NET component.
How can I change it from ASP.NET?
Add a simple:
runat="server"
to your HTML tag and it will allow a few of the properties to be modified through code behind.
These are known as "hybrid controls."
You would need to add a runat="server" attribute to the HTML for that element.
<input type="radio" id="someRadioId" value="bleh" runat="server">
This will allow you to access the element via its ID, someRadioId. This element in your code behind will be of type HtmlInputRadioButton.
See this article on MSDN
A simple RadioButtonList, when initialized like this:
list.Items.Add(new ListItem("item 1", "1"));
list.Items.Add(new ListItem("item 2", "2"));
list.Items.Add(new ListItem("item 3", "3"));
renders to the following HTML:
<table id="list" border="0">
<tr>
<td><input id="list_0" type="radio" name="list" value="1" /><label for="list_0">item 1</label></td>
</tr><tr>
<td><input id="list_1" type="radio" name="list" value="2" /><label for="list_1">item 2</label></td>
</tr><tr>
<td><input id="list_2" type="radio" name="list" value="3" /><label for="list_2">item 3</label></td>
</tr>
</table>
So via JavaScript you can loop through the elements with the type "radio", grab their id and then look for label elements that have the id as the 'for' value. And update their innerHTML.