Get your CodeRanch badge!*
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 Java 8 in Action this week in the Java 8 forum!
JavaRanch » Java Forums » Java » JSP
Bookmark "Auto generate textbox from a dropdown" Watch "Auto generate textbox from a dropdown" New topic
Author

Auto generate textbox from a dropdown

Kingsley Efekodo
Greenhorn

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
Ranch Hand

Joined: Dec 16, 2010
Posts: 633
    
    7

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.


"There is no reason for any individual to have a computer in his home" ~ Ken Olson, Co-founder of DEC, 1977
Kingsley Efekodo
Greenhorn

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.
thanks.

code:
<%--
Document : autoform
Created on : Dec 9, 2013, 2:38:44 PM
Author : Efekodo Kingsley
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<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
$('#catList').html(html);
});
});
</script>
</head>
<body>
<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>
</select>

<div id="catList"></div>
<input type="submit" name="submit" value="Submit"/>
</form>
</body>
</html>
J. Kevin Robbins
Ranch Hand

Joined: Dec 16, 2010
Posts: 633
    
    7

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
 
Similar Threads
How do I update the values in my selectOneMenu?
Auto selecting value in dropdown using JSTL
sankar
JSF drop down.
Avoiding form resubmission