MyBB Hacks

MyBB Hacks > MyBB Plugins > XThreads > Using Conditionals For Form Wizard
Full Version: Using Conditionals For Form Wizard
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

RateU

02-28-2011, 08:10 AM
Requirements:
This is an idea for creating a step by step form (Form Wizard).
The basic idea is, we hide some custom thread fields, and display it in some certain conditions.

For this example, we will use this conditions:
[attachment=449]
More info about this conditions:
http://mybbhacks.zingaburga.com/showthread.php?tid=740

Custom Thread Fields Settings:
  1. Attending - Ceremony
    • Title: Attending - Ceremony
      Modify it as our needs. We use variable in Display Format. So, if we change the title here, the title in Display Format will be updated automatically.
    • Key: att1
    • Description: If you will be attending ceremony, please choose Yes. Otherwise, please choose No.
      Modify it as our needs.
    • Applicable Forums: select in which forum this form should be applied.
    • Input Field Type: Option Buttons
    • Values List:

      Code: 
      Yes
No

    • Editable by / Required Field?: Everyone
      Although it is not a required fields, we will try to "force" user to choose the options before continuing to the next question.
    • Display Format:

      HTML Code 
      <div>{$GLOBALS['threadfields_x']['att1']['title']}: {VALUE}</div>

      Like said above, we use variable for the fields title. I don't know what is the shortcut for this in Display Format.

    • Settable Value Permissions:
      • Value: leave it blank
      • Editable by Groups: Administrators

        Code: 
        {|}4

      New feature in XThreads 1.41. Because this fields is not a required field, so we need to "hide" the (Not Set) value to users.
    • Hide Input Field: Yes
      We will use conditional for displaying this field in newthread template.
  2. # of Guests - Ceremony
    • Title: # of Guests - Ceremony
    • Key: fw_g1
    • Description: Please select the number of guests from the option list.
    • Applicable Forums: select in which forum this form should be applied.
    • Input Field Type: Option Buttons
    • Values List:

      Code: 
      1
2

      Modify it as our needs.

    • Editable by / Required Field?: Everyone
    • Display Format:

      HTML Code 
      <div>{$GLOBALS['threadfields_x']['fw_g1']['title']}: {VALUE}</div>

    • Settable Value Permissions:
      • Value: leave it blank
      • Editable by Groups: Administrators

        Code: 
        {|}4

    • Hide Input Field: Yes
  3. Attending - Lunch
    • Title: Attending - Ceremony
    • Key: att2
    • Description: If you will be joining us for lunch, please choose Yes. Otherwise, please choose No.
    • Applicable Forums: select in which forum this form should be applied.
    • Input Field Type: Option Buttons
    • Values List:

      Code: 
      Yes
No

    • Editable by / Required Field?: Everyone
    • Display Format:

      HTML Code 
      <div>{$GLOBALS['threadfields_x']['att2']['title']}: {VALUE}</div>

    • Settable Value Permissions:
      • Value: leave it blank
      • Editable by Groups: Administrators

        Code: 
        {|}4

    • Hide Input Field: Yes
  4. # of Guests - Lunch
    • Title: # of Guests - Lunch
    • Key: fw_g2
    • Description: Please select the number of guests from the option list.
    • Applicable Forums: select in which forum this form should be applied.
    • Input Field Type: Option Buttons
    • Values List:

      Code: 
      1
2

      Modify it as our needs.

    • Editable by / Required Field?: Everyone
    • Display Format:

      HTML Code 
      <div>{$GLOBALS['threadfields_x']['fw_g2']['title']}: {VALUE}</div>

    • Settable Value Permissions:
      • Value: leave it blank
      • Editable by Groups: Administrators

        Code: 
        {|}4

    • Hide Input Field: Yes
  5. Special Diet
    • Title: Special Diet
    • Key: fw_d1
    • Description: If you have a special dietary requirements, please choose Yes. Otherwise, please choose No.
    • Applicable Forums: select in which forum this form should be applied.
    • Input Field Type: Option Buttons
    • Values List:

      Code: 
      Yes
No

    • Editable by / Required Field?: Everyone
    • Display Format:

      HTML Code 
      <div>{$GLOBALS['threadfields_x']['fw_d1']['title']}: {VALUE}</div>

    • Settable Value Permissions:
      • Value: leave it blank
      • Editable by Groups: Administrators

        Code: 
        {|}4

    • Hide Input Field: Yes
  6. Diet Requirements
    • Title: Diet Requirements
    • Key: fw_d2
    • Description: Please indicate what is your requirements are.
    • Applicable Forums: select in which forum this form should be applied.
    • Input Field Type: Multiline Textbox
    • Editable by / Required Field?: Everyone
    • Display Parsing: Plain text with newlines
    • Display Format:

      HTML Code 
      <div>{$GLOBALS['threadfields_x']['fw_d2']['title']}:<div><div>{VALUE}</div>

    • Hide Input Field: Yes
  7. Attending - Party
    • Title: Attending - Party
    • Key: att3
    • Description: If you will be attending party, please select Yes. Otherwise, please select No.
    • Applicable Forums: select in which forum this form should be applied.
    • Input Field Type: Option Buttons
    • Values List:

      Code: 
      Yes
No

    • Editable by / Required Field?: Everyone
    • Display Format:

      HTML Code 
      <div>{$GLOBALS['threadfields_x']['att3']['title']}: {VALUE}</div>

    • Settable Value Permissions:
      • Value: leave it blank
      • Editable by Groups: Administrators

        Code: 
        {|}4

    • Hide Input Field: Yes
  8. # of Guests - Party
    • Title: # of Guests - Party
    • Key: fw_g3
    • Description: Please select the number of guests from the option list.
    • Applicable Forums: select in which forum this form should be applied.
    • Input Field Type: Option Buttons
    • Values List:

      Code: 
      1
2

      Modify it as our needs.

    • Editable by / Required Field?: Everyone
    • Display Format:

      HTML Code 
      <div>{$GLOBALS['threadfields_x']['fw_g3']['title']}: {VALUE}</div>

    • Settable Value Permissions:
      • Value: leave it blank
      • Editable by Groups: Administrators

        Code: 
        {|}4

    • Hide Input Field: Yes



Custom Template:
  1. fw_newthread

    HTML Code 
    <html>
<head>
<title>{$lang->newthread_in}</title>
{$headerinclude}
<script type="text/javascript" src="jscripts/post.js?ver=1400"></script>
</head>
<body>
{$header}
<br class="clear" />
<if $mybb->input['message'] then>
{$preview}
</if>
<div style="display: none;">{$thread_errors}</div>
{$attacherror}
<form action="newthread.php?fid={$fid}&amp;processed=1" method="post" enctype="multipart/form-data" name="input">
	<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-bottom: 0px;">
		<tr>
			<td class="thead"><strong>{$lang->post_new_thread}</strong></td>
		</tr>
	</table>
	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if $subject then> display: none;</if>">
		<tr>
			<td class="trow2" width="20%">
				<strong>{$lang->thread_subject}</strong>
			</td>
			<td class="trow2">
				<input type="text" class="textbox" name="subject" size="40" maxlength="85" value="{$subject}" tabindex="1" /><small style="display: block;">Please fill the Subject</small>
			</td>
		</tr>
	</table>	
	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if !$subject || $GLOBALS['threadfields']['att1'] then> display: none;</if>">
		{$tfinputrow['att1']}
	</table>	
	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if $mybb->input['xthreads_att1'] != 'Yes' || $mybb->input['xthreads_fw_g1'] then> display: none;</if>">
		{$tfinputrow['fw_g1']}
	</table>	
	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if ($mybb->input['xthreads_att1'] != 'No' && !$mybb->input['xthreads_fw_g1']) || $mybb->input['xthreads_att2'] then> display: none;</if>">
		{$tfinputrow['att2']}
	</table>	
	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if $mybb->input['xthreads_att2'] != 'Yes' || $mybb->input['xthreads_fw_g2'] then> display: none;</if>">
		{$tfinputrow['fw_g2']}
	</table>	
	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if $mybb->input['xthreads_att2'] == 'No' || !$mybb->input['xthreads_fw_g2'] || $mybb->input['xthreads_fw_d1'] then> display: none;</if>">
		{$tfinputrow['fw_d1']}
	</table>
	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if $mybb->input['xthreads_fw_d1'] != 'Yes' || $mybb->input['xthreads_fw_d2'] then> display: none;</if>">
		{$tfinputrow['fw_d2']}
	</table>
	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if ($mybb->input['xthreads_att2'] != 'No' && $mybb->input['xthreads_fw_d1'] != 'No' && !$mybb->input['xthreads_fw_d2']) || $mybb->input['xthreads_att3'] then> display: none;</if>">
		{$tfinputrow['att3']}
	</table>
	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if $mybb->input['xthreads_att3'] != 'Yes' || $mybb->input['xthreads_fw_g3'] then> display: none;</if>">
		{$tfinputrow['fw_g3']}
	</table>	
	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if $mybb->input['xthreads_att3'] != 'No' && !$mybb->input['xthreads_fw_g3'] then> display: none;</if>">
		{$extra_threadfields}
		<tr>
			<td class="trow2" valign="top" width="20%"><strong>{$lang->your_message}</strong>{$smilieinserter}</td>
			<td class="trow2">
				<textarea name="message" id="message" rows="20" cols="70" tabindex="2">{$message}</textarea>
				{$codebuttons}
				{$multiquote_external}
			</td>
		</tr>
	</table>
	<br />
	<div style="text-align:center">
		<if $mybb->input['xthreads_att3'] != 'No' && !$mybb->input['xthreads_fw_g3'] then>
			<input type="submit" class="button" name="previewpost" value="Next" tabindex="5" />
		<else>
			<input type="submit" class="button" name="submit" value="Submit" tabindex="4" accesskey="s" />
			<input type="submit" class="button" name="previewpost" value="Preview" tabindex="5" />
		</if>
	</div>
	<input type="hidden" name="action" value="do_newthread" />
	<input type="hidden" name="posthash" value="{$posthash}" />
	<input type="hidden" name="attachmentaid" value="" />
	<input type="hidden" name="attachmentact" value="" />
	<input type="hidden" name="quoted_ids" value="{$quoted_ids}" />
	<input type="hidden" name="tid" value="{$tid}" />
	{$editdraftpid}
</form>
{$forumrules}
{$footer}
</body>
</html>

    We use the Preview Post button for the Next button.

  2. fw_postbit_first

    HTML Code 
    {$ignore_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="{$post_extra_style} {$post_visibility}" id="post_{$post['pid']}">
	<tbody>
		<tr>
			<td class="tcat">
				<div class="float_left smalltext">
					{$post['postdate']}, {$post['posttime']} <span id="edited_by_{$post['pid']}">{$post['editedmsg']}</span>
				</div>
				{$post['posturl']}
			</td>
		</tr>

		<tr>
			<td class="trow1 {$unapproved_shade}" >
				<table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
					<tr>
						<td class="post_avatar" width="1" style="{$post['avatar_padding']}">
							{$post['useravatar']}
						</td>
						<td class="post_author">
							<strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
							<span class="smalltext">
								{$post['usertitle']}<br />
								{$post['userstars']}
								{$post['groupimage']}
							</span>
						</td>
						<td class="smalltext post_author_info" width="165">
							{$post['user_details']}
						</td>
					</tr>
				</table>
			</td>
		</tr>

		<tr>
			<td class="trow2 post_content {$unapproved_shade}" >
				<span class="smalltext"><strong>{$post['icon']}{$post['subject']} {$post['subject_extra']}</strong></span>

				<div class="post_body" id="pid_{$post['pid']}">
					<div><strong>Subject:</strong> {$post['subject']}</div>
					{$GLOBALS['threadfields']['att1']}
					{$GLOBALS['threadfields']['fw_g1']}
					{$GLOBALS['threadfields']['att2']}
					{$GLOBALS['threadfields']['fw_g2']}
					{$GLOBALS['threadfields']['fw_d1']}
					{$GLOBALS['threadfields']['fw_d2']}
					{$GLOBALS['threadfields']['att3']}
					{$GLOBALS['threadfields']['fw_g3']}
					{$post['message']}
				</div>
				{$post['attachments']}
				{$post['signature']}

				<div class="post_meta" id="post_meta_{$post['pid']}">
				{$post['iplogged']}
				</div>
			</td>
		</tr>

		<tr>
			<td class="trow1 post_buttons {$unapproved_shade}" style="">
				<div class="author_buttons float_left">
					{$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}
				</div>
				<div class="post_management_buttons float_right">{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}
				</div>
			</td>
		</tr>
	</tbody>
</table>

  3. fw_editpost_first

    HTML Code 
    <html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->edit_post}</title>
{$headerinclude}
<script type="text/javascript" src="jscripts/post.js?ver=1400"></script>
</head>
<body>
{$header}
{$preview}
{$post_errors}
{$attacherror}
<form action="editpost.php" method="post" name="editpost">
<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" colspan="3"><strong>{$lang->delete_post}</strong></td>
</tr>
<tr>
<td class="trow1" style="white-space: nowrap"><input type="checkbox" class="checkbox" name="delete" value="1" tabindex="9" /> <strong>{$lang->delete_q}</strong></td>
<td class="trow1" width="100%">{$lang->delete_1}<br /><span class="smalltext">{$lang->delete_2}</span></td>
<td class="trow1"><input type="submit" class="button" name="submit" value="{$lang->delete_now}" tabindex="10" /></td>
</tr>
</table>
<input type="hidden" name="action" value="deletepost" />
<input type="hidden" name="pid" value="{$pid}" />
</form>
<br />
<form action="editpost.php?pid={$pid}&amp;processed=1" method="post" enctype="multipart/form-data" name="input">
<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" colspan="2"><strong>{$lang->edit_post}</strong></td>
</tr>
{$loginbox}
<tr>
<td class="trow2"><strong>{$lang->subject}</strong></td>
<td class="trow2">{$prefixselect}<input type="text" class="textbox" name="subject" size="40" maxlength="85" value="{$subject}" tabindex="1" /></td>
</tr>
{$extra_threadfields}
{$tfinputrow['att1']}
{$tfinputrow['fw_g1']}
{$tfinputrow['att2']}
{$tfinputrow['fw_g2']}
{$tfinputrow['fw_d1']}
{$tfinputrow['fw_d2']}
{$tfinputrow['att3']}
{$tfinputrow['fw_g3']}
{$posticons}
<tr>
<td class="trow2" valign="top"><strong>{$lang->your_message}:</strong><br /><div style="text-align: center;">{$smilieinserter}</div></td>
<td class="trow2">
<textarea name="message" id="message" rows="20" cols="70" tabindex="3">{$message}</textarea>
{$codebuttons}
</td>
</tr>
<tr>
<td class="trow1" valign="top"><strong>{$lang->post_options}</strong></td>
<td class="trow1"><span class="smalltext">
<label><input type="checkbox" class="checkbox" name="postoptions[signature]" value="1" tabindex="6"{$postoptionschecked['signature']} /> {$lang->options_sig}</label>
{$disablesmilies}</span>
</td>
</tr>
{$subscriptionmethod}
{$pollbox}
</table>
{$attachbox}
<br />
<div align="center"><input type="submit" class="button" name="submit" value="{$lang->update_post}" tabindex="3" accesskey="s" />  <input type="submit" class="button" name="previewpost" value="{$lang->preview_post}" tabindex="4" /></div>
<input type="hidden" name="action" value="do_editpost" />
<input type="hidden" name="posthash" value="{$posthash}" />
<input type="hidden" name="attachmentaid" value="" />
<input type="hidden" name="attachmentact" value="" />
</form>
{$footer}
</body>
</html>



Additional Info:
  • What conditionals we should use, depends on what conditions should be applied for each custom thread fields.
  • This form wizard doesn't use Javascript.
  • The step by step form works in newthread only.
  • The step by step is "breakable" with direct URL.

Well, that is the idea. Not quite sure whether this idea is OK or not Biggrin

Live Demo:
http://www.14.mynie.co.cc/newthread.php?fid=49
We can't submit the form in the demo forum, because I've removed the Captcha from the template. But we can preview it.

ZiNgA BuRgA

02-28-2011, 11:51 AM
Very clever idea Biggrin

leefish

02-28-2011, 03:03 PM
RateU, I love you Smile

RateU

03-01-2011, 06:13 AM
(02-28-2011 11:51 AM)ZiNgA BuRgA Wrote: [ -> ]Very clever idea Biggrin

I just try for applying your suggestion, Yumi Biggrin :
(02-27-2011 09:08 AM)ZiNgA BuRgA Wrote: [ -> ]you'll need to use conditionals to check if it's Yes/No

Unfortunately, because I have a very very limited knowledge (and logic), I can't make it "perfect" Oops

(02-28-2011 03:03 PM)leefish Wrote: [ -> ]RateU, I love you Smile
Biggrin

Thanks Smile

ZiNgA BuRgA

03-01-2011, 10:23 AM
I haven't tried it, but it sounds quite good, and probably the best you could do with the limited ability of XThreads.
The only real issue is that you cannot enforce values not being set.

RateU

03-02-2011, 04:11 AM
Could you please explain it more, Yumi?
I'm sorry, but I don't understand Oops

ZiNgA BuRgA

03-02-2011, 10:24 AM
The wizard hides certain elements depending on what's been selected before.  Unfortunately, this isn't enforced by any server side script, so if a user were to forge a request, they'd be able to bypass the restriction.

Perhaps not really a big issue though - certainly, your average user isn't going to do this, and you could have conditionals on the output side to try to enforce any restrictions.

If you don't really get it, don't worry about it - it's not that big of an issue IMO Smile

RateU

03-04-2011, 05:48 AM
Ah... I think that is what I meant by this, Yumi:
(02-28-2011 08:10 AM)RateU Wrote: [ -> ][*]The step by step is "breakable" with direct URL.

If a user put the input value directly in URL, they can "jump" or "break" the step by step form Biggrin
It is because I have a very limited knowledge so the form not "perfect", Yumi Oops
MyBB Hacks > MyBB Plugins > XThreads > Using Conditionals For Form Wizard
Reference URL's