asked on

Drawing a line using captured screen coordinates

Hi,

For the code below............is it possible to capture the screen coordinates and draw the line, instead of accepting input from 4 text boxes?

Thanks

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
  <style>
    v\:* {behavior:url(#default#VML);}
  </style>
  <script language="JavaScript">
 
  function makeNewPolyLine( pts )
  {
    var line = document.createElement( "v:polyLine" ) ;
    line.points = pts.join( ',' ) ;
    line.style.position = 'absolute' ;
    line.stroked = true ;
    line.filled = true ;
    line.fillcolor = 'black' ;
    return line ;
  }
  
  function drawArrow( container, lineId, x, y, xx, yy )
  {
    var arrowWidth = 10.0 ;
    var theta = 0.423 ;
    var xPoints = [] ;
    var yPoints = []
    var vecLine = [] ;
    var vecLeft = [] ;
    var fLength;
    var th;
    var ta;
    var baseX, baseY ;
 
    xPoints[ 0 ] = xx ;
    yPoints[ 0 ] = yy ;
 
    // build the line vector
    vecLine[ 0 ] = xPoints[ 0 ] - x ;
    vecLine[ 1 ] = yPoints[ 0 ] - y ;
 
    // build the arrow base vector - normal to the line
    vecLeft[ 0 ] = -vecLine[ 1 ] ;
    vecLeft[ 1 ] = vecLine[ 0 ] ;
 
    // setup length parameters
    fLength = Math.sqrt( vecLine[0] * vecLine[0] + vecLine[1] * vecLine[1] ) ;
    th = arrowWidth / ( 2.0 * fLength ) ;
    ta = arrowWidth / ( 2.0 * ( Math.tan( theta ) / 2.0 ) * fLength ) ;
 
    // find the base of the arrow
    baseX = xPoints[ 0 ] - ta * vecLine[0] ;
    baseY = yPoints[ 0 ] - ta * vecLine[1] ;
 
    // build the points on the sides of the arrow
    xPoints[ 1 ] = baseX + th * vecLeft[0] ;
    yPoints[ 1 ] = baseY + th * vecLeft[1] ;
    xPoints[ 2 ] = baseX - th * vecLeft[0] ;
    yPoints[ 2 ] = baseY - th * vecLeft[1] ;
 
    var ptArr = [ x, y, baseX, baseY, xPoints[ 1 ], yPoints[ 1 ], xPoints[ 0 ], yPoints[ 0 ], xPoints[ 2 ], yPoints[ 2 ], baseX, baseY ] ;
    var oldLine = document.getElementById( lineId ) ;
 
    if( oldLine ) // a line with this ID exists, so just change it
    {
      oldLine.points.value = ptArr.join( ',' ) ;  // need to use points.value here for some mental reason ;)
    }
    else // add a new line
    {
      var newLine = makeNewPolyLine( ptArr ) ;
      newLine.setAttribute( "id", lineId ) ;
      container.appendChild( newLine ) ;
    }
  }  
 
  function makeCall()
  {
    var id  = document.getElementById( 'theid' ).value ;
    var canvas = document.getElementById( 'canvas' ) ;
    var x1 = document.getElementById( 'x1' ).value ;
    var y1 = document.getElementById( 'y1' ).value ;
    var x2 = document.getElementById( 'x2' ).value ;
    var y2 = document.getElementById( 'y2' ).value ;
    drawArrow( canvas, id, x1, y1, x2, y2 ) ;
  }
  </script>
</head>
<body>
  <div id="canvas" style="width: 600px ; height: 400px">
  </div>
  LineID: <input type="text" size="4" id="theid" value="line1">
  X1: <input type="text" size="4" id="x1" value="10"> Y1: <input type="text" size="4" id="y1" value="10"> -&gt;
  X2: <input type="text" size="4" id="x2" value="300"> Y2: <input type="text" size="4" id="y2" value="120">
  <button onclick="makeCall()">DRAW!</button>
 
</body>
</html>

Open in new window

Michel Plungjan

http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

Michel Plungjan

sorry. did not see the VML there

Yes it should be possible

http://javascript.internet.com/page-details/mouse-coordinates.html

Tul02

ASKER

Thank you 'mplungjan' for your response. Unfortunately, it did'nt answer my question. I am trying to capture 2 sets of screen coordinates........(x1,y1) and (x2, y2)......denoting the starting and ending points..........and store them, in order to draw a line.

Michel Plungjan

Yes - you start saving onClick and finish on the next onClick.

Michel Plungjan

I'll have a look

Michel Plungjan

Here you are

<html xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
  <title></title>
  <style type="text/css">
    v\:* {behavior:url(#default#VML);}
  </style>
  <script language="JavaScript">
<!-- Original:  CodeLifter.com (support@codelifter.com) -->
<!-- Web Site:  http://www.codelifter.com -->
 
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- The capture script was modified by mplungjan javascripts(a)plungjan.name to capture click instead -->
 
<!-- Begin
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEDOWN)
document.onmousedown = getMouseXY;
 
var lines = new Array();
var currentLine = 0;
function crtLine(x,y,id) {
  this.id=id;
  this.x1=x;
  this.y1=y;
  this.x2=0;
  this.y2=0;
}
function getMouseXY(e) {
  var tempX = 0;
  var tempY = 0;
  if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft;
    tempY = event.clientY + document.body.scrollTop;
  }
  else {  // grab the x-y pos.s if browser is not IE
    tempX = e.pageX;
    tempY = e.pageY;
  }  
  if (tempX < 0){tempX = 0;}
  if (tempY < 0){tempY = 0;}
  if (lines[currentLine]) {
    lines[currentLine].x2=tempX;
    lines[currentLine].y2=tempY;
    document.getElementById('lineDiv').innerHTML+='<br>'+lines[currentLine].id+': '+ lines[currentLine].x1 +'x'+ lines[currentLine].y1 + ','+ lines[currentLine].x2 +'x'+ lines[currentLine].y2 
    drawArrow( document.getElementById( 'canvas' ), lines[currentLine].id, lines[currentLine].x1, lines[currentLine].y1, lines[currentLine].x2, lines[currentLine].y2 ) ;
    currentLine++
  }
  else { 
    lines[currentLine] = new crtLine(tempX,tempY,'line'+currentLine)
  }  
  return true;
}
 
// end of capture script 
 
  function makeNewPolyLine( pts )
  {
    var line = document.createElement( "v:polyLine" ) ;
    line.points = pts.join( ',' ) ;
    line.style.position = 'absolute' ;
    line.stroked = true ;
    line.filled = true ;
    line.fillcolor = 'black' ;
    return line ;
  }
  
  function drawArrow( container, lineId, x, y, xx, yy )
  {
    var arrowWidth = 10.0 ;
    var theta = 0.423 ;
    var xPoints = [] ;
    var yPoints = []
    var vecLine = [] ;
    var vecLeft = [] ;
    var fLength;
    var th;
    var ta;
    var baseX, baseY ;
 
    xPoints[ 0 ] = xx ;
    yPoints[ 0 ] = yy ;
 
    // build the line vector
    vecLine[ 0 ] = xPoints[ 0 ] - x ;
    vecLine[ 1 ] = yPoints[ 0 ] - y ;
 
    // build the arrow base vector - normal to the line
    vecLeft[ 0 ] = -vecLine[ 1 ] ;
    vecLeft[ 1 ] = vecLine[ 0 ] ;
 
    // setup length parameters
    fLength = Math.sqrt( vecLine[0] * vecLine[0] + vecLine[1] * vecLine[1] ) ;
    th = arrowWidth / ( 2.0 * fLength ) ;
    ta = arrowWidth / ( 2.0 * ( Math.tan( theta ) / 2.0 ) * fLength ) ;
 
    // find the base of the arrow
    baseX = xPoints[ 0 ] - ta * vecLine[0] ;
    baseY = yPoints[ 0 ] - ta * vecLine[1] ;
 
    // build the points on the sides of the arrow
    xPoints[ 1 ] = baseX + th * vecLeft[0] ;
    yPoints[ 1 ] = baseY + th * vecLeft[1] ;
    xPoints[ 2 ] = baseX - th * vecLeft[0] ;
    yPoints[ 2 ] = baseY - th * vecLeft[1] ;
 
    var ptArr = [ x, y, baseX, baseY, xPoints[ 1 ], yPoints[ 1 ], xPoints[ 0 ], yPoints[ 0 ], xPoints[ 2 ], yPoints[ 2 ], baseX, baseY ] ;
    var oldLine = document.getElementById( lineId ) ;
 
    if( oldLine ) // a line with this ID exists, so just change it
    {
      oldLine.points.value = ptArr.join( ',' ) ;  // need to use points.value here for some mental reason ;)
    }
    else // add a new line
    {
      var newLine = makeNewPolyLine( ptArr ) ;
      newLine.setAttribute( "id", lineId ) ;
      container.appendChild( newLine ) ;
    }
  }  
 
  </script>
</head>
<body>
  <div id="canvas" style="width: 600px ; height: 400px"> </div>
  <div id="lineDiv"> </div>  
</body>
</html>

Open in new window

Tul02

ASKER

Hi,

Thanks for your response once more......and the solution (no wonder you have ben assigned the status of a 'genius' :-)-). It does work on its own. However, while calling the function from the body of a page.................for e.g., "<a href="javascript:onclick=somefunction()">Draw a line</a>".............................I am an error? Could you kindly devise a way of calling it from a link on a page?

Also, is there a way to place two markers (a circle or something) on the joining points (that appears only when the line is clicked)?

Regards

Tul02

ASKER

Hi,

Thanks for your response once more......and the solution (no wonder you have ben assigned the status of a 'genius' :-)-). It does work on its own. However, while calling the function from the body of a page.................for e.g., "<a href="javascript:onclick=somefunction()">Draw a line</a>".............................I am getting an error. Could you kindly devise a way of calling it from a link on a page?

Also, is there a way to place two markers (a circle or something) on the joining points (that appears only when the line is clicked)?

Regards

Michel Plungjan

Erm... okeee, thanks for the kind words...

What did you have in mind about the lines?

To not join the lines before you click a link is simple

To add a circle is not so simple...

Tul02

ASKER

Hi,

I was actually trying to connect circles on a page, using the lines.

If placing a marker is too difficult, it is alright not to do it right now. However, without the other bit (drawing a line after clicking on a link in the body of a page), the function is generating an error. Could you kindly get this bit done?

Thanks

Michel Plungjan

Here... change the createElement to a VML circle with center in x.y

<html xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
  <title></title>
  <style type="text/css">
    v\:* {behavior:url(#default#VML);}
  </style>
  <script language="JavaScript">
<!-- Original:  CodeLifter.com (support@codelifter.com) -->
<!-- Web Site:  http://www.codelifter.com -->
 
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Modified by mplungjan javascripts(a)plungjan.name to capture click instead -->
 
<!-- Begin
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEDOWN)
document.onmousedown = getMouseXY;
 
var lines = new Array();
var currentLine = 0;
var container;
function crtLine(x,y,id) {
  this.id=id;
  this.x1=x;
  this.y1=y;
  this.x2=0;
  this.y2=0;
}
function addPointDiv(id,x,y) {
  try {
    var point = document.createElement('div');
    point.id = id;
    point.style.position='absolute'; 
    point.style.top = y+'px';
    point.style.left= x+'px';
    point.style.color='red';
    point.innerHTML=id;
    container.appendChild(point);
  }
  catch(e) { alert(e.message)}
 
}
window.onload=function() { 
  container = document.getElementById('canvas')
}
function getMouseXY(e) {
  var tempX = 0;
  var tempY = 0;
  if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft;
    tempY = event.clientY + document.body.scrollTop;
  }
  else {  // grab the x-y pos.s if browser is not IE
    tempX = e.pageX;
    tempY = e.pageY;
  }
  if (tempY > 400) return; // do not capture events when the links are clicked  
  if (tempX < 0){tempX = 0;}
  if (tempY < 0){tempY = 0;}
  if (lines[currentLine]) {
    lines[currentLine].x2=tempX;
    lines[currentLine].y2=tempY;
    document.getElementById('lineDiv').innerHTML+='<br>'+
      '<a href="#" onClick="drawArrow(container, \''+lines[currentLine].id +'\','+lines[currentLine].x1+','+lines[currentLine].y1+','+lines[currentLine].x2+','+lines[currentLine].y2+'); return false">Draw '+lines[currentLine].id+'</a>' ;
    addPointDiv('to_'+lines[currentLine].id,lines[currentLine].x2,lines[currentLine].y2)
    currentLine++
  }
  else { 
    lines[currentLine] = new crtLine(tempX,tempY,'line'+currentLine)
    addPointDiv('from_'+lines[currentLine].id,lines[currentLine].x1,lines[currentLine].y1)
  }  
  return true;
}
 
 
  function makeNewPolyLine( pts )
  {
    var line = document.createElement( "v:polyLine" ) ;
    line.points = pts.join( ',' ) ;
    line.style.position = 'absolute' ;
    line.stroked = true ;
    line.filled = true ;
    line.fillcolor = 'black' ;
    return line ;
  }
  
  function drawArrow( container, lineId, x, y, xx, yy )
  {
    document.getElementById('from_'+lineId).style.display='none'
    document.getElementById('to_'+lineId).style.display='none'
    var arrowWidth = 10.0 ;
    var theta = 0.423 ;
    var xPoints = [] ;
    var yPoints = []
    var vecLine = [] ;
    var vecLeft = [] ;
    var fLength;
    var th;
    var ta;
    var baseX, baseY ;
 
    xPoints[ 0 ] = xx ;
    yPoints[ 0 ] = yy ;
 
    // build the line vector
    vecLine[ 0 ] = xPoints[ 0 ] - x ;
    vecLine[ 1 ] = yPoints[ 0 ] - y ;
 
    // build the arrow base vector - normal to the line
    vecLeft[ 0 ] = -vecLine[ 1 ] ;
    vecLeft[ 1 ] = vecLine[ 0 ] ;
 
    // setup length parameters
    fLength = Math.sqrt( vecLine[0] * vecLine[0] + vecLine[1] * vecLine[1] ) ;
    th = arrowWidth / ( 2.0 * fLength ) ;
    ta = arrowWidth / ( 2.0 * ( Math.tan( theta ) / 2.0 ) * fLength ) ;
 
    // find the base of the arrow
    baseX = xPoints[ 0 ] - ta * vecLine[0] ;
    baseY = yPoints[ 0 ] - ta * vecLine[1] ;
 
    // build the points on the sides of the arrow
    xPoints[ 1 ] = baseX + th * vecLeft[0] ;
    yPoints[ 1 ] = baseY + th * vecLeft[1] ;
    xPoints[ 2 ] = baseX - th * vecLeft[0] ;
    yPoints[ 2 ] = baseY - th * vecLeft[1] ;
 
    var ptArr = [ x, y, baseX, baseY, xPoints[ 1 ], yPoints[ 1 ], xPoints[ 0 ], yPoints[ 0 ], xPoints[ 2 ], yPoints[ 2 ], baseX, baseY ] ;
    var oldLine = document.getElementById( lineId ) ;
 
    if( oldLine ) // a line with this ID exists, so just change it
    {
      oldLine.points.value = ptArr.join( ',' ) ;  // need to use points.value here for some mental reason ;)
    }
    else // add a new line
    {
      var newLine = makeNewPolyLine( ptArr ) ;
      newLine.setAttribute( "id", lineId ) ;
      container.appendChild( newLine ) ;
    }
  }  
 
  </script>
</head>
<body>
  <div id="canvas" style="width: 600px ; height: 400px"> </div>
  <div id="lineDiv"> </div>  
</body>
</html>

Open in new window

Tul02

ASKER

Hi,

Can you make it a little less complicated please? :-) The code right now is triggering the link ('Draw line0'), after an user clicks anywhere on the body. Instead, is it possible to call the entire function for drawing a line from a static link in the body of the page?

Thanks

Michel Plungjan

Then you need to tell me the exact procedure from I load the empty looking page to I see a line.

Now you get a link for each SET of clicks, try to click 4 times around the place

Tul02

ASKER

Hi,

What I meant was......................

"<body>
<div id="canvas" style="width: 600px ; height: 400px"> </div>
<div id="lineDiv"> </div>

<span><a href="javascript:onclick=drawLine()">Draw a line</a> </span>
</body>"

with 'drawLine()' calling the code you created to generate a line.

Thanks

Michel Plungjan

I understand what you meant. I just do not undestand what you want

The script currently captures PAIRS of coordinates. WHICH do you want to draw WHEN?
And you want people to not have to click too often, so now you add a click to do the actual drawing?

So again, can you tell me what a typical user should see

1. load page - page is empty (or had a map or whatever)
2. User clicks what and what?
3. User clicks link to draw what and what?

Tul02

ASKER

Hi,

Alright, I see the confusion. Apologies for failing to get my requirement across. Here it goes...........

1) User types an URL, and a page is loaded with an empty canvas (a div) and various links..........one of which (a static link) allows the user to draw a line between a pair of coordinates.

2) User clicks on the link (for e.g. ><a href="javascript:onclick=drawLine()">Draw a line</a> ), which invokes a function (after asking the user to click on two points through which a line is required) to accept the 2 coordinates/points to draw the line.

3) User clicks on two places on the blank canvas and the line is drawn.

Basically, the code to draw a single line is invoked everytime the user clicks on the 'Draw a line' link.

Hope I could explain it better this time :-)

Thanks and Regards

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tul02

ASKER

Hi,

Although the above changes make the code to only mark the two points through which the line should be drawn, but does not actually draw the line, I will accept this solution, along with the code snippet you posted previously.

Many thanks for all your help. I hope I didn't bother you too much, and that you will be willing to help again, if I need any in the future :-)

Best regards

Tul02

ASKER

Thank you 'mplungjan' for all your help.

Michel Plungjan

Of course.
Please tell me what is missing so I can fix it. If you need more help than that, my email is in my profile. I'd like to see the end product

Michel Plungjan

Fixed it.

I tried to remove a point that was not there

<html xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
  <title></title>
  <style type="text/css">
    v\:* {behavior:url(#default#VML);}
  </style>
  <script language="JavaScript">
<!-- Original:  CodeLifter.com (support@codelifter.com) -->
<!-- Web Site:  http://www.codelifter.com -->
 
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Modified by mplungjan javascripts(a)plungjan.name to capture click instead -->
 
<!-- Begin
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEDOWN)
document.onmousedown = getMouseXY;
 
var lines = new Array();
var currentLine = 0;
var container;
function crtLine(x,y,id) {
  this.id=id;
  this.x1=x;
  this.y1=y;
  this.x2=0;
  this.y2=0;
}
function addPointDiv(id,x,y) {
  try {
    var point = document.createElement('div');
    point.id = id;
    point.style.position='absolute'; 
    point.style.top = y+'px';
    point.style.left= x+'px';
    point.style.color='red';
    point.innerHTML=id;
    container.appendChild(point);
  }
  catch(e) { alert(e.message)}
 
}
window.onload=function() { 
  container = document.getElementById('canvas')
}
function getMouseXY(e) {
  var tempX = 0;
  var tempY = 0;
  if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft;
    tempY = event.clientY + document.body.scrollTop;
  }
  else {  // grab the x-y pos.s if browser is not IE
    tempX = e.pageX;
    tempY = e.pageY;
  }
  if (tempY > 400) return; // do not capture events when the links are clicked  
  if (tempX < 0){tempX = 0;}
  if (tempY < 0){tempY = 0;}
  if (lines[currentLine]) {
    lines[currentLine].x2=tempX;
    lines[currentLine].y2=tempY;
//    document.getElementById('lineDiv').innerHTML+='<br>'+
//      '<a href="#" onClick="drawArrow(container, \''+lines[currentLine].id +'\','+lines[currentLine].x1+','+lines[currentLine].y1+','+lines[currentLine].x2+','+lines[currentLine].y2+'); return false">Draw '+lines[currentLine].id+'</a>' ;
 
 
    addPointDiv('to_'+lines[currentLine].id,lines[currentLine].x2,lines[currentLine].y2)
    drawArrow(container, lines[currentLine].id ,lines[currentLine].x1,lines[currentLine].y1,lines[currentLine].x2,lines[currentLine].y2);
    currentLine++
  }
  else { 
    lines[currentLine] = new crtLine(tempX,tempY,'line'+currentLine)
    addPointDiv('from_'+lines[currentLine].id,lines[currentLine].x1,lines[currentLine].y1)
  }  
  return true;
}
 
 
  function makeNewPolyLine( pts )
  {
    var line = document.createElement( "v:polyLine" ) ;
    line.points = pts.join( ',' ) ;
    line.style.position = 'absolute' ;
    line.stroked = true ;
    line.filled = true ;
    line.fillcolor = 'black' ;
    return line ;
  }
  
  function drawArrow( container, lineId, x, y, xx, yy )
  {
    try { // only remove if there
      document.getElementById('from_'+lineId).style.display='none'
      document.getElementById('to_'+lineId).style.display='none'
    }
    catch(e) {}      
    var arrowWidth = 10.0 ;
    var theta = 0.423 ;
    var xPoints = [] ;
    var yPoints = []
    var vecLine = [] ;
    var vecLeft = [] ;
    var fLength;
    var th;
    var ta;
    var baseX, baseY ;
 
    xPoints[ 0 ] = xx ;
    yPoints[ 0 ] = yy ;
 
    // build the line vector
    vecLine[ 0 ] = xPoints[ 0 ] - x ;
    vecLine[ 1 ] = yPoints[ 0 ] - y ;
 
    // build the arrow base vector - normal to the line
    vecLeft[ 0 ] = -vecLine[ 1 ] ;
    vecLeft[ 1 ] = vecLine[ 0 ] ;
 
    // setup length parameters
    fLength = Math.sqrt( vecLine[0] * vecLine[0] + vecLine[1] * vecLine[1] ) ;
    th = arrowWidth / ( 2.0 * fLength ) ;
    ta = arrowWidth / ( 2.0 * ( Math.tan( theta ) / 2.0 ) * fLength ) ;
 
    // find the base of the arrow
    baseX = xPoints[ 0 ] - ta * vecLine[0] ;
    baseY = yPoints[ 0 ] - ta * vecLine[1] ;
 
    // build the points on the sides of the arrow
    xPoints[ 1 ] = baseX + th * vecLeft[0] ;
    yPoints[ 1 ] = baseY + th * vecLeft[1] ;
    xPoints[ 2 ] = baseX - th * vecLeft[0] ;
    yPoints[ 2 ] = baseY - th * vecLeft[1] ;
 
    var ptArr = [ x, y, baseX, baseY, xPoints[ 1 ], yPoints[ 1 ], xPoints[ 0 ], yPoints[ 0 ], xPoints[ 2 ], yPoints[ 2 ], baseX, baseY ] ;
    var oldLine = document.getElementById( lineId ) ;
 
    if( oldLine ) // a line with this ID exists, so just change it
    {
      oldLine.points.value = ptArr.join( ',' ) ;  // need to use points.value here for some mental reason ;)
    }
    else // add a new line
    {
      var newLine = makeNewPolyLine( ptArr ) ;
      newLine.setAttribute( "id", lineId ) ;
      container.appendChild( newLine ) ;
    }
  }  
 
  </script>
</head>
<body>
  <div id="canvas" style="width: 600px ; height: 400px"> </div>
  <div id="lineDiv">
  <a href="#" onClick="drawArrow(container, 'lineX' ,300,200,200,150); return false">Draw</a>
  </div>  
</body>
</html>

Open in new window

Tul02

ASKER

Hi Michel,

The code works fine now. Thanks! I have taken note of your email id, and will send you a link of the software I am trying to develop once it is complete.

I will be posting a question pertaining to AJAX/PHP/MySQL to the forum (AJAX and PHP) in a moment. I have a simple guestbook form that has 4 fields (num, name, email, and comments). What I need is in line edit boxes for each of these fields.......which will accept user input (except for 'num' that is auto-generated) and asynchronously display it on the top of the page (before the form fields), where the other entries from the database are already displayed (as soon as the page loads)...............saving a copy, of course, in the backend MySQL database.

I hope you can help me in this one too.

Best regards