I want to add textbox dynamically in jsp page on "Add Row" button click. I have written java script to add it. No issues with that. But I am not able to retrieve those values in Servlet page. Any ideas?
Here is the script:
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 cell3 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell3.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
cell4.appendChild(element4);
}
And here is the jsp where script is called:
<INPUT type="button"
value="Add Row" onclick="addRow('dataTable')" />
You need to specify the name attribute. It becomes the request parameter name.
You can just give them all the same name.
element.name = "foo";
Or if you want to "respect" IE6/7 users as well
document.createElement('<input type="text" name="foo">');
(jQuery makes it all easier and better crossbrowser compatible)
Then you can access them all as follows in the servlet
String[] foos = request.getParameterValues("foo");
They will appear in the order as they appear in the HTML DOM tree.
Related
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";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "item";
element2.size = "40";
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "qty";
element3.style ="text-align: right";
cell4.appendChild(element3);
}
I am creating a set of columns using this code and by using a button action I am adding such rows continuously to the page.
Now along with this, I want to simultaneously add these values to SQL database.
Plus whenever i revisit this page I should have the previously entered data.
The setup have 3 buttons Delete Row, Add Row and Save.
I want to get all the rows into Database once I click Save.
I have the following js code in my jsp. Im not able to retain those textbox values below after the page is refreshed. Any idea how to retain the values?
Im calling this js function onclick of a html button so that it dynamically adds the row to the table.
<script>
function addRow(tableID) {
if(validateForm()==true){
document.getElementById('cruisedowntime2').style.display = "block";
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";
element1.name = "chkbox[]";
element1.defaultChecked="true";
cell1.appendChild(element1);*/
var cell0 = row.insertCell(0);
var element0=document.createElement("select");
element0.name="cruiselinedropdown";
var dropdownlist1=document.getElementById("droplist1");
var defaultselected=dropdownlist1.options[dropdownlist1.selectedIndex].value;
//window.location.replace("http://localhost:8085/Bridge_Downtime_Utility/Servlet?var="+defaultselected);
<%Map<String, String> map = new HashMap<String,String>();
for (int i = 0; i < crsenamelist.size(); i++) {
map.put(crsenamelist.get(i),crsecodelist.get(i));
}
%>
element0.options.add( new Option(defaultselected,defaultselected,true,true) );
element0.options.add( new Option("--","") );
<%
for(Map.Entry m:map.entrySet()){ %>
element0.options.add( new Option("<%=m.getValue()%>","<%=m.getValue()%>") );
cell0.appendChild(element0);<%}%>
var textbox3=document.getElementById('starttime');
var textbox7=document.getElementById('startdate');
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.title="Date: YYYY-MM-DD";
element2.type = "text";
element2.name = "starttimetextbox";
element2.value=textbox7.value+" "+textbox3.value;
cell2.appendChild(element2);
var textbox5=document.getElementById('endtime');
var textbox9=document.getElementById('enddate');
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.title="Date: YYYY-MM-DD";
element3.type = "text";
element3.name = "endtimetextbox";
element3.value=textbox9.value+" "+textbox5.value;
cell3.appendChild(element3);
var textbox1=document.getElementById('descrip');
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "descriptextbox";
if(textbox1.value==''){element4.value="-";}
else
element4.value=textbox1.value;
cell4.appendChild(element4);
//cell4.contenteditable=true;
/* var addRowBox = document.createElement("input");
addRowBox.setAttribute("type", "button");
addRowBox.setAttribute("value", "Edit");
var cell5 = row.insertCell(5);
cell5.appendChild(addRowBox);*/
var deleteRowBox = document.createElement("input");
deleteRowBox.setAttribute("type", "button");
deleteRowBox.setAttribute("value", "X");
deleteRowBox.setAttribute("onclick","SomeDeleteRowFunction(this)");
var cell6 = row.insertCell(4);
cell6.appendChild(deleteRowBox);
}}
</script>
You can store data and then load from localStorage if you want it to persist after page refresh.
To keep your data upon page refresh you need to save it somewhere, for future (after page reload) access.
Store it somewhere at your backend, and then access your, for instance, REST service upon page load.
Store it in localStorage\sessionStorage in browser.
There are no other ways to keep data without actually keeping it :)
I have a javascript function where rows are added dynamically.
<script language="javascript">
// Add row to the HTML table
function addRow() {
var table = document.getElementById('my_table'); //html table
var rowCount = table.rows.length; //no. of rows in table
var columnCount = table.rows[0].cells.length; //no. of columns in table
var row = table.insertRow(rowCount); //insert a row
var cell1 = row.insertCell(0); //create a new cell
var element1 = document.createElement("input"); //create a new element
element1.type = "checkbox"; //set the element type
element1.setAttribute('id', 'newCheckbox'); //set the id attribute
element1.setAttribute('checked',true); //set checkbox by default checked
cell1.appendChild(element1); //append element to cell
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.setAttribute('id', 'newInput'); //set the id attribute
element2.setAttribute('name', 'sl'+rowCount);
element2.setAttribute('style', 'width: 50px');
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "textarea";
element3.setAttribute('rows', '4');
element3.setAttribute('cols','40');
element3.setAttribute('id', 'newInput'); //set the id attribute
element3.setAttribute('name', 'discription'+rowCount);
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.setAttribute('id', 'newInput'); //set the id attribute
element4.setAttribute('name', 'quantity'+rowCount);
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.setAttribute('id', 'newInput'); //set the id attribute
element5.setAttribute('name', 'price'+rowCount);
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.setAttribute('id', 'newInput'); //set the id attribute
element6.setAttribute('name', 'CST'+rowCount);
element6.setAttribute('style', 'width: 50px');
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("select");
var optarr = ['vat1','vat2','vat3','vat4','vat5','vat6'];
for(var i = 0;i<optarr.length;i++)
{
var opt = document.createElement("option");
opt.text = optarr[i];
opt.value = optarr[i];
opt.className = optarr[i];
element7.appendChild(opt);
}
element7.setAttribute('id', 'vat5'); //set the id attribute
element7.setAttribute('name','tax'+rowCount);
element7.setAttribute('value','vat5');
cell7.appendChild(element7);
}
In the last "cell7" i have drop-down along with options,i am selecting only one option.But i need multiple options to be selected. For example: vat1 and vat3 once,vat3 and vat5 and vat2 once like these.I tried element7.setAttribute("multiple","").But it is turning into a list in which i dont needed it.So i tried "jquery Multiselect" but it is out of reach for me because i really dont know about jquery and ajax that much.Any help in this one will be really appreciated.
Edit:After using "setAttribute('multiple','')
I don't know what should go wrong. I copied your example and added the call to set the multiple attribute and it seems to work.
http://plnkr.co/edit/6yAVtHyVwAWBFd3TBTc7?p=preview
var element7 = document.createElement("select");
element7.setAttribute('multiple', '');
var optarr = ['vat1','vat2','vat3','vat4','vat5','vat6'];
for(var i = 0;i<optarr.length;i++)
{
var opt = document.createElement("option");
opt.text = optarr[i];
opt.value = optarr[i];
opt.className = optarr[i];
element7.appendChild(opt);
}
var container = document.getElementById('container');
container.appendChild(element7);
Perhaps check if you made a typo in your own code, that somehow didn't make it to the example posted here.
EDIT: You feel that the default HTML representation of a multiple select is ugly. I can't say i don't agree. That said, this is standart HTML and the representation do change when you see it on a PC, Mac, iPad, Android Phone, etc.
Sounds like you would get the best visual "upgrade" by using a css framework. There are many of them out there. I can name two of the most popular ones:
Bootstrap and
Foundation
Can I run a jsp page in variable of a javascript function?
My web page looks like this:
I will fill the data in the text boxes but when I click on "Add row" button then a javascript function will be triggered and rows are added dynamically which is as follows.
And the javascript function:
function addRow() {
var table = document.getElementById('my_table'); //html table
var rowCount = table.rows.length; //no. of rows in table
var columnCount = table.rows[0].cells.length; //no. of columns in table
var row = table.insertRow(rowCount); //insert a row
var cell1 = row.insertCell(0); //create a new cell
var element1 = document.createElement("input"); //create a new element
element1.type = "checkbox"; //set the element type
element1.setAttribute('id', 'newCheckbox'); //set the id attribute
element1.setAttribute('checked',true); //set checkbox by default checked
cell1.appendChild(element1); //append element to cell
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.setAttribute('id', 'newInput'); //set the id attribute
element2.setAttribute('name', 'sl'+rowCount);
element2.setAttribute('style', 'width: 50px');
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "textarea";
element3.setAttribute('rows', '4');
element3.setAttribute('cols','40');
element3.setAttribute('id', 'newInput'); //set the id attribute
element3.setAttribute('name', 'discription'+rowCount);
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.setAttribute('id', 'newInput'); //set the id attribute
element4.setAttribute('name', 'quantity'+rowCount);
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.setAttribute('id', 'newInput'); //set the id attribute
element5.setAttribute('name', 'price'+rowCount);
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.setAttribute('id', 'newInput'); //set the id attribute
element6.setAttribute('name', 'CST'+rowCount);
element6.setAttribute('style', 'width: 50px');
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = window.href("www.google.co.in");
element7.setAttribute('id', 'vat5'); //set the id attribute
element7.setAttribute('name','tax'+rowCount);
element7.setAttribute('value','vat5');
cell7.appendChild(element7);
}
Whenever I click on "Addrow" function then at the last cell which is "Vat5.5", a jsp page should run and the data present in jsp page should be displayed in the cell which is "Vat5.5". I tried using window.href and window.location but they are navigating to the jsp page and displaying the data. But my requirement is to display the data of jsp page in the cell itself. I dont know whether this will be possible or not.
Edit: I tried using ajax but it's not working properly
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
var cell7 = row.insertCell(6);
var element7 = $.ajax({
url: "/SalesPropeller/Admin/Sales/goal.jsp",
success: function() {
alert("success");
},
error: function() {
alert("Your error");
},
});
element7.setAttribute('id', 'vat5'); //set the id attribute
element7.setAttribute('name','tax'+rowCount);
element7.setAttribute('value','vat5');
cell7.appendChild(element7);
}
goal.jsp
<body>
<div id="welcomeDiv" style="display:none;" class="answer_list">WELCOME</div>
</body>
Javascript is client side whereas JSP is server side. So you don't have choice to ask server datas.
Two possibilities depending what you need are ajax or websocket.
Like in the comment ajax can be called with pure javascript or easily with jquery like this :
$.ajax({
url: url + "/yourjsp.jsp",
data: "parameter=" + yourOptionelParameter,
async: false,
success: function(data) {
addRow(data);
},
error: function() {
alert("Your error");
},
contentType: 'charset=utf-8'
});
To use jquery, you have to donwload jquery library and put it in your resources :
https://code.jquery.com/jquery-3.0.0.min.js
And insert it with :
<script src="jquery-3.0.0.min.js"></script>
Now you can reach the JSP, you have to present your datas using for exemple JSON (encoding serverside) :
https://javaee-spec.java.net/nonav/javadocs/javax/json/JsonObjectBuilder.html
I have a javascript table which will add rows dynamically
The code is as follows
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script language="javascript">
// Add row to the HTML table
function addRow() {
var table = document.getElementById('my_table'); //html table
var rowCount = table.rows.length; //no. of rows in table
var columnCount = table.rows[0].cells.length; //no. of columns in table
var row = table.insertRow(rowCount); //insert a row
var cell1 = row.insertCell(0); //create a new cell
var element1 = document.createElement("input"); //create a new element
element1.type = "checkbox"; //set the element type
element1.setAttribute('id', 'newCheckbox'); //set the id attribute
element1.setAttribute('checked',true); //set checkbox by default checked
cell1.appendChild(element1); //append element to cell
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.setAttribute('id', 'newInput'); //set the id attribute
element2.setAttribute('name', 'sl'+rowCount);
element2.setAttribute('style', 'width: 50px');
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "textarea";
element3.setAttribute('rows', '4');
element3.setAttribute('cols','40');
element3.setAttribute('id', 'newInput'); //set the id attribute
element3.setAttribute('name', 'discription'+rowCount);
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.setAttribute('id', 'newInput'); //set the id attribute
element4.setAttribute('name', 'quantity'+rowCount);
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.setAttribute('id', 'newInput'); //set the id attribute
element5.setAttribute('name', 'price'+rowCount);
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.setAttribute('id', 'newInput'); //set the id attribute
element6.setAttribute('name', 'CST'+rowCount);
element6.setAttribute('style', 'width: 50px');
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = false;
$.ajax({
type: "GET",
url: '/SalesPropeller/Admin/Sales/goal.jsp',
async: false,
success: function(data) {
element7 = true;
},
error: function() {
alert("Your error");
},
});
element7.setAttribute('id', 'vat5'); //set the id attribute
element7.setAttribute('name','tax'+rowCount);
element7.setAttribute('value','vat5');
cell7.appendChild(element7);
}
When i am clicking on "Addrow" button then rows are adding but in the last cell which is "Vat5.5" i need to get the data from another jsp page,so i am using to call the jsp using ajax and display the data, but after writing the ajax code it is not able to display the data.
goal.jsp
<body>
<div id="welcomeDiv"> WELCOME</div>
</body>
This image is for whether i have path correctly or not.
So my question is how to display the data in the "Vat5.5" cell.I dont know whether i am doing wrong in the ajax call i guess.Any help will be appreciated.
EDIT
If goal.jsp is outputting the data (WELCOME), It should be
String data = "WELCOME";
out.print(data);
and in JavaScript,
// define a variable outside AJAX call
var jspData;
and in success function
success: function (data){
jspData = data; //response
element7 = true;
}
BEFORE EDIT
supposing your data is a String, get your JSP data somehow and save in a String
String jspData; // contains your jsp data
// In JSP(HTML)
<input id="jsp-data" type="hidden" value="<%=jspData%>" />
// In JavaScript
var data = document.getElementById('jsp-data').value;
now, you can use that data in JavaScript.