squad selector

**collinsca** · 27-03-2006

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

**HappyBeaver** · 30-03-2006

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>

**collinsca** · 30-03-2006

yeh- thats great - thanks !

Originally Posted by HappyBeaver

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>

**collinsca** · 30-05-2006

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

**HappyBeaver** · 30-05-2006

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

**HappyBeaver** · 30-05-2006

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

**collinsca** · 30-05-2006

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

**HappyBeaver** · 30-05-2006

im glad to know u have a happy beaver!

**HappyBeaver** · 29-06-2006

Wonder how he got on?

**collinsca** · 30-06-2006

Hey- Ive had to put the project on hold for the time being.

squad selector

squad selector

Similar Threads

BBC Squad Selector