|
[FIXED]Complex form using Reid's flexible form problems; Cory is the best coder here!
|
|
Topic Started: Jun 3 2014, 01:33 AM (629 Views)
|
|
MMASCC
|
Jun 3 2014, 01:33 AM
Post #1
|
- Posts:
- 116
- Group:
- Members
- Member
- #615,421
- Joined:
- April 15, 2014
- My Board URL
- www.forums.mmasportscards.com
|
Hello I was trying to create a form where it uses radio boxes as options, which contain images only, and I tried combining it with Reid's flexible form so that way I can have the results send into a topic, which can be private until an event completes and then I can make them public.
Here is what I want it to look like: http://forums.mmasportscards.com/pages/fantasy/
Here is my code: What am I doing wrong? Your help is greatly appreciated!!!!
- Code: HTML
-
<form id='generic_form'> <div class='category'> <table class='cat_head'> <tr> <center><IMG SRC="http://img.photobucket.com/albums/v609/DarkStriker/HendersonvsKhabilov.jpg" ALT="UFC Fight Night 42 Henderson vs Khabilov"></center> <td><h2 style='text-align:center'>UFC Fight Night 42: Henderson vs Khabilov</h2></td> </tr> </table> </div>
<table> <tr> <td> </td> </tr> </table>
<table id='form_spec'> <tr> <th colspan='2'><h2>Please fill out your picks for the above event:</h2></th> </tr> <tr> <td>Event Name:</td> <td> <select> <option>UFN: 42 Henderson vs Khabilov</option> </select> </td> </tr>
<center><h2>Main Event<form></h2> <input type="radio" name="fighter" value="blue"><img src="http://img.photobucket.com/albums/v609/DarkStriker/Ben_Henderson-2.jpg"> <b>VS</b> <input type="radio" name="fighter" value="red"><img src="http://img.photobucket.com/albums/v609/DarkStriker/Rustam-Khabilov-2.png">
<h3>Co-Main Event<form></h3> <input type="radio" name="fighter1" value="blue"><img src="http://img.photobucket.com/albums/v609/DarkStriker/Diego-Sanchez4.jpg"> <b>VS</b> <input type="radio" name="fighter1" value="red"><img src="http://img.photobucket.com/albums/v609/DarkStriker/966936-ross-pearson.jpg">
<br> <input type="radio" name="fighter2" value="blue"><img src="http://img.photobucket.com/albums/v609/DarkStriker/John-Dodson.jpg"> <b>VS</b> <input type="radio" name="fighter2" value="red"><img src="http://img.photobucket.com/albums/v609/DarkStriker/JohnMoraga.jpg">
<br> <input type="radio" name="fighter3" value="blue"><img src="http://img.photobucket.com/albums/v609/DarkStriker/Rafael_Dos_Anjos.jpg"> <b>VS</b> <input type="radio" name="fighter3" value="red"><img src="http://img.photobucket.com/albums/v609/DarkStriker/high.jpg">
BLAH <br> <input type="radio" name="fighter4" value="blue"><img src="http://img.photobucket.com/albums/v609/DarkStriker/yves-edwards-5.jpg"> <b>VS</b> <input type="radio" name="fighter4" value="red"><img src="http://img.photobucket.com/albums/v609/DarkStriker/piotrhallman.jpg">
<br> <input type="radio" name="fighter5" value="blue"><img src="http://img.photobucket.com/albums/v609/DarkStriker/erikperez.jpg"> <b>VS</b> <input type="radio" name="fighter5" value="red"><img src="http://img.photobucket.com/albums/v609/DarkStriker/bryancaraway.png">
<h3> Preliminary Card</h3> <input type="radio" name="fighter6" value="blue"><img src="http://img.photobucket.com/albums/v609/DarkStriker/yaotzin-meza.jpg"> <b>VS</b> <input type="radio" name="fighter6" value="red"><img src="http://img.photobucket.com/albums/v609/DarkStriker/sergiopettis_sergio.jpg">
<br> <input type="radio" name="fighter7" value="blue"><img src="http://img.photobucket.com/albums/v609/DarkStriker/Bobby-Voelker.jpg"> <b>VS</b> <input type="radio" name="fighter7" value="red"><img src="http://img.photobucket.com/albums/v609/DarkStriker/lancebenoist.jpg">
<br> <input type="radio" name="fighter8" value="blue"><img src="http://img.photobucket.com/albums/v609/DarkStriker/scott_Jorgensen1.jpg"> <b>VS</b> <input type="radio" name="fighter8" value="red"><img src="http://img.photobucket.com/albums/v609/DarkStriker/danny_martinez.jpg">
<br> <input type="radio" name="fighter9" value="blue"><img src="http://img.photobucket.com/albums/v609/DarkStriker/jon-tuck.jpg"> <b>VS</b> <input type="radio" name="fighter9" value="red"><img src="http://img.photobucket.com/albums/v609/DarkStriker/jake_lindsey.jpg">
<br> <input type="radio" name="fighter10" value="blue"><img src="http://img.photobucket.com/albums/v609/DarkStriker/patrick-cummins-strikeforce.jpg"> <b>VS</b> <input type="radio" name="fighter10" value="red"><img src="http://img.photobucket.com/albums/v609/DarkStriker/Roger-Narvaez.jpg">
<center> <tr> <td colspan='2' id='send_form'><button type='submit'>Submit Picks</button></td> </tr> </table> </form>
<style type='text/css'> /* <![CDATA[ */ #form_spec tr td:first-child { font-weight: bold; width: 30%; } #form_spec input, #form_spec textarea { width: 500px; } /* ]]> */ </style>
<script type='text/javascript'> var form_script = { form_id: $('#generic_form'), status_id: $('#send_form'), specific_id: $('#form_spec'), enable_guests: false, pm: { enabled: false, // Does not work for guests user: "MMASCC", // 1 user only title: "New Form From {{user_name}}", content: "{{form}}" }, topic: { enabled: true, forum_id: 4091555, // 1 id only title: "{{1}} From {{user_name}}", description: "", content: "{{form}}" }, statuses: { not_logged_in: "You must be registered and signed in to use this feature.", // Used if enable_guests: false first: "Coagulating picks...", second: "Sending picks...", done: "Your picks have been submitted, Good Luck!" }, submission_formatting: { separator: ' ',
before_all: '', after_all: '',
before_question: '[b]', after_question: '[/b]',
before_response: '[i]', after_response: '[/i]' }, possible_elements: 'input, textarea, select' // For the second column of table; .val() must work on it }; </script>
<script type='text/javascript' src='http://z3.ifrm.com/313/104/0/p366373/form_script.js'></script>
[EDIT] I also tried adding [tr] [td] [/tr] [/td] to all the different submissions which made it look weird because it would stack them instead of having the two pics on the same line, and still didnt work. Also tried wrapping the entire thing with the same tags, also didnt fix the submitting problem. I do get a partial submission that shows up in the topic, - Code: HTML
-
<td>Event Name:</td> <td> <select> <option>UFN: 42 Henderson vs Khabilov</option> that shows up. SO I am thinking maybe it has to do with the fact they are images?
Again all help is greatly appreciated!!!!
Edited by MMASCC, Jun 7 2014, 01:56 PM.
|
|
|
| |
|
MMASCC
|
Jun 6 2014, 11:43 PM
Post #2
|
- Posts:
- 116
- Group:
- Members
- Member
- #615,421
- Joined:
- April 15, 2014
- My Board URL
- www.forums.mmasportscards.com
|
Anyone at all?
|
|
|
| |
|
Cory
|
Jun 7 2014, 12:00 AM
Post #3
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
I think the primary issue is Reid's code does not support the type of input you're trying to use.
|
|
|
| |
|
MMASCC
|
Jun 7 2014, 12:10 AM
Post #4
|
- Posts:
- 116
- Group:
- Members
- Member
- #615,421
- Joined:
- April 15, 2014
- My Board URL
- www.forums.mmasportscards.com
|
Hmm meaning it does not support submitting the type of input Im using(radio)? Because it seems to look like the code should take any <input>?
Is there any way around it? Or is there any way to use html to create a way for topic submission? Or some other similar method?
Because I can build a custom form, but I was using Reid's code specifically to submit the information to topics.
Or what are my best options?
Thanks Cory!
Edited by MMASCC, Jun 7 2014, 12:12 AM.
|
|
|
| |
|
Cory
|
Jun 7 2014, 12:23 AM
Post #5
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
You could use a drop down menu instead of radio inputs, as the code example applies.
|
|
|
| |
|
MMASCC
|
Jun 7 2014, 02:08 AM
Post #6
|
- Posts:
- 116
- Group:
- Members
- Member
- #615,421
- Joined:
- April 15, 2014
- My Board URL
- www.forums.mmasportscards.com
|
The images don't show up then. 
Here is what it looks like currently: http://forums.mmasportscards.com/pages/fantasyufc/
Heres what i want it to look like: http://forums.mmasportscards.com/pages/fantasy/
Thanks again!
Edited by MMASCC, Jun 7 2014, 02:38 AM.
|
|
|
| |
|
Cory
|
Jun 7 2014, 07:38 AM
Post #7
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
Try this instead:- Code: HTML
-
<form id='generic_form' action=''> <div class='category'> <table class='cat_head'> <tr> <td style="background: none; border: 0" class="c"><img src="http://img.photobucket.com/albums/v609/DarkStriker/HendersonvsKhabilov.jpg" alt="UFC Fight Night 42 Henderson vs Khabilov"></td> </tr> <tr> <td><h2 style='text-align:center'>UFC Fight Night 42: Henderson vs Khabilov</h2></td> </tr> </table> </div>
<table> <tr> <td> </td> </tr> </table>
<table id='form_spec'> <tr> <th colspan='2'><h2>Please fill out your picks for the above event:</h2></th> </tr> <tr> <td>Event Name:</td> <td> <select style="display: inline"> <option>UFN: 42 Henderson vs Khabilov</option> </select> </td> </tr> <tr> <td>Ben Henderson vs Rustam Khabilov</td> <td> <select> <option value="Ben Henderson">Ben Henderson</option> <option value="Rustam Khabilov">Rustam Khabilov</option> </select> <span class="remove"><img src="http://img.photobucket.com/albums/v609/DarkStriker/Ben_Henderson-2.jpg" alt="" /> <b>VS</b> <img src="http://img.photobucket.com/albums/v609/DarkStriker/Rustam-Khabilov-2.png" alt="" /></span> </td> </tr> <tr> <td>Diego Sanchez vs Ross Pearson</td> <td> <select> <option value="Diego Sanchez">Diego Sanchez</option> <option value="Ross Pearson">Ross Pearson</option> </select> <span class="remove"><img src="http://img.photobucket.com/albums/v609/DarkStriker/Diego-Sanchez4.jpg" alt="" /> <b>VS</b> <img src="http://img.photobucket.com/albums/v609/DarkStriker/966936-ross-pearson.jpg" alt="" /></span> </td> </tr> <tr> <td>John Dodson vs John Moraga</td> <td> <select> <option value="John Dodson">John Dodson</option> <option value="John Moraga">John Moraga</option> </select> <span class="remove"><img src="http://img.photobucket.com/albums/v609/DarkStriker/John-Dodson.jpg" alt="" /> <b>VS</b> <img src="http://img.photobucket.com/albums/v609/DarkStriker/JohnMoraga.jpg" alt="" /></span> </td> </tr> <tr> <td>Rafael dos Anjos vs Jason High</td> <td> <select> <option value="Rafael dos Anjos">Rafael dos Anjos</option> <option value="Jason High">Jason High</option> </select> <span class="remove"><img src="http://img.photobucket.com/albums/v609/DarkStriker/Rafael_Dos_Anjos.jpg" alt="" /> <b>VS</b> <img src="http://img.photobucket.com/albums/v609/DarkStriker/high.jpg" alt="" /></span> </td> </tr> <tr> <td>Yves Edwards vs Piotr Hallmann</td> <td> <select> <option value="Yves Edwards">Yves Edwards</option> <option value="Piotr Hallmann">Piotr Hallmann</option> </select> <span class="remove"><img src="http://img.photobucket.com/albums/v609/DarkStriker/yves-edwards-5.jpg" alt="" /> <b>VS</b> <img src="http://img.photobucket.com/albums/v609/DarkStriker/piotrhallman.jpg" alt="" /></span> </td> </tr> <tr> <td>Erik Perez vs Bryan Caraway</td> <td> <select> <option value="Erik Perez">Erik Perez</option> <option value="Bryan Caraway">Bryan Caraway</option> </select> <span class="remove"><img src="http://img.photobucket.com/albums/v609/DarkStriker/erikperez.jpg" alt="" /> <b>VS</b> <img src="http://img.photobucket.com/albums/v609/DarkStriker/bryancaraway.png" alt="" /></span> </td> </tr> <tr> <td>Yaotzin Meza vs Sergio Pettis</td> <td> <select> <option value="Yaotzin Meza">Yaotzin Meza</option> <option value="Sergio Pettis">Sergio Pettis</option> </select> <span class="remove"><img src="http://img.photobucket.com/albums/v609/DarkStriker/yaotzin-meza.jpg" alt="" /> <b>VS</b> <img src="http://img.photobucket.com/albums/v609/DarkStriker/sergiopettis_sergio.jpg" alt="" /></span> </td> </tr> <tr> <td>Bobby Voelker vs Lance Benoist</td> <td> <select> <option value="Bobby Voelker">Bobby Voelker</option> <option value="Lance Benoist">Lance Benoist</option> </select> <span class="remove"><img src="http://img.photobucket.com/albums/v609/DarkStriker/Bobby-Voelker.jpg" alt="" /> <b>VS</b> <img src="http://img.photobucket.com/albums/v609/DarkStriker/lancebenoist.jpg" alt="" /></span> </td> </tr> <tr> <td>Scott Jorgensen vs Danny Martinez</td> <td> <select> <option value="Scott Jorgensen">Scott Jorgensen</option> <option value="Danny Martinez">Danny Martinez</option> </select> <span class="remove"><img src="http://img.photobucket.com/albums/v609/DarkStriker/scott_Jorgensen1.jpg" alt="" /> <b>VS</b> <img src="http://img.photobucket.com/albums/v609/DarkStriker/danny_martinez.jpg" alt="" /></span> </td> </tr> <tr> <td>Jon Tuck vs Jake Lindsey</td> <td> <select> <option value="Jon Tuck">Jon Tuck</option> <option value="Jake Lindsey">Jake Lindsey</option> </select> <span class="remove"><img src="http://img.photobucket.com/albums/v609/DarkStriker/jon-tuck.jpg" alt="" /> <b>VS</b> <img src="http://img.photobucket.com/albums/v609/DarkStriker/jake_lindsey.jpg" alt="" /></span> </td> </tr> <tr> <td>Patrick Cummins vs Roger Narvaez</td> <td> <select> <option value="Patrick Cummins">Patrick Cummins</option> <option value="Roger Narvaez">Roger Narvaez</option> </select> <span class="remove"><img src="http://img.photobucket.com/albums/v609/DarkStriker/patrick-cummins-strikeforce.jpg" alt="" /> <b>VS</b> <img src="http://img.photobucket.com/albums/v609/DarkStriker/Roger-Narvaez.jpg" alt="" /></span> </td> </tr>
<tr> <center> <td colspan='2' id='send_form' style="display: table-cell"><button type='submit'>Submit Picks</button></td> </tr> </table> </center> </form>
<style type='text/css'> /* <![CDATA[ */ #form_spec td { text-align: center; }
#form_spec tr td:first-child, #form_spec select { display: none; }
#form_spec img { opacity: 0.5; cursor: pointer; }
#form_spec input, #form_spec textarea { width: 500px; } /* ]]> */ </style>
<script type='text/javascript'> var form_script = { form_id: $('#generic_form'), status_id: $('#send_form'), specific_id: $('#form_spec'), enable_guests: false, pm: { enabled: false, // Does not work for guests user: "MMASCC", // 1 user only title: "New Form From {{user_name}}", content: "{{form}}" }, topic: { enabled: true, forum_id: 4046632, // 1 id only title: "{{1}} From {{user_name}}", description: "", content: "{{form}}" }, statuses: { not_logged_in: "You must be registered and signed in to use this feature.", // Used if enable_guests: false first: "Coagulating picks...", second: "Sending picks...", done: "Your picks have been submitted, Good Luck!" }, submission_formatting: { separator: ' ',
before_all: '', after_all: '',
before_question: '[b]', after_question: '[/b]',
before_response: '[i]', after_response: '[/i]' }, possible_elements: 'input, textarea, select' // For the second column of table; .val() must work on it }; </script>
<script type='text/javascript' src='http://z3.ifrm.com/313/104/0/p366373/form_script.js'></script>
<script type="text/javascript"> //<![CDATA[ $('#form_spec td').each(function () { $(this).find('img').click(function () { $(this).parents('td').find('img').css('opacity', '0.5'); $(this).css('opacity', '1.0'); var clicked = $(this).index();
if ($(this).index() === 2) { $(this).parents('td').find('select option:eq(' + parseInt(clicked - 1, 10) + ')').prop('selected', true); } else { $(this).parents('td').find('select option:eq(' + clicked + ')').prop('selected', true); } }); });
form_script.form_id.find('button:last').click(function (e) { e.returnValue = e.preventDefault && e.preventDefault() ? false : false; $('span.remove').remove(); form_script.form_id.submit(); }); //]]> </script>
|
|
|
| |
|
MMASCC
|
Jun 7 2014, 12:17 PM
Post #8
|
- Posts:
- 116
- Group:
- Members
- Member
- #615,421
- Joined:
- April 15, 2014
- My Board URL
- www.forums.mmasportscards.com
|
Wow Cory!!!
Not only did that seem to work, but I love the effect you made where the images are greyed out until you select them, and then when the post submits it comes up as text not images, very nifty. Im going to play with it more to make sure there are no issues, but you are amazing!!!
Thanks again, you're my hero!!!
Edited by MMASCC, Jun 7 2014, 01:57 PM.
|
|
|
| |
| 1 user reading this topic (1 Guest and 0 Anonymous)
|