Solved

making a list the user can modify

Posted on 2004-08-18
22
174 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
Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 
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

Use Case: Protecting a Hybrid Cloud Infrastructure

Microsoft Azure is rapidly becoming the norm in dynamic IT environments. This document describes the challenges that organizations face when protecting data in a hybrid cloud IT environment and presents a use case to demonstrate how Acronis Backup protects all data.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
remove Handler and Add Handler for one file 3 45
Finding the platform that was used to build a website 4 50
Magento Indexing 1 98
Adjust the position 3 62
Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
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…
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

832 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