Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multiquote (on) Multiquote (off)
Add Reply
[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
Member
[ *  * ]
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.
Offline Profile Quote Post Goto Top
 
MMASCC
Member
[ *  * ]
Anyone at all?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
I think the primary issue is Reid's code does not support the type of input you're trying to use.
Offline Profile Quote Post Goto Top
 
MMASCC
Member
[ *  * ]
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.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
You could use a drop down menu instead of radio inputs, as the code example applies.
Offline Profile Quote Post Goto Top
 
MMASCC
Member
[ *  * ]
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.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
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>
Offline Profile Quote Post Goto Top
 
MMASCC
Member
[ *  * ]
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.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards - Theme & Code Support · Next Topic »
Add Reply