Solved

making a list the user can modify

Posted on 2004-08-18
22
167 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 15

Expert Comment

by:VincentPuglia
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Hi Andy,

  You're welcome & no problem.

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

Vinny

0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 44

Author Comment

by:AndyAinscow
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thank you both for your help.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
Glad we could help.  Thanks for the A. :^)

Cd&
0
 
LVL 44

Author Comment

by:AndyAinscow
Comment Utility
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
Comment Utility
You're welcome; hope you even enjoyed the little trip down 'memory' lane -- 16Kbytes RAM :)

Vinny
0
 
LVL 44

Author Comment

by:AndyAinscow
Comment Utility
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
Comment Utility
: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
Comment Utility
pdp-8 if I remember correctly
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Article by: Matthew
I am a very big proponent of technology compliance standards and strive to meet such criteria in all of my work. That includes my site, which is 100% XHTML 1.0 compliant as determined by the World Wide Web Consortium. https://www.matthewstevenkel…
This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
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:

763 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now