Solved

Make a popupform, and ask for a value..

Posted on 2011-02-16
33
833 Views
Last Modified: 2012-05-11
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 ?
0
Comment
Question by:team2005
  • 15
  • 13
  • 4
  • +1
33 Comments
 
LVL 5

Expert Comment

by:soujanya_g
Comment Utility
Hi
you can use jquery window pop up
few examples are given in below link

http://rip747.github.com/popupwindow/
0
 
LVL 4

Expert Comment

by:andreizz
Comment Utility
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
 
LVL 14

Expert Comment

by:dejaanbu
Comment Utility
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
 
LVL 14

Expert Comment

by:dejaanbu
Comment Utility
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
 
LVL 2

Author Comment

by:team2005
Comment Utility
Hi!

Need to store the value to, to use on webpages
Session variabel ?
0
 
LVL 4

Expert Comment

by:andreizz
Comment Utility
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
 
LVL 14

Expert Comment

by:dejaanbu
Comment Utility
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
 
LVL 2

Author Comment

by:team2005
Comment Utility
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
 
LVL 4

Expert Comment

by:andreizz
Comment Utility
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
 
LVL 2

Author Comment

by:team2005
Comment Utility
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
 
LVL 4

Expert Comment

by:andreizz
Comment Utility
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
 
LVL 2

Author Comment

by:team2005
Comment Utility
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
 
LVL 14

Expert Comment

by:dejaanbu
Comment Utility
in Firefox, check the Error console
0
 
LVL 4

Expert Comment

by:andreizz
Comment Utility

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
 
LVL 2

Author Comment

by:team2005
Comment Utility
Hi!

Now i have this:
<div class="knapp" style="float: left;">
<h4><a href="http://dugnaden.no/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>

But still dosent work ???

0
 
LVL 4

Expert Comment

by:andreizz
Comment Utility
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
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.

 
LVL 2

Author Comment

by:team2005
Comment Utility
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
 
LVL 4

Expert Comment

by:andreizz
Comment Utility
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
 
LVL 4

Expert Comment

by:andreizz
Comment Utility
<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
 
LVL 2

Author Comment

by:team2005
Comment Utility
Hi!

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

Maby thats why it dosent work ?

0
 
LVL 4

Expert Comment

by:andreizz
Comment Utility
while looking at your website i saw some errors, try to debug your site with firebug.
0
 
LVL 2

Author Comment

by:team2005
Comment Utility
Tryed your code with : //<![CDATA[
But still dosent work ?

Going crazy soon
0
 
LVL 4

Expert Comment

by:andreizz
Comment Utility
Wordpress does have a header tag, but it is in the header.php file in your current theme's directory.
0
 
LVL 2

Author Comment

by:team2005
Comment Utility
Hi!

Have firebug, but how do i debug using firebug ?
0
 
LVL 4

Expert Comment

by:andreizz
Comment Utility
open firebug and reload your page, click console->error and behold :)
try to understand the errors and see where you they are.
0
 
LVL 2

Author Comment

by:team2005
Comment Utility
Hi!

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

Must i put script in header.php file ?
0
 
LVL 2

Author Comment

by:team2005
Comment Utility
Hi!

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

Strange ?
0
 
LVL 2

Author Comment

by:team2005
Comment Utility
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
 
LVL 4

Expert Comment

by:andreizz
Comment Utility
with ajax if you want to send it to a php file.
0
 
LVL 4

Expert Comment

by:andreizz
Comment Utility
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
 
LVL 4

Accepted Solution

by:
andreizz earned 500 total points
Comment Utility
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
 
LVL 2

Author Closing Comment

by:team2005
Comment Utility
Thanks for BIG help
0
 
LVL 4

Expert Comment

by:andreizz
Comment Utility
No problem, good luck with your website.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Align a <div> to a table row 3 38
css, html 6 29
Login area of a page 4 19
Bootstrap 3 icons 3 4
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

744 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

15 Experts available now in Live!

Get 1:1 Help Now