• Post Reply Bookmark Topic Watch Topic
  • New Topic

Create text boxes from dropdown

 
aarna shree
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am able to generate text boxes. But I need one specific thing in that:

Through a drop-down I should select a number and those many text boxes should get generated.
Suppose I selected 4 from the drop down list. Then on screen it should display:

Student 1: Textbox
Student2: Textbox
Student3: Textbox
Student4: Textbox

Regards,
aarna
 
Paul Ngom
Ranch Hand
Posts: 355
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,
What have you tried so far?
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65530
105
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
That is very likely something you should do with Javascript and jQuery rather than JSP.
 
Paul Ngom
Ranch Hand
Posts: 355
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I avoid as much as possible not to flood my
web pages with client side scripts. You can reload
the jsp page and use the dropdown combo
box value to generate the texboxes.
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65530
105
IntelliJ IDE Java jQuery Mac Mac OS X
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Paul Ngom wrote:I avoid as much as possible not to flood my
web pages with client side scripts. You can reload
the jsp page and use the dropdown combo
box value to generate the texboxes.

Which would be fine if the users want a web experience from 2003. Reloading the whole page to make dynamic changes is obsolete and passé at this point. Users and clients expect more from a web experience in this day and age.

If you don't want to keep up with the times, it will be hard to continue to compete in the marketplace with your products, as well as in the job market.
 
Paul Ngom
Ranch Hand
Posts: 355
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I was right to think that i will hear from Bear
:-)
 
Anindya Roy
Ranch Hand
Posts: 76
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You can get an idea from here


http://www.webtuts.in/add-input-fields-to-form-dynamically-using-jquery/
 
Paul Ngom
Ranch Hand
Posts: 355
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Using javascript, when your select element has an id equal to 'choice' and you get a p element with id equal to 'added'(you put this p where you want the textboxes to appear), you can do the following:
 
aarna shree
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,
Thanks for the suggestion of using javascript.
I used javascript and now I am getting the output. But, the values that I am sending through the textbox are not getting received in the servlet. The value sent as no of users entered is getting received in the servlet.....but the values entered into the text box is null......Please help me on this

<script type="text/javascript">

var intTextBox=0;
//Function to add text box in the file
function addElement()
{
intTextBox = intTextBox + 1;
var contentID = document.getElementById('content');
contentID.innerHTML = "";
var howManyTextBoxes = document.getElementById("textCombo").value;
for(var i=1;i<=howManyTextBoxes; i++){
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+i);
newTBDiv.innerHTML = "Student"+i+": <input type= 'text' id='"+i + "' name='Parameter"+ i + "'/>";
contentID.appendChild(newTBDiv);

}
}
</script>


<form name="myForm">
<b>Enter No.Of Users:</b>
<select name="textCombo" id="textCombo" onchange="javascript:addElement();">
<option value="-1">Select Option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

<input type="hidden" name="myvar" value="0" id="theValue" /><br><br>

<center>
<input type="submit" value="Submit"> <input type="reset" value="Reset"></center>
</form>
<div id="content"></div>
</body>

</html>


My servlet is as below:

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

int no_of_users=Integer.parseInt(request.getParameter("textCombo"));
out.println("The no. of Users entered is :"+no_of_users);
String user=request.getParameter("???"); ////// what shall I put here
out.println("The new user is: "+user);


 
aarna shree
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The screen shots are attached
Screenshot from 2014-07-11 12:31:01.png
[Thumbnail for Screenshot from 2014-07-11 12:31:01.png]
Screenshot from 2014-07-11 12:38:31.png
[Thumbnail for Screenshot from 2014-07-11 12:38:31.png]
 
Varun Selva
Ranch Hand
Posts: 48
Eclipse IDE Java Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
newTBDiv.innerHTML = "Student"+i+": <input type= 'text' id='"+i + "' name='Parameter"+ i + "'/>";

As you defined


Did you try like this?

>
 
aarna shree
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Varun,

I tried doing like this, but still it is not coming. Any other way of doing this



Regards,

Aarna

 
Paul Ngom
Ranch Hand
Posts: 355
1
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Varun code should work. Try changing
the id attribute of input element in javascript function to start with a letter.
You may be having syntax error. Also move the div element with id="content" inside the form.
Your for loop in function should also be for(var i=0;i<howManyTextBoxes; i++){...}
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!