Win a copy of Functional Reactive Programming this week in the Other Languages forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Copy and Paste from EXCEL to HTML Text Input

 
Susanta Chatterjee
Ranch Hand
Posts: 102
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
We have this requirement. In the HTML form, there will be rows of lines. Each line contains multiple Input(type=text) boxes. Basically, HTML form will look like EXCEL Grid, where each column or row is a series of INPUT boxes.

Now, users will copy data from any EXCEL column and will paste that data into any input box. Then, our application should copy the data from first cell of the EXCEL to that input box, the data from second(copied) cell to the input box below the first and so on. In brief, they want to cut/copy and paste from EXCEL column to HTML column.

I tried many many ideas/tricks but did not find any useful one. Any help?

Regards to all,
- Susanta

P.S. - We are not allowed to have ActiveX controls. Any IE scripting including javascript without ActiveX is allowed.
[ September 28, 2006: Message edited by: Susanta Chatterjee ]
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
When you copy and paste an excel columns into the textbox, the columns are represented by tabs. So what I did was take the input, split it on the tabs and looped through the array and whamo.



Now if you want them to be able to post a bunch of rows at the same time and fill in a table. You can do it with a text area and splitting first on \r\n to get the rows and than on \t to get the tabs.

Hope that helps you out a bit.
Eric
 
Susanta Chatterjee
Ranch Hand
Posts: 102
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Eric, Thanks for replying.

We tried your approach of splitting the data on newline separator and distributing in the cells below. But, to do this, we have to work with textarea (as you mentioned and input[type=text] cannot handle that).

But that poses additional problem for validation of data, as user now sees a different kind of control with scroll etc. Even though you can restrict the textarea by 1 row and specific size of column, there is an additional scrollbar on right and user can type beyond text area visible portiona and additional javascript validation for type of data etc., which does not fit users' bill.

- Susanta
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
That is when: style="overflow:hidden" comes in handy

Eric
 
Susanta Chatterjee
Ranch Hand
Posts: 102
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Eric,
Thanks. That works.
We successfully did a presentation to users using this technique and the HTML Grid design is a hit. Only trivial problem I found is that, in textarea, if you press enter then a new line is created in textarea (instead of form getting submitted as in case of input type=text box), as user may type something in those HTML grid.

I am thinking to put a javascript to check onkeypress to filter out Enter key. Do you think that to be a good approach for UI design? Or do you suggest some other technique.

- Susanta
[ September 29, 2006: Message edited by: Susanta Chatterjee ]
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I actually did something like this in the past. I caught the enter key press, canceled it out, and had it execute the function to fill in the form.

Eric
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic