Solved

making a list the user can modify

Posted on 2004-08-18
22
183 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
I will show you how to create a ASP.NET Captcha control without using any HTTP HANDELRS or what so ever. you can easily plug it into your web pages. For Example a = 2 + 3 (where 2 and 3 are 2 random numbers) Session("Answer") = 5 then we…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

632 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