Solved

Make a popupform, and ask for a value..

Posted on 2011-02-16
33
838 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 15
  • 13
  • 4
  • +1
33 Comments
 
LVL 5

Expert Comment

by:soujanya_g
ID: 34904656
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
ID: 34905018
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
ID: 34905102
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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
LVL 14

Expert Comment

by:dejaanbu
ID: 34905128
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
ID: 34905461
Hi!

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

Expert Comment

by:andreizz
ID: 34905702
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
ID: 34905731
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
ID: 34905817
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
ID: 34906349
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
ID: 34906558
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
ID: 34910810
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
ID: 34914042
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
ID: 34914245
in Firefox, check the Error console
0
 
LVL 4

Expert Comment

by:andreizz
ID: 34914547

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
ID: 34917614
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
 
LVL 4

Expert Comment

by:andreizz
ID: 34919309
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
 
LVL 2

Author Comment

by:team2005
ID: 34920649
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
ID: 34920852
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
ID: 34920926
<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
ID: 34920929
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
ID: 34920956
while looking at your website i saw some errors, try to debug your site with firebug.
0
 
LVL 2

Author Comment

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

Going crazy soon
0
 
LVL 4

Expert Comment

by:andreizz
ID: 34920981
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
ID: 34920985
Hi!

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

Expert Comment

by:andreizz
ID: 34921035
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
ID: 34921164
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
ID: 34921232
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
ID: 34921434
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
ID: 34921528
with ajax if you want to send it to a php file.
0
 
LVL 4

Expert Comment

by:andreizz
ID: 34921608
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
ID: 34921794
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
ID: 34923857
Thanks for BIG help
0
 
LVL 4

Expert Comment

by:andreizz
ID: 34923927
No problem, good luck with your website.
0

Featured Post

Independent Software Vendors: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
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…

729 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