|
HTML - Creating A Form - Help Me Please!!! :)
please help me everyone
i need a form with: radio buttons - where you can only choose one option some options and a submit button, i can edit it to how i want it. just put 'example' or something where i should put things. Thank you everyone in advance. I would be very greatful. yrag_football@yahoo.co.uk Similar TutorialsHow I can do designed polls by myself? For example like in this site: http://easy.pro-gaming.co.il/m/inc_form.php thanks to the helpers Hello all. I am new to this forum and really need some help creating a form. I am trying to help a friend out for a Charity Golf Tournament. I have some of the code completed already and cant figure out a few things. Basically the form I have created already has a drop down box for Golfers 1-4. I need help creating the rest of the form so when a person selects (from the drop down) either 1,2,3,or 4, then the form will display golfer information fields such as Golfer Name, Address, Email, Phone # only for the amount of golfers selected. ( I need the golfer information piece to be dependant on how many golfers are selected, etc) any help would be greatly appreciated. Here is the HTML code I have so far. (this is very basic) Here is what trhe current code produces: And here is the code: <th colspan="2" scope="row"> <table width="80%" border="0" cellspacing="0" cellpadding="5"> <tr> <th colspan="2" bgcolor="#3a4876" scope="row">This will be the Golf 2009 Page........ =)<p align="left"> <tr><td width="50%" valign="center"> <font face="helvetica,arial" size="" color="black"> 1. Number of Golfers</td><td width="50%" valign="center"> <Select NAME="#3a4876"> <Option Value="1">1 <Option Value="2">2 <Option Value="3">3 <Option Value="4">4 </Select> </td> </tr> <tr><td width="50%" valign="center"> <font face="helvetica,arial" size="" color="black"> 2. Golfer Name 1</td><td width="50%" valign="center"> <INPUT TYPE="text" NAME="f3002" maxlength="255" value="" size="20"> </td> </tr> <tr><td width="50%" valign="center"> <font face="helvetica,arial" size="" color="black"> 3. Golfer Name 2</td><td width="50%" valign="center"> <INPUT TYPE="text" NAME="f3003" maxlength="255" value="" size="20"> </td> </tr> <tr><td width="50%" valign="center"> <font face="helvetica,arial" size="" color="black"> 4. Golfer Name 3</td><td width="50%" valign="center"> <INPUT TYPE="text" NAME="f3004" maxlength="255" value="" size="20"> </td> </tr> <tr><td width="50%" valign="center"> <font face="helvetica,arial" size="" color="black"> 5. Golfer Name 4</td><td width="50%" valign="center"> <INPUT TYPE="text" NAME="f3005" maxlength="255" value="" size="20"> </td> </tr> <tr><td width="50%" valign="center"> <font face="helvetica,arial" size="" color="black"> 6. Shirt Size</td><td width="50%" valign="center"> <Select NAME="f3006"> <Option Value="S">S <Option Value="M">M <Option Value="L">L <Option Value="XL">XL <Option Value="XXL">XXL </Select> </td> </tr> <tr><td width="50%" valign="center"> <font face="helvetica,arial" size="" color="black"> 7. Golfer Address</td><td width="50%" valign="center"> <INPUT TYPE="text" NAME="f3007" maxlength="255" value="" size="20"> </td> </tr> <tr><td width="50%" valign="center"> <font face="helvetica,arial" size="" color="black"> 8. Golfer Phone number</td><td width="50%" valign="center"> <INPUT TYPE="text" NAME="f1001" maxlength="255" value="" size="20"> </td> </tr> </table> <center> </FORM> <INPUT TYPE="hidden" NAME="userid" VALUE="5929"> <INPUT TYPE="hidden" NAME="fno" VALUE="2"> <INPUT TYPE="hidden" NAME="wid" VALUE="5"> <INPUT TYPE="hidden" NAME="qno" VALUE="1"> </center> </form> </td> </tr></table> </td> <td width="1%" bgcolor="0033cc"> </td> </tr> <tr> <td width="1%" bgcolor="0033cc" bgcolor="0033cc" class="edge-bl" height="10"> </td> <td width="98%" bgcolor="0033cc"> </td> <td width="1%" bgcolor="0033cc" bgcolor="0033cc" class="edge-br" height="10"> </td> </tr> </table> </p> <p align="left"> </p> <p align="left"> </p> <p align="left"> </p> <p align="left"> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </th> </tr> <tr> <th width="61%" bgcolor="#3a4876" scope="row"> </th> <td width="39%" bgcolor="#3a4876"> </td></tr></table></th></tr> Hello everyone, I need to create a pre-filled form. When the user goes to the page, I want them to see the text in the form but also be able to edit it. I don't know if I'm not searching for the correct words on Google or this forum because I'm not able to find an answer on how to do this. Thanks in advance for your help! I am currently working on a form for customers to fill out and submit to my mysql database. I am having a hard time deciding how to do it. I am wanting to have the usual name, address, city, state and phone, etc.. BUT I need them to fill out up to 30 different text fields with information (seems like a lot but they will not fill out all 30 text areas). I am wondering how I should go about the 30 text areas? Is this best done with HTML or should I be looking at something else? I am pretty new to this so any help or advice would be great. I am wondering if by creating a table with 2 columns and then have 2 text areas side by side going down 15 rows would be best. Thanks in advance, Scott I'm helping a friend build a site to sell textbooks, and the system that he's going to implement involves an "Order" page wherein you enter (or select) a five-digit class code for, say, five different classes. What I want to know how to do is, once someone has their classes all selected and hits the "order" button, that they are given an invoice for the amount of the books needed for those classes. So, essentially, I need to figure out a way to tie each of these five-digit class codes to a certain price which will be given to the customer to complete the order right there on the site. The old model had used a method wherein a list of the classes would be sent to my friend, who would then figure the cost and call the customer back with the total. I apologize if none of this is making sense. If not, please let me know what it is that's confusing so I may clarify. i am unsure of how to go about making a submitable form with the following fields that would need to be filled on by the user before submiting Name Address Telephone Room(s) To Measure Preffeed Date & Time witth appropiate room between each sectoin for allowing users to in put data into suficent sized boxes i would then need a submit button that will send all of the above infomation to a email account if anyone can help that would be great many thanks ddwwf1 On the top it is giving mesg: 405 Method Not Allowed. I am getting this error messege : Method Not Allowed The requested method POST is not allowed for the URL /Assessment.html. Apache/1.3.37 Server at www.supremelegal.com Port 80 Here is the full page code: Please have a look, <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <meta name="generator" content="Adobe GoLive"> <title>Assessment Form</title> </head> <body bgcolor="#ffffff"> <p><FORM action="http://www.supremelegal.com/Assessment.html" method="post" enctype="text/plain" target="_blank"> <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%"> <TR> <form method=POST action="http://www.supremelegal.com/cgi-bin/formmail.pl" target="_top"> <INPUT TYPE="HIDDEN" NAME="recipient" VALUE="atharatsupremelegal.com"> <INPUT TYPE="HIDDEN" NAME="subject" VALUE="WebSite Contact"> <INPUT TYPE="HIDDEN" NAME="redirect" VALUE="http://www.supremelegal.com/thanks.htm"> <INPUT TYPE="HIDDEN" NAME="required" VALUE="email,your_name"> <input type=hidden name="sort" value="through,your_name,phone,company_name,email,comments"> <TD width="30%"><DIV align="right"> <B>Fist Name:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="Fist Name" size="40"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>Last Name:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="Last Name" size="40"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>Address:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="Address:" size="40"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>City:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="City:" size="40"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>State/Province:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="State/Province:" size="40"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>Zip code & Country:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="Zip code & Country:" size="40"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>Nationality:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="Nationality:" size="40"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>Date of Birth:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="Date of Birth:" size="40"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>E-mail Address:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="E-mail Address:" size="40"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>Highest Level of education:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="Highest Level of education:" size="40"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>Total years of education:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="Total years of education:" size="40"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>Current occupation:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="Current occupation:" size="40"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>Total years of full paid work experiance:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="Total years of full paid work experiance:" size="40"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>English Language Proficiency:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="English Language Proficiency:" size="40"> </TD> </TR> <TR><td width="1%"></td> <TD colspan="2"> <p><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><input type="checkbox" name="option1" value="High"> High<br> <input type="checkbox" name="option2" value="Moderate"> Moderate<br> </font> </TD></TR> <TR> <TD width="30%"><DIV align="right"> <B>French Language Proficiency:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="French Language Proficiency:" size="40"> </TD> </TR> <TR><td width="1%"></td> <TD colspan="2"> <p><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><input type="checkbox" name="option1" value="High"> High<br> <input type="checkbox" name="option2" value="Moderate"> Moderate<br> </font> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>Marital Status:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="Marital Status:" size="40"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>Name, age, qualification, work experiance of your partner:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="Name, age, qualification, work experiance of your partner:" size="40"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>You or your partner ever worked or studied in Canada:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="You or your partner ever worked or studied in Canada:" size="20"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>You or your partner have any relative willing to sponsor you in Canada:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="You or your partner have any relative willing to sponsor you in Canada:" size="20"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>What is their legal status in Canada:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="What is their legal status in Canada:" size="20"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>Any Employer in Canada willing to sponsor you, Full Name & Address:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="Any Employer in Canada willing to sponsor you, Full Name & Address:" size="20"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>Do you or your partner plan to invest funds in Canada:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="Do you or your partner plan to invest funds in Canada:" size="20"> </TD> </TR> <TR> <TD width="30%"><DIV align="right"> <B>Upon immigration how much (CAD$)funds can you show:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="Upon immigration how much (CAD$)funds can you show:" size="20"> </TD> </TR> <TR> <TD> <DIV align="right"><B>How did you hear about us:</B></DIV> </TD> <TD> <INPUT type="text" name="email" size="20"> </TD> </TR> <TR> <TD> <DIV align="right"> <B>If you have any question or comments:</B> </DIV> </TD> <TD> <TEXTAREA name="comment" cols="30" wrap="virtual"rows="4"> Here is my comment... </TEXTAREA> </TD></TR> <TR> <TD> </TD> <TD> <INPUT type="submit" name="submit" value="Submit"> <INPUT type="reset" name="reset" value="Reset"> </TD></TR> </TABLE> </FORM></p> </body> </html> Please fix this for me...... I don't know how to fix this error messege...... Thank you buddy.. in advance... Hi All, I am wondering if someone can recommnd an solution or point me in the direction i should be going. I am looking at creating a dynamic form, what i would like to do is use a drop down and depending on the dropdown selected the required fields would populate. I have attached an file to show as an example. If someone clicked on Item A they would get one set of fields to fill out. If that same person selected Item B they would get different fields to fill out ... All being mandatory.. Thanks ahead for any help or suggestions ... This is a great place to get info. Hello everyone I need to create a html form that after completing will generate .doc file that will be saved on client's PC. I found this -> http://www.htmlforums.com/html-xhtml...oc-103591.html but seems because it's no one's paying attention so I decided to repost the question, i tried things in above thread but they don't seem to work for me at all and i tried different browsers even, i hit submit and form resets to default values and... that's it no .doc file is generated. Any help in my case would be very appreciated, also i don't know too much outside of HTML Hi, I wonder someone could just point me in the right direction on how I may achieve this and can then read up on and give it a go?.. Basically I want to create a "form" on my web site that helps show how a somewhat complicated sporting play off system would work depening on where teams finish and who beats who in the play off system. What I want to start is six choices with drop down lists that allowed people to choose each of the six teams and where they finish in positions 1 to 6. When they do this I would like it to put that team in another selection where they can choose which team will beat who in the next play off game and advance until the final so they can see how it would pan out.. e.g. 1st - TEAM Z (chosen from drop down) 2nd -TEAM V 3rd - TEAM Y 4th - TEAM U 5th - TEAM X 6th - TEAM W Play off game (1st v 6th) TEAM Z (please select who you think will win) v TEAM W . . Final TEAM Z v TEAM U Hope that makes sense.. Like I say any pointers in the right direction so I can try it out.. I have Frontpage 2000 if that helps but not extensions on the server Thanks for the help.. Hi, Im looking to make a payment form that calculates the prices as you go along, similar to this i just dont know how to go about it, is there software that can be used? thanks alot, Dan I am working on a website that deals with a form for an electronic check. I pretty much know how to do the code for getting the values, etc, I just do not know how to create the actual forms. I have to create the pages in Visual Studio 2008. Here is what I have to create: The first image explains what is supposed to be in each field of the form. The second image is what it is supposed to look like after the user inputs information to the form. And here is what the result is supposed to be after the user clicks the preview button: So like I said, I know how to do most of the coding, I just have no idea how to manipulate Visual Studio to make the forms look like, or at least similar to, the pictures I posted. I have experience in html and css and some in javascript. So that is not really the issue. I just do not know Visual Studio too well. It seems like there is something easy and/or obvious that I am missing. I played around with VS for several hours earlier and I could not make anything that looked similar the images. Any help is greatly appreciated. If anyone could take the time to answer this then much appreciated, it's pretty easy to read through, the php code is very basic and repeats itself in most places.. To create a CMS in PHP, is the best way to do it to save sections of the html to either say either a db or text file. This seems a bit messy but maybe the best way, for example say i have this html and i want to have a user be able to add more images to their page by just uploading an image and clicking a button ........, HTML Code: <table>
<tr>
<td> <img src = "i1.jpg" ></td>
</tr>
</table>
Now i could save, HTML Code: <table> <tr> to say text1.txt and HTML Code: </tr> </table> to text2.txt, and the images to say text3.txt, HTML Code: <td> <img src = "i1.jpg" ></td> i could then say something like, PHP Code: <?php $fname = "text1.txt"; $fo = fopen($fname,r); $fr1 = fread($fo,filesize($fname)); fclose($fo); $fname = "text2.txt"; $fo = fopen($fname,r); $fr2 = fread($fo,filesize($fname)); fclose($fo); $fname = "text3.txt"; $fo = fopen($fname,r); $fr3 = fread($fo,filesize($fname)); fclose($fo); $f_final= $fr1.$fr3.$fr2; echo $f_final; ?> This would put the contents of all 3 text files into a single variable $f_final so that all i would need to do if i needed a new image added is add that images html to text3.txt. This seems like a pretty good way of doing things, i assume this is how CMS systems are made pretty much?? So basically i could have a user frontend "addimg.html" which is for adding the image, HTML Code: <form method="post" action ="newimage.php"> <input tpye = "text" name = "img1"> <input type = "submit"> </form> and then a modified version of the above php, PHP Code: <?php //save new image name to text3.txt *********** $newimgge_to_ADD = $_POST["img1"]; $fname = "text3.txt"; $fo = fopen($fname,a); fwrite($fo,"\r\n".'<td> <img src = "'.$newimgge_to_ADD.'.jpg"> </td>'); fclose($fo); //********************** //Open all the text files one by one and save their contents to a variable ***** $fname = "text1.txt"; $fo = fopen($fname,r); $fr1 = fread($fo,filesize($fname)); fclose($fo); $fname = "text2.txt"; $fo = fopen($fname,r); $fr2 = fread($fo,filesize($fname)); fclose($fo); $fname = "text3.txt"; $fo = fopen($fname,r); $fr3 = fread($fo,filesize($fname)); fclose($fo); //****************** //Combine the contents of all 3 varables to one varable f_final ********** $f_final= $fr1.$fr3.$fr2; //********************* //Print out the result ********************* echo $f_final; //************************** ?> This would need a good bit of tweaking but i just want to know if i am on the right tracks.. I'm trying to learn a little bit of html. I've got some basic knowledge now, but I can't figure out one thing. I want to make a button to go to another webpage. How do I add webpages to my website and access them through a button? Hello All, I am looking to create a website very similar to this http://www.loserstatus.com/ that is my friends site and I currently have this www.canapictures.com . I like how simple his layout is but it looks sooo much better than mine lol. He hired someone to build it so he has no idea how it was made. Does anyone know if there is a template or something I can use to make something similar, I mainly just want the scrolling box with pictures that are linked to videos like he has on the top of the page below the banner. Hello. =) I'd like to create a web form, but I don't understand scripting languages (yet)...so I need a user-friendly, WYSIWYG form creator [*] . I have FrontPage 2003, but that's not "WYSIWYG"-enough for me. Plus I heard that FrontPage isn't that great when it comes to coding things. I also want my form creator to let me: -Insert "special fields/code" (see #1, #2, #3 and #4 - from DynamicDrive.com) -Validate all email addresses typed in the form -Send results to my email, and store certain fields/answers to an Excel document -Hide my email address from spambots (it's called "encrypting", right?) There are websites that'll make the form for me, but I want to host the finished form (and accompanying files) on MY OWN SERVER. The best site I could find (phpFormGenerator) will let me download everything. But it'll also post my forms -- and files -- in public. So my email address, database info, etc. will be available for spambots and hackers. =\ Thanks in advance! [*] I'd prefer a freeware creator. If you know some good shareware, I ONLY want one that lets me create a fully-functional (ad-free, watermark free, 100% working for life) web form. I don't care if it expires in 30 days...as long as I get my one form made, no strings attached. PS: Since I'm a complete n00b when it comes to web forms, I have a few more questions to ask (mostly database related). But I'll do that later. Ok so i've built plenty of general websites using fairly basic html and they've all been pretty successful and people have been pleased but now I need to build an online shop for myself and i'm not 100% I have the know how to do it (but I can't afford to get it done elsewhere so eek I need to try..) Is it safe to create a webshop and integrate a checkout system using plain old html? There is now way to disable source viewing from what I understand... And if so, can anyone suggest a really easy to understand and integrate checkout to go for? This is the point that has really confused and made me a bit unsure if i'm able to do this. There's so many that it would be good to know of a UK one that I shold be able to get to grips with! Thanks Hi everyone, Thank god I found this forum. My HTML experience is pretty limited and something has been driving me insane trying to figure out how to do. All I want to do is create a form that when filled out the information is sent to my email. I thought this is how I write it HTML Code: <form action="MAILTO:me@myemail.com" method="post" enctype="text/plain"> <input type="######"> <br> <input type="######"> <br> <input type="######"> <br> <input type="submit" value="Send"> </form> Then that information would be sent to my email. When I try it out all it does is open up my outlook account with the details in there. Please someone help before my monitor goes flying out the window. Cheers I'm trying to create a table. And instead of trying to explain it I'll just upload the code in a Notepad file. I wrote TABLE HERE where i want the table. It will be much appreciated if someone could help me. Popup Windows: The Basics We'll begin the tutorial by creating a basic popup window. The technique described here addresses all the major issues in popups. The popup always comes to the front. Different links can target the same popup. The code is simple and easily modified. Everything for the rest of the turorial is a variation on the theme described here. The code in this page creates a popup that is opened from a link. In this section we'll show the code with just the minimal description you need to get it going. First, copy this script into the <HEAD> section of your page: HTML Code: <SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
return false;
}
//-->
</SCRIPT>
For now we'll skip the details of how the script works, and move to the next step. The script above opens the popup, but something needs to run the script. The most common situation is that the script is run when the user clicks on a link. A link like the following would run the script: HTML Code: <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> Most of the link is as usual. The URL of the page being linked to is in the HREF attribute. We've added an additional attribute called onClick. Copy the code as it is into your link, with only a small modification. The second argument of the popup() -- 'notes' -- indicates name of the popup window. Every popup window should have its own unique name. Be sure to put the name in single quotes (''). So if you want to name the popup 'stevie' then this would be the code: HTML Code: <A HREF="popupbasic.html" onClick="return popup(this, 'stevie')">my popup</A> Read This Next Part Or You'll Go Insane Trying to Figure Out Why Your Popup Doesn't Work A small but crucial point is often overlooked. The command in onClick must begin with return or the script won't work. Be sure to start the command with return like this: HTML Code: onClick="return popup(this, 'notes')" And don't put a space in the page name between the single quotes. If you do, the link will act just like a regular link. Popup Windows: From an Image Map In our first variation we'll open the popup from an image map instead of from a regular anchor. We'll use the same script as from our first example. With that script, an <AREA ...> tag in an image map can be made to open a popup in exactly the same way as an <A ...> tag: HTML Code: <MAP NAME="index"> <AREA HREF="mypopup.html" ALT="My Popup" COORDS="10,10,120,120" SHAPE=RECT onClick="return popup(this, 'gloss')"> <AREA SHAPE=RECT ALT="Your Popup" COORDS="140,10,180,50" HREF="yourpopup.html" onClick="return popup(this, 'gloss')"> <AREA SHAPE=DEFAULT NOHREF> </MAP> <IMG SRC="mymap.gif" HEIGHT=130 WIDTH=190 ALT="Image Map Example" BORDER="0" USEMAP="#index"> Popup Windows: Opening Automatically In the first two examples (Popup Windows: The Basics and Popup Windows: From an Image Map) the popup is opened when the user clicks on something. In this example the popup opens automatically. We'll use the same script as in the first example. Copy this script in the <HEAD> section of your page: HTML Code: <SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
return false;
}
//-->
</SCRIPT>
This time, instead of running the script from a link we'll run it from the onLoad attribute of the <BODY ...> tag. HTML Code: <BODY onLoad="popup('autopopup.html', 'ad')">
The command in onLoad is run when the document is finished loading. Like in our previous example, the command runs popup(), but this time the first argument for popup() is a little different. In the previous example we put this, meaning the link itself, and the script got the URL from the link. In this case there is no link so we pass the actual URL to open. So in our example we put 'autopopup.html'. Popup Windows: From a Form For our next variation on the popup theme we're going to open the popup from a form. In this example we're going to change the script around. The following script is custom designed for opening a popup from a form. It works with forms that use both POST and GET. Copy the following script exactly as-is into the <HEAD> section of your document: HTML Code: <SCRIPT TYPE="text/javascript">
<!--
function popupform(myform, windowname)
{
if (! window.focus)return true;
window.open('', windowname, 'height=200,width=400,scrollbars=yes');
myform.target=windowname;
return true;
}
//-->
</SCRIPT>
Now we'll add some code so that the popup opens when the user submits the form. Add an onSubmit attribute to <FORM ...> tag: HTML Code: <FORM METHOD=POST ACTION="../cgi-bin/mypopupcgi.pl" onSubmit="popupform(this, 'join')"> The first argument for popupform() is always this, meaning the form itself. The second argument, 'join' in this case, is a unique name for the popup. Popup Windows: Targeting the Opener Once a popup window has been created, linking from the popup back to the main window (i.e. the window which opened the popup) is a little trickier than might be expected. The problem is that the main window doesn't have a "name" the way the popup window does. Fortunately, JavaScript provides an answer in the form of opener. To create links in the popup window that target back to the main window, first put this JavaScript in the <HEAD> of the popup page: HTML Code: <SCRIPT TYPE="text/javascript">
<!--
function targetopener(mylink, closeme, closeonly)
{
if (! (window.focus && window.opener))return true;
window.opener.focus();
if (! closeonly)window.opener.location.href=mylink.href;
if (closeme)window.close();
return false;
}
//-->
</SCRIPT>
A link that uses this script looks like this: HTML Code: <A HREF="rbex.html" onClick="return targetopener(this)">my page</A> Popup Windows: Closing When They Go to the Opener In the previous example the link in the popup targets the main page, but the popup stays open in the background after the user clicks on the link. In this page we'll set the link so that it closes the popup after the click. targetopener takes three parameters. The first is always this, meaning the link itself. The second and third parameters are optional and default to false. (Notice we don't use them in the example above, we'll get to them shortly.) The second parameter indicates if the popup should close. The third is if the link should actually send the opener to the linked resource, or if the opener should just get the focus regardless of what its current page is. The third parameter provides a safe way to close the popup after closing, but still having a link to an existing page if the window isn't actually a popup (such as if the user found the page through a search engine). When the user clicks on the link, targetopener checks if the browser has the focus command (a few older browsers don't) and if the current window was opened by another window. If these conditions are true, then the opener window gets the focus, the opener is directed to the referenced URL, and the script returns false. Because the function returns false, the link does not go on to the URL (the script has already done that). Note that the link which targets the opener is a little different than the link that opened the popup window to begin with. In this link, onClick says "return goOpener(this)"... the links on the previous pages did not use return. By default, the popup window stays open but is in the background. If you want the popup to close after going back to the opener, add a second parameter of true to the targetopener function call: HTML Code: <A HREF="rbex.html" onClick="return targetopener(this,true)">main page</A> |
|||||||