Creating Multiple textboxes dynamically - java

I am making a web application in which I pass a Int value from a servlet to next jsp page like this :
request.setAttribute("n",n);
RequestDispatcher dispatcher = getServletContext().getRequestDispatcher("/sharingfilesselection.jsp");
dispatcher.forward(request, response);
Now on the next page i.e sharingfilesselection.jsp I want that n textboxes are created dynamically each with a different id as i need to store the values of these textboxes in my database.
The N is obtained on next jsp page by this :
Object N=request.getAttribute("n");
How this can be done using javascript ?Please help

You can do this using JSTL:
<c:forEach var="i" begin="1" end="${n}">
Input ${i}: <input type="text" name="txtDynamic_${i}" id="txtDynamic_${i}" />
<br />
</c:forEach>

Try this in your
.javascript
<%String n=(String)request.getAttribute("n");%>
var n=<%=n%>;
for(var i=0;i<n;i++{
$(".exac").append("<input type="text" id='textbox"+i+"'></input>");
}
}
.html
<div class="exac">
</div>

Working sample here
html
<div id="container"><input type="button" onclick="createTextBox(5)" value="create textbox">
JS
function createTextBox(n) {
for (var i = 0; i < n; i++) {
var textBox = document.createElement("input");
textBox.setAttribute("id", "text_" + i);
document.getElementById("container").appendChild(textBox);
}}

Related

How do I send data between two jsp?

I want to send the identificator of a product to the shoppingcard page and then display the product on the shoppingcart page
I used both request.set attribute and session.setattribute and it doesn't work. If I use session.getattribute or request.getattribute.toString() the page is white nothing is displayed. If I only use request.getAttribute (without toString) the line "ok" is not displayed on the result which means that purchased is null.
ProductStore is a map containing the products we have. Same for shoppingcardStore. ProductBean is the class of the products
products page:
<h2><%=ptp.getName()%></h2>
<div class="product-btns">
<form method="GET" action="<%="WhishList.jsp"%>">
<button class="main-btn icon-btn" name="id" value="<%=ptp.getId()%>"><i class="fa fa-heart"></i></button>
</form>
<button class="main-btn icon-btn"><i class="fa fa-exchange"></i></button>
<form action="shoppingcard.jsp" method="get">
<p> <%= ptp.getId() %> </p>
<%Object product=ptp;
request.setAttribute("purchase", ptp.getId());
%>
<input type="submit" value="add to cart">
<button class="primary-btn add-to-cart"><i class="fa fa-shopping-cart"></i> Add to Cart</button>
</form>
</div>
shoppingcard page
ProductStore products = new ProductStore();
Map<String,ProductBean> prodList = products.getProducts();
ShoppingcardStore db = new ShoppingcardStore();
Map<String,ProductBean> list = db.getShoppingcard();
Object purchased = request.getAttribute("purchase").toString();
if(purchased!=null){
out.println("<h1>Ok</h1>");
//ProductBean x = (ProductBean) purchased;
String x=(String) purchased;
db.Purchase(x);
//TODO confirm product has been added to the shoppingcart.
}%>
<!-- Product Slick -->
<div class="col-md-9 col-sm-6 col-xs-6">
<div class="row">
<div id="product-slick-1" class="product-slick">
<% if(list != null){
Object[] Shoppingcardlist = list.values().toArray();
ProductBean ptp;
for(int i = 0; i<Shoppingcardlist.length; i++){
ptp = (ProductBean)Shoppingcardlist[i];
// TODO display the info of the current wish list.
%>
of course it is just a part of my code, if you need to see something more tell me.
When you are doing setAttribute(), its scope is limited to the request when the main page is loading and hence will not be available on the next page as it will be a new request.
<%Object product=ptp;
request.setAttribute("purchase", ptp.getId());
%>
What you can do is, submit this value in URL param as GET or in a form (get/ post) to fetch it on next JSP using request.getParameter().
Or you can use session scope by session.setAttribute()
Hope it helps

Refreshing Page With A Parameter in JSP

I have a JSP page in my web application and i want to refresh the page with the parameter of option.
<select class="form-control combobox" name="education" >
<option value="" disabled selected hidden>Choose an education</option>
<option>English</option>
<option>French</option>
<option>Dutch</option>
<option>Spanish</option>
</select>
I want to use this parameter for querying my database again. Forexample;
<%
BookDAO bdao = new BookDAO();
for (TblBooks book : bdao.getAllBooks()) {%>
<tr>
<td><%=book.getTittle()%></td>
<td><%=boek.getAuthor()%></td>
<td><%=boek.getCategory()%></td>
<td><%=boek.getEducation()%></td>
<td><input type='checkbox' name ='chk1' /></td>
</tr>
<% }%>
I can get the parameter with request.getParameter("education") but how can i refresh page and query again with this parameter?
In Javascript, You can ask a web page to reload itself (the exact same URL) by:
location.href = location.href;
You can ask a web page to load a different location using the same mechanism:
location.href = 'http://www.google.com'; // or whatever destination url you want
You can get the value of a select control (which needs to have an id attribute):
var ctrl = document.getElementById("idOfSelectControl");
var selectedOption = ctrl.options[ctrl.selectedIndex].value;
So, if you update your JSP to give the control an id:
<select class="form-control combobox" id="education" name="education" >
you should be able to reload the page:
var educationControl = document.getElementById("education");
var selectedOption = educationControl.options[educationControl.selectedIndex].value;
location.href = "http://mysite.example/mypage?education=" + selectedOption;
By the help of Jason i have solved it. I added an onchange event to my select tag
onchange="changeThePage()"
Then i defined a javascript function.
function changeThePage() {
var selectedOption = "book.jsp?education=" + $("#education option:selected").text();
location.href = selectedOption;
}
Then i got the parameter by
String education = request.getParameter("education");
Then i added String education as parameter to my bdao.getAllBooks(education)) method for to query.
'
<script>
function abc(){
var yourSelect = document.getElementById( "ddlViewBy" );
var val = yourSelect.options[ yourSelect.selectedIndex ].value;
//window.location.href=window.location.href;
alert(val);
window.location.replace("index.jsp?name="+val);
}
</script>
<select id="ddlViewBy" onchange="abc()">
<option>select</option>
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>
<%
String name=request.getParameter("name");
if(name!=null){
%>
<table>
<tr>
<td>author<%=name%></td>
<td>book name<%=name%></td>
</tr>
</table>
<%
}
%>
Hi,
try this, this will be helpful,
when you select a value it will call abc, function and then you are assigning that value in scriptlet..and also page is refreshing. in scriptlet you can access that value using request.getParameter("name").
now you can write your code inside scriptlet..hope helpful for someone.. :)
thanks...

How to pass a value from one jsp to another jsp page?

I have two jsp pages: search.jsp and update.jsp.
When I run search.jsp then one value fetches from database and I store that value in a variable called scard. Now, what I want is to use that variable's value in another jsp page. I do not want to use request.getparameter().
Here is my code:
<%
String scard = "";
String id = request.getParameter("id");
try {
String selectStoredProc = "SELECT * FROM Councel WHERE CouncelRegNo ='"+id+"'";
PreparedStatement ps = cn.prepareStatement(selectStoredProc);
ResultSet rs = ps.executeQuery();
while(rs.next()) {
scard = rs.getString(23);
}
rs.close();
rs = null;
} catch (Exception e) {
out.println(e.getLocalizedMessage());
} finally {
}
%>
How can I achieve this?
Using Query parameter
<a href="edit.jsp?userId=${user.id}" />
Using Hidden variable .
<form method="post" action="update.jsp">
...
<input type="hidden" name="userId" value="${user.id}">
you can send Using Session object.
session.setAttribute("userId", userid);
These values will now be available from any jsp as long as your session is still active.
int userid = session.getAttribute("userId");
Use sessions
On your search.jsp
Put your scard in sessions using session.setAttribute("scard","scard")
//the 1st variable is the string name that you will retrieve in ur next page,and the 2nd variable is the its value,i.e the scard value.
And in your next page you retrieve it using session.getAttribute("scard")
UPDATE
<input type="text" value="<%=session.getAttribute("scard")%>"/>
Use below code for passing string from one jsp to another jsp
A.jsp
<% String userid="Banda";%>
<form action="B.jsp" method="post">
<%
session.setAttribute("userId", userid);
%>
<input type="submit"
value="Login">
</form>
B.jsp
<%String userid = session.getAttribute("userId").toString(); %>
Hello<%=userid%>
How can I send data from one JSP page to another JSP page?
One of the best answer which I filtered out from above discussion.
Can be done in three ways:
using request attributes:
Set the value to send in request attribute with a name of your choice as request.setAttribute("send", "valueToSend") and retrieve it on another jsp using request.getAttribute("send");
using session attributes
Similar to above but using session object instead of request.
using application attributes
Same as 1 and 2 above but using application object in place of request and session.
Suppose we want to pass three values(u1,u2,u3) from say 'show.jsp' to another page say 'display.jsp'
Make three hidden text boxes and a button that is click automatically(using javascript).
//Code to written in 'show.jsp'
<body>
<form action="display.jsp" method="post">
<input type="hidden" name="u1" value="<%=u1%>"/>
<input type="hidden" name="u2" value="<%=u2%>" />
<input type="hidden" name="u3" value="<%=u3%>" />
<button type="hidden" id="qq" value="Login" style="display: none;"></button>
</form>
<script type="text/javascript">
document.getElementById("qq").click();
</script>
</body>
// Code to be written in 'display.jsp'
<% String u1 = request.getParameter("u1").toString();
String u2 = request.getParameter("u2").toString();
String u3 = request.getParameter("u3").toString();
%>
If you want to use these variables of servlets in javascript then simply write
<script type="text/javascript">
var a=<%=u1%>;
</script>
Hope it helps :)

how to know that how many dynamic controls created?

I have created dynamic row on click of button in table using following code :
<script type="text/javascript">
var counter = 1;
function displayResult()
{
counter++;
document.getElementById("myTable").insertRow(-1).innerHTML = '<td><select name="list_dispatch_state" id="list_dispatch_state"><option value="01">01</option><option value="02">02</option><option value="03">03</option></select></td><td><input type="text" name="txt_email'+ counter +'" id="txt_email'+ counter +'" value='+ counter +'></td>';
}
</script>
<body>
<form action="Dogetdat" method="post">
<table id="myTable" border="1">
<tr>
<th>Select</th>
<th>Value</th>
</tr>
</table>
<br />
<button type="button" onclick="displayResult()">Insert new row</button>
<input type="submit">
</form>
</body>
my question is that, on click of button new row and control inside it created but when I click on submit then form submitted to servlet page.
Then how servlet will know that how many data are received ?
Because in servlet I ll get data using
String str1= request.gerParameter("txt_email");
how servlet will know that how many variable it have to create and what will be the name of that ? what will I have to pass in request.gerParameter(""); ?
You have to use the following request.getParameterValues and get the result as an array
String emails[] = request.getParameterValues("txt_email");

Dynamically adding duplicate (unique ID) form Div elements using javascript

I have a form having fields like:
<div class="row">
<div class="field">
<input class="" type="text" name="college" id="college"/>
</div>
<div class="field">
<input class="" type="text" name="city" id="city"/>
</div>
<div class="field">
<input class="" type="text" name="zip" id="zip"/>
</div>
</div>
<input type="button" class="buttonWidth" id="btnAddressAdd" value="Add Worksite Addressess"/>
I have a Add extra address button that add's another copy of div "row" to the page. I need to send all data from the page as a request to the Controller. How do I write a script that add's extra div copy onclick of the button and also appends a unique id to each of the new fields?
See working example in Dojo: http://jsfiddle.net/phusick/PeQCN/
And the same code in plain vanilla JavaScript: http://jsfiddle.net/phusick/Rceua/
The Dojo version employs dojo/_base/lang::clone as #Peter Rader mentioned:
// var lang = require("dojo/_base/lang");
// var array = require("dojo/_base/array");
// var query = require("dojo/query");
// var domAttr = require("dojo/dom-attr");
var counter = 0;
function duplicate(/*Node*/sourceNode, /*Array*/attributesToBump) {
counter++;
var out = lang.clone(sourceNode);
if (domAttr.has(out, "id")) { out.id = bump(out.id); }
query("*", out).forEach(function(node) {
array.forEach(attributesToBump, function(attribute) {
if (domAttr.has(node, attribute)) {
domAttr.set(node, attribute, bump(domAttr.get(node, attribute)));
}
})
});
function bump(/*String*/str) {
return str + "_" + counter;
}
return out;
}
How to use the aforementioned duplicate function:
// var dom = require("dojo/dom");
// var domConstruct = require("dojo/dom-construct");
var sourceNode = dom.byId("fieldset");
var node = duplicate(sourceNode, ["id", "name", "placeholder"]);
domConstruct.place(node, sourceNode, "after");
I have written code to achieve this.
Logic:
1) get the innerHTML of desired parent
2) replace id in the text
3) Insert the new html
See a working code
Pardon me for bad style of coding on JS part. I am not use to coding directly on DOM. I prefer JQuery.
Try
to use this snipplet (see usage)
http://dojotoolkit.org/reference-guide/1.8/dojo/_base/lang.html#dojo-base-lang-clone

Categories