• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Tim Cooke
  • paul wheaton
  • Jeanne Boyarsky
  • Ron McLeod
Sheriffs:
  • Paul Clapham
  • Liutauras Vilda
  • Devaka Cooray
Saloon Keepers:
  • Tim Holloway
  • Roland Mueller
Bartenders:

Dynamically build a form

 
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Does anyone have a code sample for dynamically building a form? Basically, I want to allow the user to specify how many input boxes to add/remove from a form, while at the same time, keeping the values of other input boxes.
An example is a list of line items on a purchase order. I want to be able to add new line items to the purchase order.
 
Ranch Hand
Posts: 3695
IntelliJ IDE Java Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I don't have the code, but here are my thoughts:

The form currently has 3 lineitems, and two buttons. One says "ADD", the other "SUBMIT". The person fills out all three lines, and then clicks "ADD". This button is a submit button, and in your servlet or JSP that responds to it (perhaps it's target is even 'self'), it will take the existing lineitems, and build out the new form with existing lines. Then it would add a single blank one... like If though, the clicked the SUBMIT button, this is also a submit button, but with a different name, so that your target could tell the two submit's apart. (Your form has one target, but then it could further look at the value of the named button. ) So you would have this:So in your target, you'd have to check the value of the doWhat parameter, and if it's ADD, then do the line building exercise above, if it's SUBMIT, then process the submitted form.

[This message has been edited by Mike Curwen (edited June 13, 2001).]
 
Tom Obermeyer
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks,
I actually came up with a solution, somewhat similar to yours. I post the form to a handler that distinguishes between adding, removing, and submitting (saving). On the form, each input is given a name like "inputName" + i, where i is the current count of the total number of rows of input boxes. I have a custom tag that iterates through the count, displaying the input tag--along with it's value, if any--for the current row count.
in any of the three cases, the handler will iterate through the total row count, taking the current row's "inputName"+i, creating the object that holds this value, and putting this object into a hashtable with the key being the current row count.
the handler puts the hashtable on the request and forwards back to the original page. then the page enumerates through the hashtable, displaying the input value stored in each object.
this way, i can add some rows, enter some inputs, then add more rows and keep the old input values.
for add, the handler will add N new objects to the hashtable, starting at row count + 1.
each row has a checkbox next to the input box. so for delete, i simply check the value of the checkbox for the current row count value, and then delete it.
the input box is required. but for add and delete, if the input box is empty, an error message won't be displayed. this keeps the page clean while the user is editing. of course, doing submit (save) will validate completely.
 
Greenhorn
Posts: 17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hello Tom,
I have a similar problem like yours in a project .
Can you help me with a piece of complete code which can help me solve a problem.
In my case I am building a form with n textbox where the value of the form is retrived from the session variable and used as an iterator of for loop in javascript which generates desired no. of textboxes thru document.write("<input type=text ....>").
Your piece of code can help me solve the same.
Thanking you,
Mani

Originally posted by Tom Obermeyer:
Thanks,
I actually came up with a solution, somewhat similar to yours. I post the form to a handler that distinguishes between adding, removing, and submitting (saving). On the form, each input is given a name like "inputName" + i, where i is the current count of the total number of rows of input boxes. I have a custom tag that iterates through the count, displaying the input tag--along with it's value, if any--for the current row count.
in any of the three cases, the handler will iterate through the total row count, taking the current row's "inputName"+i, creating the object that holds this value, and putting this object into a hashtable with the key being the current row count.
the handler puts the hashtable on the request and forwards back to the original page. then the page enumerates through the hashtable, displaying the input value stored in each object.
this way, i can add some rows, enter some inputs, then add more rows and keep the old input values.
for add, the handler will add N new objects to the hashtable, starting at row count + 1.
each row has a checkbox next to the input box. so for delete, i simply check the value of the checkbox for the current row count value, and then delete it.
the input box is required. but for add and delete, if the input box is empty, an error message won't be displayed. this keeps the page clean while the user is editing. of course, doing submit (save) will validate completely.


 
Tom Obermeyer
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
you can use javascript to dynamically build contents of a form. an example is at the following URL:
http://javascript.internet.com/forms/dynamic-input.html
the problem with this example is it doesn't keep the old values of the input boxes. and, this type of javascript won't work in netscape.
if you want to build the form on the server side like i did, reread through what i did in the earlier post.
bascially, just give your textboxes the same name, but append a counter variable to the end of the name. use a scriptlet or tage to loop through the counter, adding the textboxes with name="blah<%=counter%>" for each iteration.
then, to the servlet/class you post to, you can iterate through the parameters using the same counter (request.getParameter("blah"+counter) to do validation or whatever. you can iterate through the parameters to delete one that are marked for deletion. and you can add new textboxes by increasing the counter size by currentNumberTextBoxes + addNumberTextBoxes.
 
Mike Curwen
Ranch Hand
Posts: 3695
IntelliJ IDE Java Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
If you think it through carefully, you don't really need to append a counter number onto the name of your form elements.

Form elements with the same name are sent to the CGI as an array. Use the subscript of the array as the number.
 
Tom Obermeyer
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
yes, mike, that is true.
however, i am not sure if the using request.getParameterNames(String) will ensure correct ordering. I use the counter as a numbering scheme, so it's useful anyway.
 
Mike Curwen
Ranch Hand
Posts: 3695
IntelliJ IDE Java Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I've thought about it for a while.. I admit, I never thought about the order in which a query string is built. My assumption based on experience, is that it starts at the < form > tag and works it's way down to the < /form > tag. So in that way, it would be in proper order for multiple form elements having the same name.

However, I've failed to find this spelled out in any spec anywhere.

There is something that bothers me about placing identification information into the name of a field though. I think it's a database prejudice. If I think of lines on a form, I think of rows on a table. Each 'column' (both on the HTML form and on the table) should have a unique name. But rows in an HTML form shouldn't need to have the column names appended with keying information. So how to implement a db-like PK for rows of an HTML form?
Hidden field. The hidden field on each 'line' would contain your id information, and then each element would not need it included in their field name on that line.

In the case of an HTML form, this is probably a duplication of data, since the array subscript in all likelihood is 'in order'. Alternately, it's *not* a duplication, since if you are doing things like "line items in a purchase order", the line that is '3rd' down in the HTML form, might be from a database table has a PK of '4827'.

That tended to ramble at the end, didn't it?
 
Tom Obermeyer
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
exactly, mike.
that's why i have a hidden field holding my id field, which, itself, has a name of "somename" + i.
the 'i' is not the id, it's simply a counter.
another reason it's useful to have different parameter names for each row is for validation. you might want to say "this field at row 'i' is invalid." however, i'm just putting each error message below it's corresponding input box.
 
Right! We're on it! Let's get to work tiny ad!
Smokeless wood heat with a rocket mass heater
https://woodheat.net
reply
    Bookmark Topic Watch Topic
  • New Topic