How to get POST form data that have dynamic IDs? - javascript

I have checkboxes inside a form. These checkboxes are a list of persons dynamically created since this list depends on who is logged in. Like, for a supervisor view, it will only list your subordinates.
I'm not sure if I'm missing something but the docs and other answers in SO are all saying that you have to have the id of the input in order to retrieve the form data but in my case, I used the person's ID in the list to come up with the name of the checkbox element. So my checkbox names are like input-{{person_id}}
Now in the post method, I'm not sure how to retrieve the checkboxes in the form. Tried using self.__dict__ but I can't seem to find anything that I can use
link1 - this specifies the name
link2 - this also says that the ID should be pre-determined
link3 - docs also say that if the parameter is not included, an empty list would returned
Maybe there is a workaround where I just get all the elements in the form and make them seen in tornado? Using javascript maybe?

I'm mistaken, it seems that if you use the same name for a checkbox element for all the dynamic checkboxes you create, then when you submit it to the tornado web handler, it will get the values of all those checkboxes that have that name.
the values are retrieved by using the get_arguments

Is this how you mean?
HTML
<form>
<input type="checkbox" id="box1" name="Name1" checked>
<label for="box1">Name 1</label>
<input type="checkbox" id="box2" name="Name2">
<label for="box2">Name 2</label>
</form>
jQuery
$("form input[type='checkbox']").each(function() {
console.log($(this).attr('name'))
})
Output
"Name1"
"Name2"

You can loop through the request.body_arguments attribute; it's dict which maps arguments names to lists of values (to support multiple values for individual names).
class MyHandler(tornado.web.RequestHandler):
def post(self):
for key, value in self.request.body_arguments.items():
print(f"key {key} has value: {value}")
...
There are also arguments (holds both query and body args) and query_arguments (holds only query args) attributes; you can check the docs here.

Related

How do I add my objects to an array on form submit using JSON and PHP?

How can I add objects that I have already returned from my database to an array on form submit? I am retrieving all of my players from my database like so,
$players = Player::all();
and outputting them like this:
<form>
#foreach($players as $player)
<ul>
<li>
<input type="checkbox" name="{{ $player->id }}">
{{ $player->fn }} {{ $player->ln }}
</li>
</ul>
#endforeach
<input type="submit" value="Submit">
</form>
This is what I consider my "player pool", where all players are loaded and available to be "checked" in. I am simply trying to have two sections on this page, one that has the player pool, and one that shows the selected players from the players pool. When a player is checked in they are added to the "players in game" section below the "player pool", and will be part of a new form that can again be submitted, but to the database instead of the same just to the page. How would I achieve this with JSON and PHP?
To be honest, I'm not sure how you want to use JSON for this, but you probably want to use the player ID as the value for the checkbox rather than the name.
<input type="checkbox" name="player_ids[]" value="{{ $player->id }}">
Then you will have an array of player IDs in $_GET['player_ids'] (or $_POST['player_ids'] if this ends up being a POST form.)
You will want to give you form a class so you can begin building a jQuery function to select the players as a checkboxes within the form become checked.
Say,
<form class="player_form">
</form>
With the form structure you propose in your question, the firstname and lastname (I am assuming) are just echoes next to the box. If you are wanting submit these in a later form you will need to have these as input fields, like your checkbox:
<input type="text" name="player_name" value="{{$player=>fname}}" />
I think you want to move all of the information within a li element if the checkbox within that li is checked. To do this, you can add a listener to the checbox using change. You can also use click but this won't listen on the event where the box is checked by keyboard!
$(document).ready(function(){
$(".player_form :checkbox").change( function() {
var player = $(this).closest("li");
//Now add this point into your new form
$(".my_submit_form").append(player);
)}
});
The closest function will traverse up the dom and find the closest li element and then append this data to your new form.
I would suggest you reconsider your form naming convention. As you have it you will be submitting a unique name with every checkbox, I don't think this is what you mean to say.
<li>
<input type="checkbox" name="player_id[]" value="{{$player->id}}" />
<input type="text" name="player_fname[]" value="{{$player=>fname}}" />
<input type="text" name="player_lname[]" value="{{$player=lname}}" />
</li>
Would be something like what you want, for form handling. Don't forget the names must be submitted as an array (i.e player_id[]) because you will be submitting multiple players within a form!

How to pass multiple inputs to jsp

In my jsp file I generate dynamically multiple input tags, trough a database. I'd like to know the values of each. I've tried doing it in Javascript, but according to some answers in this website this is not possible.
Example:
<input type="number" id="age" class="v">
<input type="text" id="name class="v">
...
And on the jsp side I'd like to get:
"age" => 18
"name" => "Joe"
Any ideas on how to achieve this?
Edit
In case you are wondering, my Javascript is fairly simple, I can get all the values I need simply by doing:
var chars = document.getElementsByClassName("v");
EDIT 2
My (simplified) JSP looks something like this:
<%= session.getAttribute("chars")%>
<form action="hello" method="POST">
<c:forEach items="${chars}" var="ch">
<input type="number" id="${ch}" class="v">
</c:forEach>
<input type="submit">
</form>
"chars" is an array that was created through calls to the database, this array is displayed and created dynamically.
So what I want to do is pass all those values, like ("age" => 18) to another my hello servlet, so I can work on that info. For example if the value of the inputs is something like this:
//ID value
"age" => 18
"name" => "Joe"
On hello I should have access to that.
Using pure JavaScript you can get the field values using querySelector which allows you to retrieve properties from multiple elements with the same class identifier
document.querySelector('.v').value;
You will then have access to both field values via js. To read those values using jsp you the JavaScript will need to be included within the same file. You can do something like:
JSP:
You will need to add the HTML Name="myFieldName" to the input fields.
<%= request.getParameter("myFieldName") %>
If you are in a form, you could use a POST method to submit the datas of the different inputs inside your form.
Here is a previous post on StackOverlow that might help you get the datas you want :
How can I get form data with JavaScript/jQuery?

Get value of multiple choices checkboxes Javascript

I'm using the onsubmit event on a form to verify it before it is sent. I'm having issues getting the value of checkboxes that allows multiple choice.
Html:
<input type="checkbox" name="question5[]" value="1" />
<input type="checkbox" name="question5[]" value="2" />
Javascript:
var form = document.forms['questionnaire'];
var q5 = form.elements["question5"].value;
When I try to get the value of this question I'm not able to retrieve it the same way I did for the other fields. I'm wondering what is the correct way to get the value of those checkboxes since I can't retrieve it like a radio or text input.
The name of the field is question5[] not question5 and since you have multiple of them, you will get a NodeList (which is like an Array) back, not a single Element.

Setting java string variables value depending on html checkbox selected

I have two check boxes with table names when any check box is checked i wants to save that table name in to a java string which i can use in the query to get data from that table or update that table.
I have used onClick functions and also got the check box value but not getting how to access it in the rest of the code so that i can use that value in the DB query.
I assume you have HTML code like the following:
<input type="checkbox" name="use_table1" />
<input type="checkbox" name="use_table2" />
On the server-side Java code, you can then query:
String tableName = null;
if (request.getParameter("use_table1") != null)
tableName = "tbl_1";
if (request.getParameter("use_table2") != null)
tableName = "tbl_2";
Note that the "outside" names differ from the real table names. No one out there on the web should need to know your real table names. And, most important, no one should be allowed to read an arbitrary table from your database. That's why I used that if-then-else code to select the table name.
Just give the table name as value. The browser will send only the name-value pairs of the checked ones as request parameters.
<input type="checkbox" name="tablename" value="table1">
<input type="checkbox" name="tablename" value="table2">
<input type="checkbox" name="tablename" value="table3">
<input type="checkbox" name="tablename" value="table4">
In the Servlet, you can grab them by HttpServletRequest#getParameterValues().
String[] checked = request.getParameterValues("tablename");
Simple as that :) No need for unnecessary JavaScript hacks/workarounds which ain't going to work in JS-disabled clients. This is one of the many unknown features of HTML.

Dynamic Client Script

I need to write a java script. This is supposed to validate if the checkbox is selected in the page or not. The problem here is that the check box is inside a grid and is generated dynamically. The reason being the number of check box that need to be rendered is not know at design time. So the id is know only at the server side.
Here is a thought:
As indicated by Anonymous you can generate javascript, if you are in ASP.NET you have some help with the RegisterClientScriptBlock() method. MSDN on Injecting Client Side Script
Also you could write, or generate, a javascript function that takes in a checkbox as a parameter and add an onClick attribute to your checkbox definition that calls your function and passes itself as the parameter
function TrackMyCheckbox(ck)
{
//keep track of state
}
<input type="checkbox" onClick="TrackMyCheckbox(this);".... />
You have to generate your javascript too, or at least a javascript data structure (array) wich must contain the checkboxes you should control.
Alternatively you can create a containing element, and cycle with js on every child input element of type checkbox.
If it's your only checkbox you can do a getElementsByTagName() call to get all inputs and then iterate through the returned array looking for the appropriate type value (i.e. checkbox).
There is not much detail in the question. But assuming the the HTML grid is generated on the server side (not in javascript).
Then add classes to the checkboxes you want to ensure are checked. And loop through the DOM looking for all checkboxes with that class. In jQuery:
HTML:
<html>
...
<div id="grid">
<input type="checkbox" id="checkbox1" class="must-be-checked" />
<input type="checkbox" id="checkbox2" class="not-validated" />
<input type="checkbox" id="checkbox3" class="must-be-checked" />
...
<input type="checkbox" id="checkboxN" class="must-be-checked" />
</div>
...
</html>
Javascript:
<script type="text/javascript">
// This will show an alert if any checkboxes with the class 'must-be-checked'
// are not checked.
// Checkboxes with any other class (or no class) are ignored
if ($('#grid .must-be-checked:not(:checked)').length > 0) {
alert('some checkboxes not checked!');
}
</script>

Categories