MyBB Hacks

This is something I did a long time ago with PrototypeJS; its a bit clunky, and its just a show hide, so a view-source or inspect-element will show all the stuff, but its nice for candy.

Situation: You have a select box and you want that on newthread when option 1 is selected a certain text shows, on option2, another text shows.

Solution: You need to set up your custom field correctly and add a script to your new thread.

Custom field settings

Title : Give it a title

Key: Give it a key (keep it simple, it just makes the typing shorter in the script bits Smile

). For this example I will call it contus_select

Input Field Type : listbox

Input Formatter

Code:

			{VALUE}

Values List:

Code:

			0{|}
1{|}Option 1
2{|}Option 2

Using the numbers like that makes it a lot easier to access the value in your js and its good to do it that way anyway for other reasons.

Input Field HTML :

Code:

			<select style="{WIDTH_CSS}" id="xtrrr_{KEY}"{NAME_PROP}{MULTIPLE_PROP}{HEIGHT_PROP_SIZE}{TABINDEX_PROP}>
	<![ITEM[<option value="{VALUE}"{STYLE}{SELECTED}>{LABEL}</option>]]>
</select>

Save the custom thread field.

In your newthread template
Add the HTML for the two areas you want to have show on the select change.

Code:

			<div id="opt1" style="display:none;">You chose option one</div>
<div id="opt2" style="display:none;">You chose option two</div>

at the bottom of the template, right before the </body> tag

Code:

			<script>
$(document).ready(function() {
    var typeSelector = $('#xtrrr_contus_select');
    var areaOne = $('#opt1');
    var areaTwo = $('#opt2');
    typeSelector.change(function(){
        if (typeSelector.val() === '1') {
            areaOne.show(); 
	    areaTwo.hide(); 
        }
	if (typeSelector.val() === '2') {
	    areaOne.hide(); 
            areaTwo.show(); 
        }
    });
});
</script>

Ta-da ?

leefish