Modifying subscribe page

Hi ;

I am trying to edit one of my website page  it's subscribe page .
What I want to do is ;  when someone  fill all the input form data a small popup window show up  in the middle o f the screen contain  his/her  previous entered information  / it's like conformation  page ! /

I used javascript to call popup window but I couldn't Get the passed input values In the popup win !!  I tried  many JS function.

also I want to set a style for the popup window and show organize user information!

you can use the next script to give me some ideas
 
<html>
<head>
<script Language="JavaScript">
function Data(){
win2 = window.open("", "", "width=320, height=200,resizable=0,scrollbars=1,status=0,toolbar=0,top=50,left=50");
win2.document.write("You said: " + document.forms[0].Item1.value);
win2.document.close();
}
</script>
<META NAME="generator" CONTENT="Web Scripting Editor 5.0 (Win32)">
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#0080C0" alink="#FF0000">
<form>
<input type="text" name="Item1" size="20" value="whatever">
<input type="button" value=" Submit! " onClick="Data()"></td> Development 
</form>


</body>
</html> 

Open in new window

uk747Asked:
Who is Participating?
 
Ray PaseurCommented:
Window.open supports the use of a URL.  The URL would be the right place to put the CSS to style the document.
http://www.w3schools.com/jsref/met_win_open.asp

The W3Schools has a pretty nice "play with it" interface for JavaScript.
http://www.w3schools.com/js/tryit.asp?filename=tryjs_openallwindow

Finding the "middle" of the screen is a little more challenging.  You might consider using jQuery where there are plug-ins that can do this for you.

This seems to get the new window into a more "middle" position.  These attributes may be unevenly supported in different browsers.

<?php // RAY_temp_uk747.php
error_reporting(E_ALL);
?>
<html>
<head>
<script Language="JavaScript">
function Data(){
  win2 = window.open
       ( ""
       , ""
       , "width=320,height=200,resizable=0,scrollbars=1,status=0,toolbar=0,top=350,left=350"
       )
       ;
  win2.document.write("You said: " + document.forms[0].Item1.value);
  win2.document.close();
}
</script>
</head>

<body>
<form>
<input type="text" name="Item1" size="20" value="whatever">
<input type="button" value=" Submit! " onClick="Data()"></td> Development
</form>

</body>
</html>

Open in new window

And this seems able to open a new URL in the center of the screen.  That's not the same as the center of the viewport, but it looks OK on my tests.

<?php // RAY_temp_uk747_raj.php
error_reporting(E_ALL);

// SEE http://rajeshstutorials.blogspot.com/2012/04/javascript-to-open-new-popup-window.html

?>

<html>
<head>
<script>
function PopupWindowCenter(URL, title,w,h)
{var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var newWin = window.open (URL, title, 'toolbar=no, location=no,directories=no, status=no, menubar=no, scrollbars=no, resizable=no,copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}
</script>
</head>
<body>
<a href="javascript:void(0);" onClick ="PopupWindowCenter('http://www.example.com', 'PopupWindowCenter',600,700)">Open Center popup Window</a>
</body>
</html>

Open in new window

Overall, given the usefulness of jQuery, I think I would explore a jQuery solution in preference to writing my own in native JavaScript.
http://jqueryui.com/dialog/

HTH, ~Ray
0
 
Ray PaseurCommented:
This is almost an exact copy of what you posted.  It worked perfectly for me in Chrome.

<?php // RAY_temp_uk747.php
error_reporting(E_ALL);
?>
<html>
<head>
<script Language="JavaScript">
function Data(){
  win2 = window.open("", "", "width=320, height=200,resizable=0,scrollbars=1,status=0,toolbar=0,top=50,left=50");
  win2.document.write("You said: " + document.forms[0].Item1.value);
  win2.document.close();
}
</script>
</head>

<body>
<form>
<input type="text" name="Item1" size="20" value="whatever">
<input type="button" value=" Submit! " onClick="Data()"></td> Development
</form>

</body>
</html>

Open in new window

So please explain a little more about what's wrong here?
0
 
uk747Author Commented:
yes it's work ..
but I couldn't make it appear in a middle  of screen  
and couldn't set a style for this popup as you see it's Java-script
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
uk747Author Commented:
it's not necessary to modify the above script
you cant post  another one based on the main Idea ;

    * show popup in the center of screen contain previous input values
    * the ability to set style for this popup
0
 
uk747Author Commented:
Hi;

thank you all for  your response  :) its was useful to center p
but how can I Set a style  for the popup windows  ex (color, background , font ,table ...etc) as you all see :

win2.document.write("You said: " + document.forms[0].Item1.value);

this java-script code get just value without setting any style for the output ...

I was thinking  to add PHP lang to get the previous input with function <?_Get and use java-script only to call the popup win !

the popup contain html script include php script to call the values

I thing this all can be done by setting parent and a child window (02 separate pages ).... but can I make it ?

if you have any other idea please help
0
 
GaryCommented:
Ray has already told you to put the css in the popup page code,
0
 
uk747Author Commented:
thank you ;

see my comment !!
0
 
GaryCommented:
no points for me....
0
 
Ray PaseurCommented:
Please see the grading guidelines here:
http://www.experts-exchange.com/help/viewHelpPage.jsp?helpPageID=26

If you give a B or C grade you're expected to explain what was wrong.

If you want to share points among more than one of the Expert responses, the page that lets you close the question allows you to do this.

What was deficient in the answers?
0
 
uk747Author Commented:
hi;

I give a B because get just 50% of the solution ;

Solution to center a popup win in a middle of screen and  get the previous input with  java-script :

win2.document.write("You said: " + document.forms[0].Item1.value);

Ray give me just an Idea to put CSS in popup page but what I am looking for is one script in ONE PAGE !!

Best Regards
0
 
Michel PlungjanIT ExpertCommented:
win2.document.write("<link rel='stylesheet' href='style.css'/>You said: " + document.forms[0].Item1.value);
win2.document.close();
0
 
Ray PaseurCommented:
...but what I am looking for is one script in ONE PAGE !!
Good grief, hire a professional developer!  We answer questions here, without compensation, and when you have a "want" that is not the same as a "question."  

I want a new Mercedes.  But I will have to pay for it.  A question might be, "How much does a new Mercedes cost?"
0
 
GaryCommented:
You got a solution for centering the popup and how to apply css to the popup.
What more do you want?
0
 
Michel PlungjanIT ExpertCommented:
Welcome to EE UK747

Please be advised that all experts are volunteers and take time out from their busy day job or spend their spare time to try and help you.
A quick read of the help pages will explain more.
The reactions you just got is of course not taking into account that you only just joined and still need to get into how things at EE works.

The grading is not like at school. If you feel the need to give a B or C grade, tell us and explain why so we can possibly improve the answer when we understand you were not able to insert styling on your own, which as you can see from my comment can be done with style sheet or inline styling in the document.write.
0
 
uk747Author Commented:
hi;

I am realy sorry about what i did before ;; cause I am New in EE
and thank you for your advices , thank you all

I will more carefull next time !

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