On my JSP page, I have implemented four checkboxes. I am looking to retrieve their values in the order they are selected. For example, if the checkboxes have values A, B, C, and D, and I select them in the order of B, D, A, and finally C, I want to capture and send these values in the sequence of B, D, A, and C to Java.
When working with HTML, there is no built-in feature that allows you to arrange values in a specific order. To achieve this functionality, you can utilize JavaScript to keep track of the sequence in which items are selected or submitted through a form.
An effective method for achieving this is to include a hidden input field where you can store the selected values using a click event on checkboxes like hidden.value += this.value.
Furthermore, it's important to establish clear business logic regarding how to handle deselected checkbox options and ensure that this scenario is also addressed in your implementation.
give it a shot
$('#isAgeSelected').prop('checked')
This function will give you either true or false as the result
There may be another way to achieve this, albeit a slightly indirect one. You can continuously update a hidden input field by using the onClick attribute of the Radio buttons.
Here is a snippet of untested code that demonstrates this method:
<script>
function updateFoo(elemId){
var elem = document.getElementById("foo");
elem.value = elem.value+", "+elemId;
console.log(elem.value);
}
funcition cleanFoo(){
//Now clean the string to remove the ',' at the beginning and the end and to
//contain A,B,C,D only once
/*
Scan the string from the back and keep the last occurrence of each ID
since the user can select or click on radio buttons more than once
Eg. a,b,c,d,b,b,c,a,d,d,a
Keep: b,c, d,a //final selections
//I may write a code here when I get some time
*/
}
</script>
<body>
<input type="radio" id="A" onClick="updateFoo('A')">A<br/>
<input type="radio" id="B" onClick="updateFoo('B')">B<br/>
<input type="radio" id="C" onClick="updateFoo('C')">C<br/>
<input type="radio" id="D" onClick="updateFoo('D')">D<br/>
<input type="hidden" id="foo" value="">
</body>
1)Include a new hidden input field. 2)Assign the value based on user choice. 3)Retrieve the hidden variable on the server side.
For example: initially hidden_variable=""
When the user chooses option B, hidden_variable="B" If the user selects C, then hidden_variable="B,C" as such.
If the user deselects a value, remove that specific value from hidden_variable.
All of this functionality can be implemented using basic JavaScript operations.
To transfer the value to Java, all you need to do is include a hidden input field like this:
<input type="hidden" id="myList"/>A JavaScript function can be triggered when checkboxes are checked or unchecked. This function will add or remove the checkbox value from the hidden field using methods like substring and indexOf.
Additionally, for more information on detecting the order in which checkboxes are clicked, check out this related post: Detect order in which checkboxes are clicked
Thank you to everyone for your help and suggestions. I was able to achieve the desired result with your input. Here is the JavaScript code that I used:
<script type="text/javascript">
arr = new Array();
function updatePriority(elemId){
var elem = document.getElementById("foo");
var chkBox = document.getElementById(elemId);
var options = document.getElementsByName('checkbox1');
if(document.getElementById(elemId).checked) {
alert("checked");
arr.push(elemId);
}
else {
for(var i = arr.length; i>=0; i--){
if(arr[i]==elemId){
arr.splice(i,1);
break;
}
}
}
for(var i = (arr.length-1); i>=0; i--){
alert("checked value list ::"+arr[i]);
}
}
The output is in reverse order, but I can easily manage this from the Java side.
I need help with making my html table resizable in a vertical direction. The cells can overflow if there isn't enough space, so I want to allow users to stretch the table by dragging and extending the bottom edge. Can anyone provide guidance on how to ...
I have a simple data object named Pojo: class Pojo { string key; int value; } The Pojo objects are stored in a List like this: List<Pojo> myList; Each key can have multiple values associated with it. For example: A 5 A 7 B 3 I want to group ...
I have a specific route called payments/transactions that retrieves all relevant data. I'm interested in finding a way to generate a CSV file without the need to create new routes or add query parameters, so that my route appears as payments/transacti ...
Can someone provide me with detailed information on why a request failed, such as an existing username or email already in use? The console only displays a generic "Bad Request" error without specifics. I noticed that I can return a promise containing data ...
Creating an ionic login module involves using 2 observables, with one nested inside the other. Uncertainty exists regarding whether this is the correct implementation. The process includes calling the getHTTP() method to retrieve a string. If the string i ...
Upon receiving the JSON response from the Google Maps API stored in a variable named 'obj', I noticed that alerting obj.name returns "Pancakes on the Rocks". To access the icon, I can use obj.icon. However, I am struggling to retrieve separate va ...
I have integrated ng-grid into my Angular application and I am looking to display different images in the ng-grid based on certain conditions or row index. Below is the HTML code snippet: <html ng-app="myApp"> <head lang="en"> <meta ...
Recently, I discovered that the use of onclick is not recommended in HTML. Currently, I am immersing myself in a React tutorial where they utilize <button onClick={shoot}>Take the Shot!</button>. I'm curious if this practice applies to Rea ...
I'm currently working on a client's range filtering feature using Vue.js. The filter involves an input element with the type range to adjust the total number of clients displayed. I have successfully linked the value of the input to the **clients ...
I am working on an app that utilizes Marvel's API, and I've been having trouble implementing a search bar in the application. Whenever I attempt to search for a name within this API, the function Search() is showing up as undefined in the HTML. ...
Here is the code I'm struggling with: public class Meh { public static void main(String[] args) { String entries[] = { "entry1", "entry2" }; int count = 0; while (entries[count++] != null) { System.out.println( ...
Hello! I'm currently working on customizing the "DataManipulation" example from jsGrid demos, but I'm facing a challenge in displaying data fetched from a JSON file using a GET AJAX call. Below is my controller code: { loadData: ...
Forgive me if this seems unclear, but I am trying to locate specific values within each JSON object and retrieve another value based on it. I have been advised to consider using a Hash Table for this purpose, however, I am unsure of how to proceed. For ins ...
ETA: I am aware of different methods for monitoring my form for alterations. However, that is not the focus of my inquiry. As indicated by the title, my question pertains to observing changes within an object. The application displayed below is solely for ...
Hey everyone, I'm currently working on a web app project where I am creating a table. Below is the code snippet for it: class Table1 extends Component { render() { return ( <div> <BootstrapTable data={this.props.data}> ...
After saving an array of doubles in binary format to a file using the writeDouble() function from ObjectOutputStream in Java, I encountered some issues when trying to read the same file in Python using numpy.fromfile. The values returned were not consisten ...
Illustrated below are three separate images depicting the status of my divs in desktop view, mobile view, and what I am aiming for in mobile view. 1. Current Status of Divs in Desktop View: HTML <div id="wrapper"> <div id="left-nav">rece ...
Bootstrap is an amazing tool, but it tends to enforce too many opinions. The selectors used in its rules are quite broad, such as input or label. Is there a method to isolate Bootstrap's CSS so that it only impacts elements within a container with a ...
I encountered an issue while trying to install react-list-filter using npm (npm install react-list-filter). The error messages displayed in my console are as follows: npm ERR! code ETARGET npm ERR! notarget No matching version found for <a href="/cdn-c ...
Is there a way to divide the script template from the HTML code? The template is causing the document size to be too large. How can I optimize it for caching? <script id="search-game-result-tpl" type="text/html"> <li class="" data-id='' ...