I am trying to pass values of textbox with same name from JSP to servlet but not able to accomplish this task.
I tried using this in servlet but i only get one textbox value:
String[] words = request.getParameterValues("words");
String[] meanings = request.getParameterValues("meaning");
My javascript which helps in generating multiple table rows is:
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
cell3.appendChild(element3);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
The Html table generating multiple rows:-
</body>
<form name="managelist" action="../createlistpath" method="post">
<TABLE id="dataTable" width="600px" border="0">
<tr>
<td><b> List Name</b></td>
<td colspan="2"><input type="text" name="listname"></td>
</tr>
<tr >
<td><b>Select</b></td>
<td><b>Word</b></td>
<td><b>Meaning</b></td>
</tr>
<TR >
<TD><INPUT type="checkbox" name="checkbox"/></TD>
<TD> <INPUT type="text" name="words" /> </TD>
<TD> <INPUT type="text" name="meaning" /> </TD>
</TR>
</TABLE>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<br>
<input type="submit" value = "submit" name="submit">
</form>
</body>
You do not name the dynamically created input elements (to "words" or "meaning")
var element2 = document.createElement("input");
element2.name = "words";
element2.type = "text";
cell2.appendChild(element2);
If you have a form like that:
<form method="post">
<input type="text" name="words"><br>
<input type="text" name="words"><br>
<input type="submit">
</form>
Sends if you put one and two in the textboxs
words=one&words=two
For getting,
String[] words = request.getParameterValues("words");
Related
addition.jsp
<form action="addition.jsp">
First Number
<input type="text" name="fno">
<br>
<br>Second Number
<input type="text" name="sno">
<br>
<br>Result
<input type="text" value="<%=Integer.parseInt(request.getParameter(" fno "))+Integer.parseInt(request.getParameter("sno ")) %>">
<br>
<br>
<input type="submit" value="ADD">
</form>
I want to display result in thrid textbox named Result on click of submit button.. i tried this code but getting error ..is there something am i missing..kindly help?
request.getParameter(" fno ") is string not a number therefore it will be a wrong format.
<%
String integer = request.getParameter("fno");
String integer1 = request.getParameter("sno");
int x = integer != null ? Integer.parseInt(integer) : 0;
int y = integer1 != null ? Integer.parseInt(integer1) : 0;
int z=x+y;
%>
<input type="text" name="integer" value="<%=z%>"/>
It can be achieved by simple java script as follow:
<html>
<body>
<form action="addition.jsp">
First Number
<input type="text" name="fno" id="fno"/>
<br>
<br>Second Number
<input type="text" name="sno" id="sno"/>
<br>
<br>Result
<input type="text" id="result"/>
<br>
<br>
<input type="button" value="ADD" onClick="setAddition();"/>
</form>
<script>
function setAddition()
{
var fno=document.getElementById("fno").value;
var sno=document.getElementById("sno").value;
document.getElementById("result").value=parseInt(fno)+parseInt(sno);
}
</script>
</body>
</html>
Not sure the best way to do this...
I have an HTML FORM with multiple rows.. But one of the columns also has multiple values.
I know I can receive the event into a String array with getParamaterValues(). But for the variable days, how do I get that into an array of arrays so it's still related to the event column?
It's all coming out of a database so I can't just hard code it.
I'm sure I actually know the answer but my brain is not cooperating... Thanks in advance for the kick-start... I'm using Java servlets. But it's really just an HTML question.
e.g.
<tr>
<td>
<input type="checkbox" name="event" value="ev1">
<td>
<input type="checkbox" name="days" value="Sat">
<input type="checkbox" name="days" value="Sun">
<tr>
<td>
<input type="checkbox" name="event" value="ev2">
<td>
<input type="checkbox" name="days" value="Fri">
<input type="checkbox" name="days" value="Sat">
<input type="checkbox" name="days" value="Sun">
<tr>
<td>
<input type="checkbox" name="event" value="ev3">
<td>
<input type="checkbox" name="days" value="Sat">
<input type="checkbox" name="days" value="Sun">
<input type="checkbox" name="days" value="Mon">
Append the value from the events to the name attribute of the days like ev1_days, ev2_days, ev3_days:
<tr>
<td>
<input type="checkbox" name="event" value="ev1">
</td>
<td>
<input type="checkbox" name="ev1_days" value="Sat">
<input type="checkbox" name="ev1_days" value="Sun">
</td>
</tr>
...
...
Then you can do something like:
String[] events = request.getParamaterValues("event");
for(int i=0; i<events.length; i++)
{
String[] days = request.getParamaterValues(events[i] + "_days");
//do something with days....
}
You should actually close your td's and tr's by the way.
You will have to change name of Checkboxes that belongs to the same event to a unique name.
HTML
<tr>
<td>
<input type="checkbox" name="event" value="ev1">
<td>
<input type="checkbox" name="daysA" value="Sat">
<input type="checkbox" name="daysA" value="Sun">
<tr>
<td>
<input type="checkbox" name="event" value="ev2">
<td>
<input type="checkbox" name="daysB" value="Fri">
<input type="checkbox" name="daysB" value="Sat">
<input type="checkbox" name="daysB" value="Sun">
<tr>
<td>
<input type="checkbox" name="event" value="ev3">
<td>
<input type="checkbox" name="daysC" value="Sat">
<input type="checkbox" name="daysC" value="Sun">
<input type="checkbox" name="daysC" value="Mon">
Script
var events = [];
var daysA = [];
var daysB = [];
var daysC = [];
var jsonData="";
function c(){
var eventCB = document.getElementsByName("event");
var daysACB = document.getElementsByName("daysA");
var daysBCB = document.getElementsByName("daysB");
var daysCCB = document.getElementsByName("daysC");
for(var i=0;i<eventCB.length;++i){
events.push(eventCB[i].value);
}
for(var i=0;i<daysACB.length;++i){
daysA.push(daysACB[i].value);
}
for(var i=0;i<daysBCB.length;++i){
daysB.push(daysBCB[i].value);
}
for(var i=0;i<daysCCB.length;++i){
daysC.push(daysCCB[i].value);
}
jsonData ='{events:['+events.toString()+'],days:[['+daysA.toString()+'],['+daysB.toString()+'],['+daysC.toString()+']]}'
}
Passing data to Servlet
var jsonComplete = JSON.stringify(jsonData);//You will get below string
//{events:[ev1,ev2,ev3],days:[[Sat,Sun],[Fri,Sat,Sun],[Sat,Sun,Mon]]}
$.ajax({
url:"URLServlet",
type:"POST",
dataType:'json',
data: {jsonComplete : jsonComplete },
success:function(data){
// do whatever required
},
});
Receiving Data in Servlet Using org.json
JSONObject objJSON = new JSONObject(request.getParameter("jsonComplete "));
JSONArray arrEvents = objJSON.getJSONArray("events");
JSONArray arrDays = objJSON.getJSONArray("days");
for(int i=0;i<arrEvents.length();++i){
out.println("event["+i+"]:"+arrEvents.getString(i));//Similar to event[0]:ev1
}
for(int i=0;i<arrDays.length();++i){
JSONArray arrDaystemp = arrDays.getJSONArray(i);
out.println("days["+i+"]:[");
for(int i=0;i<arrDaystemp.length();++i){
out.println(arrDaystemp.getString(i));//Similar to days[0]:[Mon,Tue]
}
out.println("]");
}
My requirement is as below.
Whenever user clicks on Additem button One new row should be added in the table.(Table Name : additionalInfoTable).
The must have three cells.
First two cells must have Text field.
Second cell must have dropdown with a list of Values.
For this I have written code in Javascript as below. But When I generate dropdown values from Java ArrayList, Java snippet is not running inside InnerHTML.
function addAdditionalRow() {
var table = document.getElementById("additionalInfoTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = '<input type="text" size="15" name="additionalCost" />';
cell2.innerHTML = '<input type="text" size="15" name="totalCost" />';
cell3.innerHTML = '<select name="recoveryType">'+
'<option>--Select Recovery Type--</option>';
<% for(String recType: details.getRecoveryTypeList()) { %>
var recType = '<%=recType%>';
cell3.innerHTML = '<option value="'+recType+'">'+recType%+'</option>';
<%}%>
cell3.innerHTML = '</select>';
cell4.innerHTML = '<input type="button" value="Delete" onclick="deleteRow(this)"/>';
}
My JSP code for the table is below.
<table border ="1" width="100%" id="additionalInfoTable">
<thead>
<tr>
<td align="center" ><b>Additional Cost $</b></td>
<td align="center" ><b>Total Cost</b></td>
<td align="center" ><b>Recovery Type</b></td>
<td align="center" ><b>Delete</b></td></tr>
</tr>
</thead>
<tbody id="addBillbackdata">
<tr>
<td align="center">
<input type="text" size="15" name="additionalCost" />
</td>
<td align="center">
<input type="text" size="15" name="totalCost" />
</td>
<select name="recoveryType">
<option>--Select Recovery Type--</option>
<% for(String recType: details.getRecoveryTypeList()) { %>
<option value="<%=recType%>"><%=recType%></option>
<%}%>
</select>
</td>
<td align="center">
<input type="button" value="Delete" onclick="deleteRow(this)"/>
</td>
</tr>
</tbody>
</table>
Please help me to get Java ArrayList values inside innerHTML of javascript
Your javascript modifies the HTML in the browser. JSP code is compiled serverside before it is being delivered to the browser. It is not possible to use JSP code in javascript, because the browser has no way of interpreting it. You have to either
create the desired html with jsp, hide it (e.g. with display:none), and attach it dynamically with javascript
create a global javascript variable in jsp within a <script>-Tag and reference it from your button callback
create a different jsp or servlet to deliver the data and use AJAX to request it
js file:
why does the size of dropdown1 is coming as 1?
function savethechanges(){
for(var i=0;i<count;i++)
{
dropdown1[i]=document.getElementById("sel"+i).value;
kot[i]=document.getElementById("kot"+i).value;
item[i]=document.getElementById("itemcode"+i).value;
if(dropdown1[i] == 0){
document.detailsview.action="BillCB.jsp?method=" + "11" + "&itemcode=" +item[i]+ "&kot=" +kot[i]+ "&itemStatus1=" +dropdown1[i]+ "&billno=" +billno;
}
else if(dropdown1[i] == 1){
document.detailsview.action="BillCB.jsp?method="+"9"+"&itemcode="+item[i]+"&kot="+kot[i]+"&itemStatus1="+dropdown1[i]+ "&billno="+billno;
}
else{
document.detailsview.action= "BillCB.jsp?method="+"10"+"&itemcode="+item[i]+"&kot="+kot[i]+"&itemStatus1="+dropdown1[i]+ "&billno="+billno;
}
}
}
JSP file:
while retrieving here the dropdown1 length is 1.but for kot and item length is 18
please provide your solution!
case 11:
gotMethod = true;
billdetails_be.billno = Integer.valueOf(request.getParameter("billno"));
String[] kotCB2=request.getParameterValues("kot");
String[] itemCB2=request.getParameterValues("itemcode");
String[] statCB2=request.getParameterValues("itemStatus1");
int[] kotarr2=new int[kotCB2.length];
int[] itemarr2=new int[itemCB2.length];
int[] statarr2=new int[statCB2.length];
System.out.println("IN AVAILABLE:length of array is:"+statCB2.length);
System.out.println("IN AVAILABLE:length of array is:"+kotCB2.length);
for(int i=1;i<itemarr2.length;i++)
{
kotarr2[i]=Integer.parseInt(kotCB2[i]);
}
for(int i=1;i<itemarr2.length;i++)
{
itemarr2[i]=Integer.parseInt(itemCB2[i]);
}
for(int i=1;i<itemarr2.length;i++)
{
statarr2[i]=Integer.parseInt(statCB2[i]);
}
for(int i=1;i<itemarr2.length;i++)
{
int kotint2=kotarr2[i];
int itemint2=itemarr2[i];
int statint2=statarr2[i];
System.out.println( i+"the value of kot in available"+ kotint2);
int availablebill = websrv.availablebill(billdetails_be.billno, kotint2, itemint2,statint2);
}
design page(jsp)
<%
for(int i=0;i<count;i++){
%>
<TR>
<TD> <input id="itemcode<%=i%>" type="hidden" name="itemcode" value=" <%=billdetails_be.get(i).itemcode%>"></TD>
<TD><%=billdetails_be.get(i).itemdescription%></TD>
<TD> <input id="quantity<%=i%>" type="text" name="quantity" style="width: 30px;" readOnly="readonly" value="<%=billdetails_be.get(i).quantity%>" >
<input type="submit" id="inc<%=i%>" onclick= "doIt1(1,<%=i%>);" value="+" style="width:20px; height:20px; border-radius:10px; padding:0 0; " />
<input type="submit" id="dec<%=i%>" onclick="doIt1(-1,<%=i%>);" value="-" style="width:20px; height:20px; border-radius:10px; padding:0 0; "/>
</TD>
<TD> <%=billdetails_be.get(i).price%></TD>
<TD> <%=billdetails_be.get(i).itemstatusdescription%></TD>
<td>
<select name="statusi" id="sel<%=i%>">
<option value="0">Available</option>
<option value="1">Unavailable</option>
<option value="2">Delete</option>
</select>
</td>
<td> <input id ="kot<%=i%>" type="text" style="border: 0px solid #000000;" name="kot" style="cursor: text" readonly="readonly" value="<%=billdetails_be.get(i).kotno%>"></td>
<TD> <input id="myquantity<%=i%>" type="hidden" name="quantity1" value=" <%=billdetails_be.get(i).quantity%>"></TD>
</TR>
<%
}
%>
<td><input style="width: 150px; " class="btn btn-green btn-large" type="submit" name="save" id="save" value="save" class="button" onclick="savetheChanges(<%=count%>);"> </td>
PROBLEM
1.this is in js file ,from which i am passing the value to BillCB.jsp
document.detailsview.action="BillCB.jsp?method=" + "11" + "&itemcode=" +itemcode1[i]+ "&kot=" +kot1[i]+ "&itemStatus1=" +selection[i]+ "&billno=" +billno;
2.this is in BillCB.jsp file (method :11)
String[] statCB2=request.getParameterValues("itemStatus1");
int[] statarr2=new int[statCB2.length];
System.out.println("IN AVAILABLE:length of STATUS array is:"+statCB2.length);
In AVAILABLE:length of STATUS array is:1-this is the problem.
I haven't gone through your code but you might try this solution
Use JSON.stringify method to stringify the array data then send the stringified data to server using below line.
data=JSON.stringify("yourArrayName")
then send "data" as a parameter to JSP
On server side convert it back to array data.
In my Spring project, I am passing a List to my JSP page from my controller in this way:
mav.addObject("tipos", tipo.listaTipos());
mav.addObject("campos", atributo.listaKey());
In the JSP page, besides display this items, I can add new items too, as demonstrated in the code below (both HTMl and Jquery):
HTML
<table class="bordered campos" id="edit_campos">
<thead>
<tr>
<th>Campo</th>
<th>#</th>
</tr>
</thead>
<tfoot>
<tr>
<td> <input type="text" name="nome_campo"> </td>
<td> <button type="button" id="incluir_campo" class="btn btn-link">Incluir</button> </td>
</tr>
</tfoot>
<c:forEach var="item_key" items="${campos}">
<tr id="linha_${item_key.id}">
<td> <input type="text" name="${item_key.nome}" value="${item_key.nome}"> </td>
<td> <button type="button" id="excluir_campo" class="btn btn-link">Excluir</button> </td>
</tr>
</c:forEach>
</table>
JQuery
$("#incluir_campo").on("click", function () {
$.ajax({
type: "GET",
url: "<c:out value="${pageContext.request.contextPath}/key/cadastra_campo"/>",
data: {nome: $("input[name=nome_campo]").val() }
}).done(function(data){
if(data=="yes") {
var newRow = $("<tr>");
cols = '<td> <input type="text" name="${item_key.nome}" value="${item_key.nome}"> </td>';
cols += '<td> <button type="button" id="excluir_campo_${item_campo.id}" class="btn btn-link">Excluir</button> </td>';
newRow.append(cols);
$("table.campos").append(newRow);
$("input[name=nome_campo]").val("");
}
else {
alert("erro ao incluir campo");
}
}).fail(function(){
alert("falha ao incluir campo");
});
});
But, in this current scenario, the new lines are display with no content, due the list passed to JSP remains the same. How I can update the list I passed to my JSP after I insert a new item?
Look at these lines:
cols = '<td> <input type="text" name="${item_key.nome}" value="${item_key.nome}"> </td>';
cols += '<td> <button type="button" id="excluir_campo_${item_campo.id}" class="btn btn-link">Excluir</button> </td>';
Don't use expressions(${}) in Jquery when you working dynamically with DOM elemnts like insert new, update DOM etc, expressions are evaluated when jsp is processed/rendered HTML.
Solution will be:
After getting new item in Controller add it to list, and return the same item as response to AJAX, then append it to exists table. like:
consider your controller method returns data in json like:
var data = {"item_key" : {nome : "abc"}, "item_campo" : {id : "1"}};
then in done do like:
.done(function(data){
if(data.length != 0) {
var $newRow = $("<tr>");
var $newTextbox = $('<input type="text" id="'+data.item_key.nome+'" name="foo">');
var $newButton = $('<button type="button" id="excluir_campo_'+data.item_campo.id+'" class="btn btn-link">Excluir</button>');
$newRow.append($('<td>').append($newTextbox));
$newRow.append($('<td>').append($newButton));
$("table.campos").append($newRow);
$("input[name=nome_campo]").val("");
}
else {
alert("erro ao incluir campo");
}
})
jsfiddle