Start Free Trial

asked on

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 ?

Hi
you can use jquery window pop up
few examples are given in below link

http://rip747.github.com/popupwindow/

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

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..

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

ASKER

Hi!

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

if you want to use it in php files you will have to use ajax, http://articles.sitepoint.com/article/ajax-jquery

Good luck!

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...

ASKER

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

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&[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

ASKER

Hi!

Tryed this now, but cant get this to work ?

<a href="/tjen-penger/?preset=russ&[husk_postnr2]"></a>
<div class="knapp" style="float: left;">
<h4><a href="/tjen-penger/?preset=russ&[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>

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

ASKER

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>

in Firefox, check the Error console

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.

ASKER

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 ???

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

ASKER

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

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

<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 &&

ASKER

Hi!

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

Maby thats why it dosent work ?

while looking at your website i saw some errors, try to debug your site with firebug.

ASKER

Tryed your code with : //<![CDATA[
But still dosent work ?

Going crazy soon

Wordpress does have a header tag, but it is in the header.php file in your current theme's directory.

ASKER

Hi!

Have firebug, but how do i debug using firebug ?

open firebug and reload your page, click console->error and behold :)
try to understand the errors and see where you they are.

ASKER

Hi!

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

Must i put script in header.php file ?

ASKER

Hi!

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

Strange ?

ASKER

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 ?

with ajax if you want to send it to a php file.

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.

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

Thanks for BIG help

No problem, good luck with your website.