Deprecated: Function set_magic_quotes_runtime() is deprecated in /home4/mfoster/public_html/cb/forums/include/common.php on line 62

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 31

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 32

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 33

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 34
Cross-Browser.com / passing variables from rubber band box to server cgi

Cross-Browser.com

X Library Forums

You are not logged in.

Announcement

New user registration is currently disabled.

#1 March 11, 2010 4:49:52 pm

cfowler
New Member
Registered: March 11, 2010
Posts: 3

passing variables from rubber band box to server cgi

I have implemented the rubberbandbox javascript in a web page and it works great.
But I cannot figure out how to submit the x1,x2,y1,y2 variables to the server cgi script.
When I submit (using form method=post) I can pass other variables from radio buttons, etc.
A simple sample of my webpageis at http://polarbear.colorado.edu/test_box.html
This is my first week of trying to use javascript, so I know I'm missing something simple.
Thank you for any help, it will be greatly appreciated.

Offline

 

#2 March 11, 2010 8:55:28 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: passing variables from rubber band box to server cgi

Hi cfowler, Welcome to the forums!

Great work. Lemme make just a few suggestions...

1. Move the script element (now in the body) into the head element.

2. Now for the form, which is still in the body, note 3 things: I added an id to the form; I added some hidden elements; and the img doesn't have to go in the form - it can if you want, but it doesn't matter.

<img id='rbbImg1' class='ViewerImg' src='age2010_08.gif' />
<form id='rbbForm1' action="http://polarbear.colorado.edu/cgi-bin/test_input.pl" method="post">
  <input type="submit" value="Submit" class="greenlight" />
  <input id='rbbx1' name='rbbx1' type='hidden' />
  <input id='rbby1' name='rbby1' type='hidden' />
  <input id='rbbx2' name='rbbx2' type='hidden' />
  <input id='rbby2' name='rbby2' type='hidden' />
</form>



2. You already have some global variables ready to hold the rbb coordinates - great. Let's say you have them initialized to zero.

var x1 = 0, y1 = 0, x2 = 0, y2 = 0;



3. Let's look at your drag onend listener. This is where we want to assign the rbb coords to the global variables. But note that the function parameters have the same names as the global variables. We'll need to change them so we can access the global vars (use any names you want).

function rbbOnEnd(w, h, x, y, a, b)
{
  x1 = x;
  y1 = y;
  x2 = a;
  y2 = b;
}



4. Now, in the script element, let's register an onsubmit listener for the form, in the onload listener.

xAddEventListener(window, 'load',
  function () {
    RubberBandBox('rbbImg1', rbbOnEnd);
    xGetElementById('rbbForm1').onsubmit = rbbOnSubmit;
  }, false
);



5. Now implement the onsubmit listener for the form. We assign the rbb coords to the hidden elements, then allow the form to submit.

function rbbOnSubmit() {
  xGetElementById('rbbx1').value = x1;
  xGetElementById('rbby1').value = y1;
  xGetElementById('rbbx2').value = x2;
  xGetElementById('rbby2').value = y2;
  return true; // submit form (return false to cancel it)
}




Well, cfowler, there's a hundred different ways to skin a cat, so the above is just one way of doing this - but I hope it helps you out.

All the best!

Offline

 

#3 March 11, 2010 9:01:38 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: passing variables from rubber band box to server cgi

Oh, btw...

In rbbOnSubmit you could add some checks. A simple example...

function rbbOnSubmit() {
  if ((!x1 && !y1 && !x2 && !y2) || (x1 == x2 && y1 == y2)) {
    alert('You don't have anything selected');
    return false; // cancel submit
  }
  xGetElementById('rbbx1').value = x1;
  xGetElementById('rbby1').value = y1;
  xGetElementById('rbbx2').value = x2;
  xGetElementById('rbby2').value = y2;
  return true; // submit form
}

Offline

 

#4 March 14, 2010 11:30:17 pm

cfowler
New Member
Registered: March 11, 2010
Posts: 3

Re: passing variables from rubber band box to server cgi

Mike,

Thank you.  Everything works fine.  Unfortunately, I don't understand how it works.  At what point do the functions actually put the transparent box on the image?
I had hoped to figure that out because I also want to do one more thing to the image.  Depending upon the state of a radio button
<input type="radio" name="choice" value="1"/>
I either want to do the rubberbandbox or place a starting point marker on the image.
This is my semi-finished web page:  http://polarbear.colorado.edu/track_test.html
So the question:  Can a marker be put on the image along with the transparent box?

Thanks again

Offline

 

#5 March 15, 2010 6:22:50 pm

krumpet
Member
Registered: January 24, 2010
Posts: 19
Website

Re: passing variables from rubber band box to server cgi

Unfortunately the link to ( track_test.html ) doesn't work sad

Offline

 

#6 March 15, 2010 6:43:44 pm

cfowler
New Member
Registered: March 11, 2010
Posts: 3

Re: passing variables from rubber band box to server cgi

Oops. Sorry.   I just moved the file a couple of hours ago.
http://polarbear.colorado.edu/IceTracking.html

Offline

 

#7 March 16, 2010 3:00:55 am

krumpet
Member
Registered: January 24, 2010
Posts: 19
Website

Re: passing variables from rubber band box to server cgi

One possibility would be to have an image of a marker off the map and invite the the user to drag it to the map if she wants to set a marker.  You could use xEnableDrag for this.

If the user drags the marker off the map it goes back to its home position when it is released, perhaps using xSlideTo?

This way the marker collects the click before it gets to the map so dragging will not start the selection. Make sure the z-index of the marker is greater than that of the map.

Good app smile  I hope you post a link in the X Showcase forum when its finished, so we can see the results.

Offline

 

#8 March 17, 2010 11:20:53 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: passing variables from rubber band box to server cgi

krumpet, thanks very much for jumping in here. I've been swamped with work - and on top of that... email problems. I've had it with Charter so I finally moved my pop accounts to my host: HostGator. The support staff at HostGator rocks! smile

Offline

 

Board footer

Powered by PunBB 1.2.15
Copyright © 2002–2005 Rickard Andersson

Expand Restore Select Format Eval Load