Custom Thread Fields Dependencies

[RateU]

XThreads 1.6* has many new features. Some of them are Input Formatter and Custom Modify Error. Maybe we can use it for creating thread fields dependencies.

The basic idea is, display a custom fields if a user selects a specific value from a lists.
There are too many possibilities for this (very depends on what we want to do with our form), so just modify it as our needs.

In this very simple example, we will:

• Display textbox 1 if a user selects List #1 value from a listbox, and force the user to write something in the textbox. Whatever user entered here, the textbox value will be saved only if the user select List #1 from the listbox. Only display this thread fields rows on showthread if there is value supplied for this fields.
• Display textbox 2 if a user select List #2 value from the listbox, and force the user to write something in the textbox. Whatever user entered here, the textbox value will be saved only if the user select List #2 from the listbox. Only display this thread fields rows on showthread if there is value supplied for this fields.
• Do not display those textboxes if the user selects List #3 value from the listbox, and do not force the user to write something on those textboxes. No value will be saved from the textbox 1 and the textbox 2. Do not display those fields rows on showthread page.
  

First, we need to create our list:

• Title: Listbox
• Key: sb
• Input Field Type: Listbox
• Display Order: 1
• Editable by / Required Field?: Everyone (required)
• Values List:
  
  Code:

  1{|}List #1 2{|}List #2 3{|}List #3

  ---

• Use Custom Input HTML: Yes
• Input Field HTML:
  
  HTML Code

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

  ---

  We only need to put an id for this field (look at the newthread and editpost_first templates).

• Formatting Map List:
  • Value: 1 Displayed Output: List #1
  • Value: 2 Displayed Output: List #2
  • Value: 3 Displayed Output: List #3
    
  Code:

  1{|}List #1 2{|}List #2 3{|}List #3

  ---

• Underlying Data Type: Integer (unsigned, usually 32 bit)
  

Then create a textbox:
This textbox will be displayed if the user select List #1 from our Listbox above.

• Title: Textbox List #1 Selected
• Key: tb1
• Input Field Type: Textbox
• Display Order: 2
• Editable by / Required Field?: Everyone
  We need to make this field as a non required field. We'll make it as required field only if the user select List #1 from the listbox (look at the Custom Modify Error setting).
• Input Formatter:
  
  Code:

  <if $mybb->input['xthreads_sb'] == 1 then>{VALUE}</if>

  ---

  We only save the value entered in this textbox if the user select List #1 from our listbox above. If the user selects other values, whatever user enters here won't be saved.

• Custom Modify Error:
  
  Code:

  <if $mybb->input['xthreads_sb'] == 1 && !{VALUE} then>You're selecting List #1. Please write something here.</if>

  ---

  It makes this field is required if the user selects List #1 from the listbox.
  Basically, we can use the Custom Modify Error feature for custom fields validation.

• Blank Replacement Value:
  
  Javascript Code

  <script type="text/javascript"> <!-- $('xt_tb1').style.display = 'none'; //--> </script>

  ---

  Because we don't hide this field from the showthread, so we need to hide it if there is no value supplied for this field (look at the showthread_threadfield_row template).
  There are some ways to do this. We can use Template Conditional to manipulate it directly in our template.
  

Then create other textbox:
This textbox will be displayed if the user select List #2 from our Listbox above. The settings are similar to the textbox above.

• Title: Textbox List #2 Selected
• Key: tb2
• Input Field Type: Textbox
• Display Order: 3
• Editable by / Required Field?: Everyone
• Input Formatter:
  
  Code:

  <if $mybb->input['xthreads_sb'] == 2 then>{VALUE}</if>

  ---

• Custom Modify Error:
  
  Code:

  <if $mybb->input['xthreads_sb'] == 2 && !{VALUE} then>You're selecting List #2. Please write something here.</if>

  ---

• Blank Replacement Value:
  
  Javascript Code

  <script type="text/javascript"> <!-- $('xt_tb2').style.display = 'none'; //--> </script>

  ---

Then create new templates in our Global Templates (use template prefix if needed):

• newthread and editpost_first
  We need to put our javascript code to hide/show the textbox 1 and textbox 2 based on user selection from the listbox in these templates. Based on the example above, we can put this js code after the threadfields defined in these template:
  
  Javascript Code

  1 2 3 4 5 6 7 8 9

  <script type="text/javascript"> <!-- var sb = $('xtsb_sb'); (sb.onchange = function() { $('xt_tb1').style.display = (sb.options[sb.selectedIndex].value=='1'?'':'none'); $('xt_tb2').style.display = (sb.options[sb.selectedIndex].value=='2'?'':'none'); })(); //--> </script>

  ---

  I'm totally zero with js. Maybe you need to write your own function for your purpose.

• post_threadfields_inputrow
  
  HTML Code

  <tr class="xthreads_inputrow" id="xt_{$tf['field']}"> <td class="{$altbg}" width="20%"><strong>{$tf['title']}</strong></td> <td class="{$altbg}">{$inputfield}<small style="display: block;">{$tf['desc']}</small></td> </tr>

  ---

  Basically, we need to put an id to the thread fields rows in newthread/editpost pages.

• showthread_threadfield_row
  
  HTML Code

  <tr id="xt_{$tf['field']}"><td class="{$bgcolor}" width="15%"><strong>{$title}</strong></td><td class="{$bgcolor}">{$value}</td></tr>

  ---

  Basically, we need to put an id to the thread fields rows in showthread page (look at the Blank Replacement Value setting for the textbox 1 and the textbox 2).
  

That is our very simple example for creating XThreads custom thread fields dependencies.

If there is something wrong with the code and how this is implemented, please let me know. I'm still learning.

[wethegreenpeople]

Everything seems to work perfectly, except the javascript... It won't hide the textboxes. I don't understand what I'm doing wrong....

EDIT: Hmm, I fixed it. Something went wrong when I copy pasted it. Don't know how...

[leefish]

Hi, I used this modification in my own site, and I am very pleased with it, but i noticed that my "optional" fields were visible on page load. I am not sure if I am doing something wrong, but I fixed it by adding a script onload. This is the code snippet at the top of my new thread template:  

Code:

1 2 3 4 5 6 7

<script> window.onload = init; function init() { $('xt_tb1').hide(); $('xt_tb2').hide(); } </script>

---

The ones I want to appear on change are hidden on load. Thanks a lot for the tutorial.

[ZiNgA BuRgA]

^ Thanks for sharing.  One improvement, use the DOM ready listener rather than window.onload (which limits you to only one listener on the page), eg:

Javascript Code

document.observe("dom:loaded", function() { $('xt_tb1').hide(); $('xt_tb2').hide(); });

---

[leefish]

Thank you for the better JavaScript snippet -  I am using that now.