[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 187
  • Last Modified:

making a list the user can modify

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
AndyAinscow
Asked:
AndyAinscow
  • 8
  • 7
  • 7
2 Solutions
 
COBOLdinosaurCommented:
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
 
COBOLdinosaurCommented:
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
 
VincentPugliaCommented:
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
[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

 
VincentPugliaCommented:
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
 
COBOLdinosaurCommented:
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
 
VincentPugliaCommented:
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
 
COBOLdinosaurCommented:
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
 
VincentPugliaCommented:
Now that's a relic :D

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

Vinny
0
 
COBOLdinosaurCommented:
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
 
AndyAinscowFreelance programmer / ConsultantAuthor Commented:
Thanks for the code.  I'll give it a test soon and get back (it may be next week).
0
 
VincentPugliaCommented:
Hi Andy,

  You're welcome & no problem.

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

Vinny

0
 
AndyAinscowFreelance programmer / ConsultantAuthor Commented:
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
 
AndyAinscowFreelance programmer / ConsultantAuthor Commented:
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
 
VincentPugliaCommented:
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
 
AndyAinscowFreelance programmer / ConsultantAuthor Commented:
Thank you both for your help.
0
 
COBOLdinosaurCommented:
Glad we could help.  Thanks for the A. :^)

Cd&
0
 
AndyAinscowFreelance programmer / ConsultantAuthor Commented:
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
 
VincentPugliaCommented:
You're welcome; hope you even enjoyed the little trip down 'memory' lane -- 16Kbytes RAM :)

Vinny
0
 
AndyAinscowFreelance programmer / ConsultantAuthor Commented:
Memory lane - my first program was stored on paper tape, entered by teletype machine without a screen in sight.
0
 
VincentPugliaCommented:
: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
 
AndyAinscowFreelance programmer / ConsultantAuthor Commented:
pdp-8 if I remember correctly
0
 
COBOLdinosaurCommented:
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

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

  • 8
  • 7
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now