Solved

Modifying subscribe page

Posted on 2013-06-10
16
197 Views
Last Modified: 2013-06-14
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

0
Comment
Question by:uk747
  • 6
  • 4
  • 4
  • +1
16 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
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
 

Author Comment

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

Author Comment

by:uk747
Comment Utility
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
 
LVL 108

Accepted Solution

by:
Ray Paseur earned 500 total points
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
0
 

Author Comment

by:uk747
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Ray has already told you to put the css in the popup page code,
0
 

Author Closing Comment

by:uk747
Comment Utility
thank you ;

see my comment !!
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 58

Expert Comment

by:Gary
Comment Utility
no points for me....
0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
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
 

Author Comment

by:uk747
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
win2.document.write("<link rel='stylesheet' href='style.css'/>You said: " + document.forms[0].Item1.value);
win2.document.close();
0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
...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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
You got a solution for centering the popup and how to apply css to the popup.
What more do you want?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 

Author Comment

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

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

763 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

7 Experts available now in Live!

Get 1:1 Help Now