Solved

making a list the user can modify

Posted on 2004-08-18
22
175 Views
Last Modified: 2010-04-06
I would like to know how to accomplish the following (cut to the bone).
Display a list which contains ON EACH ROW two fields that the user can edit and a button that the user can press to transfer the contents of the first field to the second field.

eg
Row 1      Hello    -->    goodbye
Row 2      Test     -->
....


User can click --> in row 2 and it becomes
Row 2      Test     -->   Test

or user can type directly into the field under goodbye so row 2 becomes
Row 2       Test    -->    User typed text here.


There could be any number of rows (tens, hundreds or even thousands theoretically).  The button must only modify the fields in the line it is on.  (Think database record).

Ultimately I want to use this in a CHTMLView - Microsoft Visual C, MFC class which uses a web browser control, but I will test it with IE initially.
0
Comment
Question by:AndyAinscow
  • 8
  • 7
  • 7
22 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11832770
This should be about what you are looking for.

<html>
<head>
<title> transfer</title>
<style type="text/css">
fieldset {display:inline}
</style>
</head>
<body>
<form>
<fieldset>
<input type="text" value="hello"><input
type="button" value="-->"
onclick="this.parentNode.childNodes[2].value=this.parentNode.childNodes[0].value"
><input type="text">
</fieldset><br />
<fieldset>
<input type="text" value="hello"><input
type="button" value="-->"
onclick="this.parentNode.childNodes[2].value=this.parentNode.childNodes[0].value"
><input type="text">
</fieldset></br />
<fieldset>
<input type="text" value="hello"><input
type="button" value="-->"
onclick="this.parentNode.childNodes[2].value=this.parentNode.childNodes[0].value"
><input type="text">
</fieldset>
</form>
</body>
</html>



NOTE that there is no spacing or line break between the closing > for the input tag and the opening tag for the next input.  That is necessary because IE will put in a phantom text nodes for the white space and the indexing will then be off.

Cd&
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 250 total points
ID: 11832929
Don't use that.  This is a more efficient version:

<html>
<head>
<title> transfer</title>
<style type="text/css">
fieldset {display:inline}
</style>
</head>
<body>
<form>
<fieldset>
<input type="text" value="hello"><input
type="button" value="-->"
onclick="this.nextSibling.value=this.previousSibling.value"
><input type="text">
</fieldset><br />
<fieldset>
<input type="text" value="hello"><input
type="button" value="-->"
onclick="this.nextSibling.value=this.previousSibling.value"
><input type="text">
</fieldset></br />
<fieldset>
<input type="text" value="hello"><input
type="button" value="-->"
onclick="this.nextSibling.value=this.previousSibling.value"
><input type="text">
</fieldset>
</form>
</body>
</html>


Cd&
0
 
LVL 15

Assisted Solution

by:VincentPuglia
VincentPuglia earned 250 total points
ID: 11833479
Hi,

  A slight, but possibly important, variation on Cd&'s code -- pass the previous value only if the current box is blank:

<html>
<head>
<title> transfer</title>
<style type="text/css">
fieldset {display:inline}
</style>
<script type='text/javascript'>
function passIt(oBtn)
{
  if(oBtn.nextSibling.value == '') oBtn.nextSibling.value=oBtn.previousSibling.value
}
</script>
</head>
<body>
<form>
<fieldset>
<input type="text" value="hello"><input
type="button" value="-->"
onclick="passIt(this)"
><input type="text">
</fieldset><br />
<fieldset>
<input type="text" value="hello" onfocus="this.blur()"><input type="button" value="-->" onclick="passIt(this)"><input type="text">
</fieldset></br />
<fieldset>
<input type="text" value="hello" onfocus="this.blur()"><input type="button" value="-->" onclick="passIt(this)"><input type="text">
</fieldset>
</form>
</body>
</html>

Vinny
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 15

Expert Comment

by:VincentPuglia
ID: 11833616
And here's a version that should be browser independent, regardless of version, as well as loop-friendly (if you are writing the rows out with asp/php/etc):

<html>
<head>
<title> transfer</title>
<style type="text/css">
fieldset {display:inline}
</style>
<script type='text/javascript'>
function passIt(oBtn, num)
{
  var oForm = oBtn.form;
  var oSrc = oForm['source' + num];
  var oDest = oForm['dest' + num];
  if(oDest.value == '')  oDest.value=oSrc.value
}
</script>
</head>
<body>
<form name="theForm">
<fieldset>
<input type="text" value="hello" name="source0"><input
type="button" value="-->"
onclick="passIt(this, 0)"
><input type="text" name="dest0">
</fieldset><br />
<fieldset>
<input type="text" value="hello" name="source1"><input
type="button" value="-->"
onclick="passIt(this, 1)"
><input type="text" name="dest1">
</fieldset></br />
<fieldset>
<input type="text" value="hello" name="source2"><input
type="button" value="-->"
onclick="passIt(this, 2)"
><input type="text" name="dest2">
</fieldset>
</form>
</body>
</html>

Vinny
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11835957
Browser independent... yes support for the relic version 4 browsers.

Using DOM1 code only supports modern browsers, so if the 2% who refuse to upgrade are part of the target demographic 20th centruy code should be used, but I'm not sure computers so old they can't upgrade could handle the web browser control.

Cd&
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 11836168
Hi Cd&,

roflmao :D
[quote]
support for the relic version 4
[/quote]

What can I say?  I knew people (somewhere in the Australian school system) who as of two years ago were using IE3 :eek:!!!

Vinny
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11836257
I think I still have a copy of my first browser from 10 years ago -- Mosaic 1.0 ... but I don't expect there's much support for it. :^)

Cd&
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 11836308
Now that's a relic :D

Do you also have a 5-1/4 drive to run it in?

Vinny
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11836335
It will be in my tape archives somewhere... I don't think we have anything with a 5.25 anymore.  But there are some old drives around and we could probably find a controller if we really need to get something from an old floppy.

Cd&
0
 
LVL 44

Author Comment

by:AndyAinscow
ID: 11838333
Thanks for the code.  I'll give it a test soon and get back (it may be next week).
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 11840286
Hi Andy,

  You're welcome & no problem.

Cd& -- the floppy in the tape archives -- now that's rich :D

Vinny

0
 
LVL 44

Author Comment

by:AndyAinscow
ID: 11881485
COBOLdinosaur
That works fine.


Vinny
your post that starts with
A slight, but possibly important, variation on Cd&'s code -- pass the previous value only if the current box is blank

It works but I can't edit the first field.  Is this to do with the blur in the onfocus?
0
 
LVL 44

Author Comment

by:AndyAinscow
ID: 11881512
Would it make any difference if the end user has disabled javascript (or other security features enabled in browser) ?
This applies to both sets of HTML code (inline from COBOL, function from Vinny).  In other words will it always work (assuming browser isn't too old).
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 11881687
Hi Andy,

  yes, the focus/blur thingy prevents editing; remove it and you can edit.  
  if javascript is disabled, it will not work -- then again, most nothing will; the only exceptions are straight HTML (links, submit button) and server side code.  

  If you are worried about javascript being disabled and bandwidth usage, then you really have a problem (especially if you are talking about thousands of records). If this application is an ecommerce one, then 99.99% of your users have javascript enabled.  If it is on an intranet, tell the admin to make sure everyone has it enabled.

Vinny
0
 
LVL 44

Author Comment

by:AndyAinscow
ID: 11881778
Thank you both for your help.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11881927
Glad we could help.  Thanks for the A. :^)

Cd&
0
 
LVL 44

Author Comment

by:AndyAinscow
ID: 11882029
Copy and paste, the code works, rapid response.  In my opinion B or C is not a choice for a case like that.  Good work guys.
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 11883587
You're welcome; hope you even enjoyed the little trip down 'memory' lane -- 16Kbytes RAM :)

Vinny
0
 
LVL 44

Author Comment

by:AndyAinscow
ID: 11884115
Memory lane - my first program was stored on paper tape, entered by teletype machine without a screen in sight.
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 11884504
:D

IBM 360-30 I/O, 1401(?) card readers, light bulb console :D

get those UNIVACS out of storage!  We've got some oldsters running [well maybe stumbling] around here.

:D

Vinny
0
 
LVL 44

Author Comment

by:AndyAinscow
ID: 11884917
pdp-8 if I remember correctly
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11886420
Yeah 360 was my starting point as well. I can still intrepret a core dump if I have to; but let's not go back to the days of writing a page of code just to open a file.

Cd&
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question