1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

squad selector

Discussion in 'Web Development Help' started by collinsca, Mar 27, 2006.

  1. collinsca

    collinsca Techie7 New Member

    Messages:
    371
    Operating System:
    Windows XP
    Hi All

    You know these football (soccer) squad selectors you get on sites such as BBC... where you select which player you think should play in a certain position- using a drop down box.
    Well this is something i would like to do for my own team!

    Would this be possible/easy to fo? any suggestions?
    I have a bit of HTML and Flash experience.

    Thanks everyone
  2. HappyBeaver

    HappyBeaver Bea*ering Away!

    Messages:
    509
    Operating System:
    Windows XP
    Something like this?
    Code:
    <form method="post" name="form2" target="_blank" id="form2">
      <p>
        <select name="menu1" size="1" onchange="MM_jumpMenu('parent',this,0)">
          <option>players</option>
          <option>jim</option>
          <option>paul</option>
          <option>ufrank</option>
        </select>
    </p>
      <p>
        <select name="select" size="1" multiple="multiple" onchange="MM_jumpMenu('parent',this,0)">
          <option>centre forward</option>
          <option>goalie</option>
          <option>left wing</option>
          <option>captain</option>
        </select>
    </p>
    </form>
    1 person likes this.
  3. collinsca

    collinsca Techie7 New Member

    Messages:
    371
    Operating System:
    Windows XP
    yeh- thats great - thanks !

  4. collinsca

    collinsca Techie7 New Member

    Messages:
    371
    Operating System:
    Windows XP
    Thanks once again- I am now attempting to use this. Can i ask another question.
    How once someone fills it in can i then get them to submit it and i receive an e-mail and be able to understand who they have placed in which "position"?

    Kind regards
  5. HappyBeaver

    HappyBeaver Bea*ering Away!

    Messages:
    509
    Operating System:
    Windows XP
    The following html example (I used it for a website I ran) will show you the submit command. You can integrate the code I gave before into your own table and use the submit command to send that information to your chosen email. This is handled by the ACTION..... cgiemail code :)

    Code:
    <FORM METHOD="POST" ACTION="http://www.happybeaver.co.uk/cgi-bin/cgiemail/cgi-bin/order.txt">
                  <table width="64%" border="0" align="center" cellpadding="2" cellspacing="1" bordercolor="#CCCCCC" bgcolor="#CCCCCC">
                    <tr bordercolor="#9999FF" bgcolor="#F0F0FF"> 
                      <td width="11%"><div align="center">Page No.</div></td>
                      <td width="7%"><div align="center">Qty</div></td>
                      <td width="33%"><div align="center">Product Name</div></td>
                      <td width="10%"><div align="center">Colour</div></td>
                      <td width="6%"><div align="center">Size</div></td>
                      <td width="33%"><div align="center">Price &pound;</div></td>
                    </tr>
                    <tr bordercolor="#9999FF" bgcolor="#F0F0FF"> 
                      <td><div align="center"> 
                          <input name="order1page" type="text" size="7">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order1quantity" type="text" size="4">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order1productname" type="text" size="25">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order1colour" type="text" size="5">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order1size" type="text" size="5">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order1price" type="text" size="5">
                        </div></td>
                    </tr>
                    <tr bordercolor="#9999FF" bgcolor="#F0F0FF"> 
                      <td><div align="center"> 
                          <input name="order2page" type="text" size="7">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order2quantity" type="text" size="4">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order2productname" type="text" id="order2productname2" size="25">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order2colour" type="text" size="5">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order2size" type="text" size="5">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order2price" type="text" size="5">
                        </div></td>
                    </tr>
                    <tr bordercolor="#9999FF" bgcolor="#F0F0FF"> 
                      <td><div align="center"> 
                          <input name="order3page" type="text" size="7">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order3quantity" type="text" size="4">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order3productname" type="text" size="25">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order3colour" type="text" size="5">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order3size" type="text" size="5">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order3price" type="text" size="5">
                        </div></td>
                    </tr>
                    <tr bordercolor="#9999FF" bgcolor="#F0F0FF"> 
                      <td><div align="center"> 
                          <input name="order4page" type="text" size="7">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order4quantity" type="text" size="4">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order4productname" type="text" size="25">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order4colour" type="text" size="5">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order4size" type="text" size="5">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order4price" type="text" size="5">
                        </div></td>
                    </tr>
                    <tr bordercolor="#9999FF" bgcolor="#F0F0FF"> 
                      <td><div align="center"> 
                          <input name="order5page" type="text" size="7">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order5quantity" type="text" size="4">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order5productname" type="text" size="25">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order5colour" type="text" size="5">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order5size" type="text" size="5">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order5price" type="text" size="5">
                        </div></td>
                    </tr>
                    <tr bordercolor="#9999FF" bgcolor="#F0F0FF"> 
                      <td><div align="center"> 
                          <input name="order6page" type="text" size="7">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order6quantity" type="text" size="4">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order6productname" type="text" size="25">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order6colour" type="text" size="5">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order6size" type="text" size="5">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order6price" type="text" size="5">
                        </div></td>
                    </tr>
                    <tr bordercolor="#9999FF" bgcolor="#F0F0FF"> 
                      <td><div align="center"> 
                          <input name="order7page" type="text" size="7">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order7quantity" type="text" size="4">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order7productname" type="text" size="25">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order7colour" type="text" size="5">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order7size" type="text" size="5">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order7price" type="text" size="5">
                        </div></td>
                    </tr>
                    <tr bordercolor="#9999FF" bgcolor="#F0F0FF"> 
                      <td><div align="center"> 
                          <input name="order8page" type="text" size="7">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order8quantity" type="text" size="4">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order8productname" type="text" size="25">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order8colour" type="text" size="5">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order8size" type="text" size="5">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order8price" type="text" size="5">
                        </div></td>
                    </tr>
                    <tr bordercolor="#9999FF" bgcolor="#F0F0FF"> 
                      <td><div align="center"> 
                          <input name="order9page" type="text" size="7">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order9quantity" type="text" size="4">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order9productname" type="text" size="25">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order9colour" type="text" size="5">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order9size" type="text" size="5">
                        </div></td>
                      <td><div align="center"> 
                          <input name="order9price" type="text" size="5">
                        </div></td>
                    </tr>
                    <tr bordercolor="#9999FF" bgcolor="#F0F0FF"> 
                      <td colspan="5"><div align="right">Total</div></td>
                      <td><div align="center"> 
                          <input name="totalprice" type="text" size="5">
                        </div></td>
                    </tr>
                  </table>
                  <blockquote> 
                    <p>Please fill in your personal details for delivery &amp; payment 
                      confirmation. </p>
                    <table width="86%" border="0" align="center" cellpadding="4" cellspacing="2">
                      <tr> 
                        <td width="14%">Name </td>
                        <td width="86%" align="center"><img src="../images/Star.gif" width="15" height="13">
    <input name="required-customername" type="text" size="50"> 
                          <img src="../images/Star.gif" width="15" height="13"></td>
                      </tr>
                      <tr valign="top"> 
                        <td>Address </td>
                        <td align="center"><img src="../images/Star.gif" width="15" height="13">
    <input name="required-address1" type="text" size="50"> 
                          <img src="../images/Star.gif" width="15" height="13"><br>
                          <input name="address2" type="text" size="50"> <br> <input name="address3" type="text" size="50"></td>
                      </tr>
                      <tr> 
                        <td>Tel. No. </td>
                        <td align="center"><img src="../images/Star.gif" width="15" height="13">
    <input name="required-customerphone" type="text" size="50"> 
                          <img src="../images/Star.gif" width="15" height="13"></td>
                      </tr>
                      <tr> 
                        <td>Email </td>
                        <td align="center"><img src="../images/Star.gif" width="15" height="13">
    <input name="required-customeremail" type="text" size="50"> 
                          <img src="../images/Star.gif" width="15" height="13"></td>
                      </tr>
                    </table>
                    <br>
                    <img src="../images/Star.gif" width="15" height="13"> <font size="1">These 
                    fields must be completed before sending the form. </p> </font></blockquote>
                  <p align="center"><font size="3">Click the Submit Order button to 
                    send me your order</font></p>
                  <div align="center"> 
                    <input name="submit" type="submit" value="Submit Order">
                    <input type="hidden" name="success" value="http://www.happybeaver.co.uk/html/thankyou.php">
                  </div>
                </form>
    Paste this into your wysiwig editor to see it :)
    Last edited: May 30, 2006
  6. HappyBeaver

    HappyBeaver Bea*ering Away!

    Messages:
    509
    Operating System:
    Windows XP
    Now.. this is your code that I've added the cgi email script to:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <FORM METHOD="POST" ACTION="http://www.happybeaver.co.uk/cgi-bin/cgiemail/cgi-bin/order.txt">
    <body><form method="post" name="form2" target="_blank" id="form2">
      <p>
    	<select name="menu1" size="1" multiple="multiple"  onchange="MM_jumpMenu('parent',this,0)">
    	  <option selected="selected">players</option>
    	  <option>jim</option>
    	  <option>paul</option>
    	  <option>ufrank</option>
    	</select>
    </p>
      <p>
    	<select name="select" size="1" multiple="multiple" onchange="MM_jumpMenu('parent',this,0)">
    	  <option>centre forward</option>
    	  <option>goalie</option>
    	  <option>left wing</option>
    	  <option>captain</option>
    	</select>
    </p>
    <div align="center"> 
    				<input name="submit" type="submit" value="Submit Order">
    				<input type="hidden" name="success" value="http://www.happybeaver.co.uk/html/thankyou.php">
    			  </div>
    </form>
    </body>
    </html>
    You'll also need to add two text files to your CGI bin via ftp... they are in the following format... you'll have to work out the text you put in from the finished form you end up with:

    order.txt

    Code:
    To: karen@happybeaver.co.uk
    From: [required-customeremail]
    Subject: Ann Summers Order
    
    Customer Name: [required-customername]
    Address 1: [required-address1]
    Address 2: [address2]
    Address 3: [address3]
    Customer Email: [required-customeremail]
    Customer Phone: [required-customerphone]
    
    Order 1 Page No.: [order1page]
    Order 1 Qty: [order1quantity]
    Order 1 Product Name: [order1productname]
    Order 1 Colour: [order1colour]
    Order 1 Size: [order1size]
    Order 1 Price: [order1price]
    
    Order 2 Page No.: [order2page]
    Order 2 Qty: [order2quantity]
    Order 2 Product Name: [order2productname]
    Order 2 Colour: [order2colour]
    Order 2 Size: [order2size]
    Order 2 Price: [order2price]
    
    Order 3 Page No.: [order3page]
    Order 3 Qty: [order3quantity]
    Order 3 Product Name: [order3productname]
    Order 3 Colour: [order3colour]
    Order 3 Size: [order3size]
    Order 3 Price: [order3price]
    
    Order 4 Page No.: [order4page]
    Order 4 Qty: [order4quantity]
    Order 4 Product Name: [order4productname]
    Order 4 Colour: [order4colour]
    Order 4 Size: [order4size]
    Order 4 Price: [order4price]
    
    Order 5 Page No.: [order5page]
    Order 5 Qty: [order5quantity]
    Order 5 Product Name: [order5productname]
    Order 5 Colour: [order5colour]
    Order 5 Size: [order5size]
    Order 5 Price: [order5price]
    
    Order 6 Page No.: [order6page]
    Order 6 Qty: [order6quantity]
    Order 6 Product Name: [order6productname]
    Order 6 Colour: [order6colour]
    Order 6 Size: [order6size]
    Order 6 Price: [order6price]
    
    Order 7 Page No.: [order7page]
    Order 7 Qty: [order7quantity]
    Order 7 Product Name: [order7productname]
    Order 7 Colour: [order7colour]
    Order 7 Size: [order7size]
    Order 7 Price: [order7price]
    
    Order 8 Page No.: [order8page]
    Order 8 Qty: [order8quantity]
    Order 8 Product Name: [order8productname]
    Order 8 Colour: [order8colour]
    Order 8 Size: [order8size]
    Order 8 Price: [order8price]
    
    Order 9 Page No.: [order9page]
    Order 9 Qty: [order9quantity]
    Order 9 Product Name: [order9productname]
    Order 9 Colour: [order9colour]
    Order 9 Size: [order9size]
    Order 9 Price: [order9price][code]
    
    order2.txt
    
    [code]To: karen@happybeaver.co.uk
    From: [order1page]
    Subject: Ann Summers Order
    
    
    Frdasdasdasdm: [order1page]
    

    Look here for more help....

    http://web.mit.edu/wwwdev/cgiemail/user.html
    http://www.he.net/info/cgiemail/demo.html

    It all sounds quite complicated but when you get your form together it's quite easyish LOL
    Last edited: May 30, 2006
  7. collinsca

    collinsca Techie7 New Member

    Messages:
    371
    Operating System:
    Windows XP
    Im just off out so havent time to check it- thanks very much for your help on this one! oh and im glad to know u have a happy beaver! ;)
    chris
  8. HappyBeaver

    HappyBeaver Bea*ering Away!

    Messages:
    509
    Operating System:
    Windows XP
    [​IMG]
  9. HappyBeaver

    HappyBeaver Bea*ering Away!

    Messages:
    509
    Operating System:
    Windows XP
    Wonder how he got on? [​IMG]
  10. collinsca

    collinsca Techie7 New Member

    Messages:
    371
    Operating System:
    Windows XP
    Hey- Ive had to put the project on hold for the time being.
  11. doc_fusion

    doc_fusion Techie7 New Member

    Messages:
    1
    Operating System:
    Windows XP

    Hi,

    Whatever it is could you please send it to me? doc_fusionATyahooDOTcom

    PLEASE, PLEASE, PLEASE???
  12. HappyBeaver

    HappyBeaver Bea*ering Away!

    Messages:
    509
    Operating System:
    Windows XP
    Look a page back doc_fusion... it's all there!

Share This Page