Go Premium for a chance to win a PS4. Enter to Win

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

Building A URL to pass into a Jquery FancyBox form

Hi

I have a simple form inside a Jquery fancyBox I need to pass a value from a hidden field on the parent page into this form via cgi perl script.

on loading the parent this value is unknown.

on hitting the button how can i grab the contents of this hidden field and build the url to pass into the perl script?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Parent</title>
   
	<title>FancyBox 1.3.1 | Demonstration</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="Fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
	<script type="text/javascript" src="Fancybox/jquery.fancybox-1.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="Fancybox/jquery.fancybox-1.3.1.css" media="screen" />
 	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript">
		$(document).ready(function() {
      $var Txt  = $("#HiddenText").value; 
			$("#button").fancybox({
				'width'				: '75%',
				'height'			: '75%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe',
                                 'url'         : 'cgi-bin/form.pl?$HiddenText=' +Txt
			});
      
      })
  </script>
  </head>
  <body>
        <input type="text" id="HiddenText" value="I'm Hidding">
        <input type="button" value ="press Me" id="button">
  </body>
</html>

Open in new window

0
trevor1940
Asked:
trevor1940
  • 6
  • 6
1 Solution
 
ansudhindraCommented:
change the line (above code) from
'url'         : 'cgi-bin/form.pl?$HiddenText=' +Txt

to

'url'         : 'cgi-bin/form.pl?HiddenText=' +encodeURI(Txt);
0
 
Chris StanyonCommented:
Change line 16 to the following
var Txt  = $("#HiddenText").val();

Open in new window


You'll probably need to change your url value as ansudhindra has already pointed out.
0
 
trevor1940Author Commented:
Hi

I chancged the line
 'url'         : 'cgi-bin/form.pl?$HiddenText=' +Txt
to

 'href'         : 'cgi-bin/form.pl?$HiddenText=' + encodeURI(Txt);

and the form.pl scipt loads & the value in Txt is passed

if i don't hard code a value in HiddenText but in generated by user interaction no value is passed
0
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!

 
Chris StanyonCommented:
Your Txt variable is being set when your page loads, so it loads the value that is in the HTML when the page loads. You need to move this so that it is called when you open the dialog. The fancybox script has an option called onStart to run code before the fancybox is loaded.

Try this:
$(document).ready(function() {

var Txt; 
$("#button").fancybox({
	'onStart' : function(){
		Txt = $("#HiddenText").val();
	},
	'width' : '75%',
	'height' : '75%',
	'autoScale' : false,
	'transitionIn' : 'none',
	'transitionOut' : 'none',
	'type' : 'iframe',
        'href' : 'cgi-bin/form.pl?$HiddenText=' + encodeURI(Txt)
});
      
})

Open in new window

0
 
trevor1940Author Commented:
Hi

at the moment all my Form.pl is doing is looping though $cgi->params and priniting the name & value pair

when it gets to HiddenText the value is undefined

sugesting the value of HiddenText is not being fetched after the button is pressed.
0
 
Chris StanyonCommented:
The javascript part of the code looks right, but I don't know about your perl script. Are you sure you need the $ in front of the variable key

'href' : 'cgi-bin/form.pl?HiddenText=' + encodeURI(Txt)

Open in new window


Throw in an alert statement, to make sure the script is picking up the value.

Change the onStart function to this
'onStart' : function(){
		Txt = $("#HiddenText").val();
                alert(Txt);
	},

Open in new window

0
 
trevor1940Author Commented:
Hi

No i don't need the $ in front of the variable key it was a typo

I have put the alert in but this isn't fireing

i've also put breakpoints in using firebug and they are not stopping either

as for the perl script all it is doing is taking what ever is sent via cgi and prining it

so if the href was cgi-bin/form.pl?HiddenText=i'm Hidding&MyVar=hello

then the perl script will print

name = HiddenText [i'm Hidding]
name = MyVar [hello]

what i'm  getting is

name = HiddenText [undefined]
name = MyVar [hello]
0
 
Chris StanyonCommented:
Post your full javascript function. The code I've posted works, so maybe you've still got typos somewhere
0
 
trevor1940Author Commented:
Hi

i put a firebug watch on the href line this stops when the page is loaded and HiddenText is empty

Type a value in the input box (IN reality this is generated by javascript)

hit the press Me button

the firbug watch dose not stop at the href line

at no point dose alert(Txt); come up.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Parent</title>
   
	<title>FancyBox 1.3.1 | Demonstration</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="Fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
	<script type="text/javascript" src="Fancybox/jquery.fancybox-1.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="Fancybox/jquery.fancybox-1.3.1.css" media="screen" />
 	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript">
$(document).ready(function() {

var Txt; 
$("#button").fancybox({
	'onStart' : function(){
		Txt = $("#HiddenText").val();
                alert(Txt);
	},
	'width' : '75%',
	'height' : '75%',
	'autoScale' : false,
	'transitionIn' : 'none',
	'transitionOut' : 'none',
	'type' : 'iframe',
        'href' : 'cgi-bin/form.pl?HiddenText=' + encodeURI(Txt)
});
      
})
  </script>
  </head>
  <body>
        <input type="text" id="HiddenText">
        <input type="button" value ="press Me" id="button">
  </body>
</html>

Open in new window

0
 
Chris StanyonCommented:
Ok.

Had a look at this and you need to set your href in the onStart function. Then your variable will be set each time you click the button, and be passed to your script.

Try this code - I've moved the href option inside of the onStart function.
$(document).ready(function() {
	$("#button").fancybox({
		'onStart' : function(){
			Txt = $("#HiddenText").val();
			return { href : 'cgi-bin/form.pl?HiddenText=' + encodeURI(Txt) }
		},
		'width' : '75%',
		'height' : '75%',
		'autoScale' : false,
		'transitionIn' : 'none',
		'transitionOut' : 'none',
		'type' : 'iframe'
	});
});

Open in new window


Tested it and it works fine :)
0
 
trevor1940Author Commented:
changed code

Type a value in the input box
hit the press Me button
Rusult inside the FancyBox

Not Found

the requested URL /[object HTMLInputElement] was not found on this server.

typing this into address bar cgi-bin/form.pl?HiddenText=i'm Hidding&MyVar=hello

loads form.pl and prints
name = HiddenText [i'm Hidding]<br />name = MyVar [hello]
0
 
Chris StanyonCommented:
Don't really know what else to suggest.

I've tested the code against jQuery version 1.7.1 and fancyBox version 1.3.4 and it all works well.
0
 
trevor1940Author Commented:
Success!

I managed to get this working at home using the versions you suggested

Here's the code if you or anyone else is interested
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Parent</title>
   
	<title>FancyBox 1.3.1 | Demonstration</title>
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
	<script type="text/javascript" src="fancybox/jquery-1.4.3.min.js"></script>
	<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>
	<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
 	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript">
    $(document).ready(function() {
    	$("#button").fancybox({
    		'onStart' : function(){
    			Txt = $("#HiddenText").val();
    			return { href : 'cgi-bin/form.pl?HiddenText=' + encodeURI(Txt) + '&Switch=A' }
    		},
    		'width' : '75%',
    		'height' : '75%',
    		'autoScale' : false,
    		'transitionIn' : 'none',
    		'transitionOut' : 'none',
    		'type' : 'iframe'
    	});
    });
                                                
  </script>
  </head>
  <body>
        <input type="text" id="HiddenText">
        <input type="button" value ="press Me" id="button">
  </body>
</html>
          

Open in new window


form.pl  NOTE: the Shebang (First line) may need altering as per perl installation and platform
#!C:/Perl64/bin/perl.exe
print "Content-type:text/html\n\n";

use CGI;
 my $q = CGI->new;
my $HiddenText = $q->param('HiddenText');

my @Names = $q->param;

print <<HTML;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>FancyBoxForm</title>
  </head>
  <body>
  <h1>Holly Gibbons</h1>
HTML

foreach my $name (@Names)
  {
    print "<p>" . $name . "[ " . $q->param($name) . "]</p>";  
    
  }
print <<HTML;

  </body>
</html>


HTML

Open in new window

0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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