jQuery in Action, 3rd edition
The moose likes JSP and the fly likes Auto generate textbox from a dropdown Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login

Win a copy of REST with Spring (video course) this week in the Spring forum!
JavaRanch » Java Forums » Java » JSP
Bookmark "Auto generate textbox from a dropdown" Watch "Auto generate textbox from a dropdown" New topic

Auto generate textbox from a dropdown

Kingsley Efekodo

Joined: May 16, 2011
Posts: 2
Am new to JSP.
Need help in auto generating textbox from selecting a number from a dropdown and getting the values from the auto generated texbox.

e.g if i select the number 4, it should auto generate four textbox for me. And need to get the values of the generated textbox when data is entered.
Thanks in advance
J. Kevin Robbins

Joined: Dec 16, 2010
Posts: 1463

There are at least two approaches you can take. I'll let you pick one, take your best shot, and post your code here. First of all, let's get the terminology straight. There is no dropdown in html, it's a select-option control.

Now you can wrap that select-option in a form with a submit button and send the value to a servlet that will generate the page you want. Or you can use Javascript (jQuery would be my choice) and act on the "onChange" event of the select-option control to create the text boxes. Most likely, the text boxes will be wrapped in a form with a submit button and will post to a servlet.

If you are not comfortable with Javascript, I would recommend that you start with the first approach. Give it your best shot and come back here with the results and we'll help some more.

"The good news about computers is that they do what you tell them to do. The bad news is that they do what you tell them to do." -- Ted Nelson
Kingsley Efekodo

Joined: May 16, 2011
Posts: 2
Kindly find code below. My Challenge is how to get the values from the textfield and use for my database. need help.

Document : autoform
Created on : Dec 9, 2013, 2:38:44 PM
Author : Efekodo Kingsley

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript">
//when the webpage has loaded do this
$(document).ready(function() {
//if the value within the dropdown box has changed then run this code
$('#num_cat').change(function() {
//get the number of fields required from the dropdown box
var num = $('#num_cat').val();

var i = 0; //integer variable for 'for' loop
var html = ''; //string variable for html code for fields
//loop through to add the number of fields specified
for (i = 1; i <= num; i++) {
//concatinate number of fields to a variable
html += 'Category ' + i + ': <input type="text" name="category-' + i + '"/><br/>';

//insert this html code into the div with id catList
<form method="post" action="action.php">
Number of fields required:
<select id="num_cat" name="num_cat">
<option value="0">- SELECT -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>

<div id="catList"></div>
<input type="submit" name="submit" value="Submit"/>
J. Kevin Robbins

Joined: Dec 16, 2010
Posts: 1463

Need some more info. First, please use code tags and proper indenting to make your code more readable. Second, please post the resulting HTML generated by this code (after you've selected an option from the select control). Finally, and most important, what happens when you try this? Describe any error you get and the point at which it occurs.
I agree. Here's the link: http://aspose.com/file-tools
subject: Auto generate textbox from a dropdown
It's not a secret anymore!