Solved

Building A URL to pass into a Jquery FancyBox form

Posted on 2012-03-19
13
1,230 Views
Last Modified: 2012-06-22
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
Comment
Question by:trevor1940
  • 6
  • 6
13 Comments
 
LVL 13

Expert Comment

by:ansudhindra
ID: 37741609
change the line (above code) from
'url'         : 'cgi-bin/form.pl?$HiddenText=' +Txt

to

'url'         : 'cgi-bin/form.pl?HiddenText=' +encodeURI(Txt);
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 37741645
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
 
LVL 1

Author Comment

by:trevor1940
ID: 37742335
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
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 37742448
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
 
LVL 1

Author Comment

by:trevor1940
ID: 37742782
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
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 37742889
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 1

Author Comment

by:trevor1940
ID: 37743024
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
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 37743147
Post your full javascript function. The code I've posted works, so maybe you've still got typos somewhere
0
 
LVL 1

Author Comment

by:trevor1940
ID: 37746186
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
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 37746824
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
 
LVL 1

Author Comment

by:trevor1940
ID: 37747330
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
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 37747444
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
 
LVL 1

Author Comment

by:trevor1940
ID: 37762633
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now