Make a popupform, and ask for a value..

Hi!

Have a webpage that contains of
5 pictures. When a user click a picture, i want to
have a popupwindow. thata contain of textfiled asking for a value..
User must enter a value to the textbox in the popupwindow and hit a button
before it call the href.... The value must be stored, so it can be used on other places
on the webpage.

How can i do that ?
LVL 2
team2005Asked:
Who is Participating?
 
andreizzConnect With a Mentor Commented:
Got a solution for you i think, here the code below, i will do some explaining after it.
<html>
<head>
   <script type="text/javascript">
   //<![CDATA[
    function showPrompt(href){
		husk_postnr2=prompt("Legg inn postnummer","");
		if (husk_postnr2!=null && husk_postnr2!=""){
			window.location=href+"&husk_postnr2="+husk_postnr2;
		}
    }
	//]]>
</script>
</head>
<body>
	<div class="knapp" style="float: left;">
		<h4>
			<div style="cursor: pointer" title="http://dugnaden.no/tjen-penger/?preset=russ" onclick="showPrompt(this.title)">
				<img title="russ"  src="http://dugnaden.no/wp-content/uploads/2009/10/russ.png" alt="russ" width="90" height="50" />
			</div>
		</h4>
	</div>
</body>
</html>

Open in new window


Instead of using a <a> tag we use a <div> tag that acts like a <a> (it's easier to customize). Say you want to send the data from the prompt to the url "http://dugnaden.no/tjen-penger/?preset=russ" so we add this to the title attribute on the div. Onclick event will send to the showPromt function as a parameter the url from title. In the showPrompt function we will execute the prompt to get the data, if the data is entered we will send the user to http://dugnaden.no/tjen-penger/?preset=russ&husk_postnr2=whatever_data_was_entered  and then from that php file you can process the $_GET array and display, store, whatever the data entered.

If i was not clear enough please reply.

Good luck!
0
 
soujanya_gCommented:
Hi
you can use jquery window pop up
few examples are given in below link

http://rip747.github.com/popupwindow/
0
 
andreizzCommented:
The code below uses javascript, when you click on the image it will display a promt to enter a value, if the value is entered it will continue with the link, otherwise nothing will be done.
/*insert the store script, use what you want*/ replace this with whatever you want for storing the text.

<html>
<head>
    <script type="text/javascript">
    var showPrompt = function(){
		var name=prompt("Please enter your name","Harry Potter");
		if (name!=null && name!=""){
			/*insert the store script, use what you want*/
			return true;
		}
        return false;
    }
    </script>
</head>
<body>
	<a href="http://www.google.com" onclick="return showPrompt();">
		<img src="http://www.google.ro/intl/en_com/images/srpr/logo1w.png" alt="this is a image" />
	</a>
</body>
</html>

Open in new window

0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
dejaanbuCommented:
IF you want to have higher user interaction with good design, then go for jquery popup window
try out a demo here:
http://trentrichardson.com/Impromptu/index.php

in the same page, they have code samples for various options.
in ur case, Example9... i think so..

0
 
dejaanbuCommented:
Hai you can use the following also,


http://jqueryui.com/demos/dialog/#modal-form

Best one , it has validations. also. click the view source link to the source code
0
 
team2005Author Commented:
Hi!

Need to store the value to, to use on webpages
Session variabel ?
0
 
andreizzCommented:
if you want to use it in php files you will have to use ajax, http://articles.sitepoint.com/article/ajax-jquery

Good luck!
0
 
dejaanbuCommented:
Hi,

If u can post the values to server by redirecting....

you can redirect the page then, and you can do whatever stuffs. look at the sample code on the second answer. there they might be added some rows client side.... there you have to set a window.location  with the given value as query parameter...

0
 
team2005Author Commented:
Hi!

Cant get this to work, i am using html-page
(wordpress CMS-system)


The popup dosent show up ?
<script type="text/javascript">
    var showPrompt = function(){
		husk_postnr2=prompt("Legg inn postnummer","Postnummer");
		if (husk_postnr2!=null && husk_postnr2!=""){
			/*insert the store script, use what you want*/
			return true;
		}
        return false;
    }
</script>
<h2>Hvem er dere?</h2>
<a href="/tjen-penger/?preset=klasse&amp;[husk_postnr2]" onclick="return showPrompt();"></a>
<div class="knapp" style="float: left;">
<h4><a onclick="return showPrompt();" href="/tjen-penger/?preset=klasse&amp;[husk_postnr2]"><img title="klasse" src="http://dugnaden.no/wp-content/uploads/2009/10/klasse.png" alt="klasse" width="90" height="50" />

Open in new window

0
 
andreizzCommented:
You didn't close the <a> tag, place a </a> after the < img /> tag and also the link supplied in the href attribute is invalid.

/tjen-penger/?preset=klasse&amp;[husk_postnr2]  this is not a valid url
if u replace that with say http://www.google.com it will work so the problem is with your faulted url
0
 
team2005Author Commented:
Hi!

Tryed this now, but cant get this to work ?

<a href="/tjen-penger/?preset=russ&amp;[husk_postnr2]"></a>
<div class="knapp" style="float: left;">
<h4><a href="/tjen-penger/?preset=russ&amp;[husk_postnr2]"><img title="russ" src="http://dugnaden.no/wp-content/uploads/2009/10/russ.png" alt="russ" width="90" height="50" / onclick="return showPrompt();">
Russ</a></h4>



0
 
andreizzCommented:
The onlick attribute must be placed on a <a> element or else it won't go anywhere. You are still using the same faulty url, below in the code put a valid url where it says INSERT HERE A GOOD LINK. The url u gave contains [husk_postnr2] this is not a valid thing to be in url, just look at other websites you won't see such a thing.

Another thing is that you didn't close the div element. I've corrected it all you have to do is to put a good web adress in the href attribute, try placing there http://google.com to see what happens.

Good luck!

<html>
<head>
   <script type="text/javascript">
    var showPrompt = function(){
		husk_postnr2=prompt("Legg inn postnummer","");
		if (husk_postnr2!=null && husk_postnr2!=""){
			/*insert the store script, use what you want*/
			return true;
		}
        return false;
    }
</script>
</head>
<body>
	<a href="/tjen-penger/?preset=russ&amp;[husk_postnr2]">old link</a>
	<div class="knapp" style="float: left;">
		<h4>
			<a href="INSERT HERE A GOOD LINK!" onclick="return showPrompt();">
				<img title="russ" src="http://dugnaden.no/wp-content/uploads/2009/10/russ.png" alt="russ" width="90" height="50"  />
				Russ
			</a>
		</h4>
	</div>
</body>
</html>

Open in new window

0
 
team2005Author Commented:
Hi!'

I have this code now, but still dosent work ?

<div class="knapp" style="float: left;">
<h4><a href="/tjen-penger/?preset=russ&amp" onclick="return showPrompt();"><img title="russ" src="http://dugnaden.no/wp-content/uploads/2009/10/russ.png" alt="russ" width="90" height="50" />
Russ</a></h4></div>

0
 
dejaanbuCommented:
in Firefox, check the Error console
0
 
andreizzCommented:

team2005:
Hi!'

I have this code now, but still dosent work ?

<div class="knapp" style="float: left;">
<h4><a href="/tjen-penger/?preset=russ&amp" onclick="return showPrompt();"><img title="russ" src="http://dugnaden.no/wp-content/uploads/2009/10/russ.png" alt="russ" width="90" height="50" />
Russ</a></h4></div>

The href attribute should have something like this: http://www.mysite.com/tjen-penger/?preset=russ
Replace the first part with you website's adress.
0
 
team2005Author Commented:
Hi!

Now i have this:
<div class="knapp" style="float: left;">
<h4><a href="http://dugnaden.no/tjen-penger/?preset=russ&" onclick="return showPrompt();"><img title="russ" src="http://dugnaden.no/wp-content/uploads/2009/10/russ.png" alt="russ" width="90" height="50" />
Russ</a></h4></div>

But still dosent work ???

0
 
andreizzCommented:
The code that you posted works when i try it, look at the code below it's the exact same as yours and it works.

When i say it works i mean that when you click on the link(the image) you get a promt asking you for some data(i don't understand your language :P) and if you enter something it continues to go to the web adress specified in the href attributes. If you don't enter anything or press cancel it stays on the same page.

This is what the code below should do, and it does that.

Could you explain what exactly you want to achieve and how it doesn't work?

<html>
<head>
   <script type="text/javascript">
    var showPrompt = function(){
		husk_postnr2=prompt("Legg inn postnummer","");
		if (husk_postnr2!=null && husk_postnr2!=""){
			/*insert the store script, use what you want*/
			return true;
		}
        return false;
    }
</script>
</head>
<body>
	<div class="knapp" style="float: left;">
		<h4>
			<a href="http://dugnaden.no/tjen-penger/?preset=russ" onclick="return showPrompt();">
				<img title="russ" src="http://dugnaden.no/wp-content/uploads/2009/10/russ.png" alt="russ" width="90" height="50" />
				Russ
			</a>
		</h4>
	</div>
</body>
</html>

Open in new window

0
 
team2005Author Commented:
Hi!

Wat i want is that the user must enter a
value, before it execute the http...

And it must store the value, for use on other pages..

Example:

If user enter 3100 in the textfield, it must store this value in a variabel
to be used later...

If you try to click on picture number 2 from left side..
You can see that it dosent work ?

http://www.dugnaden.no

0
 
andreizzCommented:
place the code below in the head tag, and remove it form the body tag
<script type="text/javascript">
    var showPrompt = function(){
		husk_postnr2=prompt("Legg inn postnummer","");
		if (husk_postnr2!=null && husk_postnr2!=""){
			/*insert the store script, use what you want*/
			return true;
		}
        return false;
    }
</script>>

Open in new window

0
 
andreizzCommented:
<script type="text/javascript">
//<![CDATA[
    var showPrompt = function(){
		husk_postnr2=prompt("Legg inn postnummer","");
		if (husk_postnr2!=null && husk_postnr2!=""){
			/*insert the store script, use what you want*/
			return true;
		}
        return false;
    }
//]]>
</script>

Open in new window


i added the cdata line to escape the script from parsing, because in you page the && characters are transformed in &#038;&#038;
0
 
team2005Author Commented:
Hi!

I am using wordpress CMS system.
So i dont have head tag or body tag...

Maby thats why it dosent work ?

0
 
andreizzCommented:
while looking at your website i saw some errors, try to debug your site with firebug.
0
 
team2005Author Commented:
Tryed your code with : //<![CDATA[
But still dosent work ?

Going crazy soon
0
 
andreizzCommented:
Wordpress does have a header tag, but it is in the header.php file in your current theme's directory.
0
 
team2005Author Commented:
Hi!

Have firebug, but how do i debug using firebug ?
0
 
andreizzCommented:
open firebug and reload your page, click console->error and behold :)
try to understand the errors and see where you they are.
0
 
team2005Author Commented:
Hi!

Get 1 error:
Operation is not supported" code: "9

Must i put script in header.php file ?
0
 
team2005Author Commented:
Hi!

Get error on this line in script to
if (husk_postnr2!=null &#038;&#038; husk_postnr2!=""){

Strange ?
0
 
team2005Author Commented:
Hi!

Working now, with this script:

<script type="text/javascript">
//<![CDATA[
    var showPrompt = function(){
            var husk_postnr2=prompt("Legg inn postnummer","Postnummer");
            if (husk_postnr2!=""){
                  /*insert the store script, use what you want*/
                  return true;
            }
        return false;
    }
//]]>
</script>

But variable husk_postnr2 must be stored as global variabel..
How to do that ?
0
 
andreizzCommented:
with ajax if you want to send it to a php file.
0
 
andreizzCommented:
or you could do something like this http://www.webcheatsheet.com/PHP/passing_javascript_variables_php.php but this refreshes the page.

with ajax you get no refresh.
0
 
team2005Author Commented:
Thanks for BIG help
0
 
andreizzCommented:
No problem, good luck with your website.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.