custom fields on order form conditional logic (hide / show options)

[wulfric]

I wish to put a dropdown option, on order form, like this:

 

"How did you hear about us?"

 

1. website

2. search engine

3. other

 

and if user selects other, an input field appears so they can type.

 

I was thinking, maybe I can have the box "Show on Order Form" checked on the admin side, and on public it's hidden but appears when someone choose option 3 other?

 

---

I found a similar post, many years ago someone asked very similar question:

https://forum.whmcs.com/showthread.php?39873-Hiding-Configurable-Options

[brian!]

I wish to put a dropdown option, on order form, like this:

"How did you hear about us?"

that got me all nostalgic... there's a report that can setup the client custom fields for you...

 

http://docs.whmcs.com/Reports#Client_Sources

 

and if user selects other, an input field appears so they can type.

I was thinking, maybe I can have the box "Show on Order Form" checked on the admin side, and on public it's hidden but appears when someone choose option 3 other?

it would need some js to trigger the visibility on the "other" field.. I could imagine it to be a pain to code as you'd have to intercept the foreach loop and modify the code generated by WHMCS... by no means impossible, just awkward... I assume you'd also have to totally hide both fields in the client area because, once completed during signup, they won't need to edit the fields.

 

if it were me, i'd just add both fields visible on the order form and make sure the 'other' text field wasn't ticked as required.

[brian!]

if it were me, i'd just add both fields visible on the order form and make sure the 'other' text field wasn't ticked as required.

if you *really* want to do this, then one way would be to modify checkout.tpl... for this demonstration, i'm going to use standard_cart, but the principle should work on other orderform templates (untested!)...

 

firstly, you need to add the js to the template - i'll add it to checkout.tpl (before the first div) as that's the only page we'll need to use this code on...

 

<script>

function wherefindus(nameSelect)
{
   console.log(nameSelect);
   if(nameSelect){
       whereoptionValue = document.getElementById("whereoption").value;
       if(whereoptionValue == nameSelect.value){
           document.getElementById("wherediv").style.display = "block";
       }
       else{
           document.getElementById("wherediv").style.display = "none";
       }
   }
   else{
       document.getElementById("wherediv").style.display = "none";
   }
}

</script>

and then later on in the template, we would change the {if $customfields} code block from...

 

                    {if $customfields}
                       <div class="sub-heading">
                           <span>{$LANG.orderadditionalrequiredinfo}</span>
                       </div>
                       <div class="field-container">
                           <div class="row">
                               {foreach $customfields as $customfield}
                                   <div class="col-sm-6">
                                       <div class="form-group">
                                           <label for="customfield{$customfield.id}">{$customfield.name}</label>
                                           {$customfield.input}
                                           {if $customfield.description}
                                               <span class="field-help-text">
                                                   {$customfield.description}
                                               </span>
                                           {/if}
                                       </div>
                                   </div>
                               {/foreach}
                           </div>
                       </div>
                   {/if}

to...

 

                    {if $customfields}
                       <div class="sub-heading">
                           <span>{$LANG.orderadditionalrequiredinfo}</span>
                       </div>
                       <div class="field-container">
                           <div class="row">
                               {foreach $customfields as $customfield}
                                   {if $customfield.id neq '7'}
                                   <div class="col-sm-6">
                                       <div class="form-group">
                                           <label for="customfield{$customfield.id}">{$customfield.name}</label>
                                               {if $customfield.id eq '6'}{$customfield.input|replace:'id="customfield6"':'id="customfield6" onchange="wherefindus(this); "'|replace:'option value="Other"':'option id="whereoption" value="Other"'}{else}{$customfield.input}{/if}
                                               {if $customfield.description}
                                                   <span class="field-help-text">
                                                       {$customfield.description}
                                                   </span>
                                               {/if}
                                       </div>
                                   </div>
                                   {/if}
                               {/foreach}
                               {foreach $customfields as $customfield}
                                   {if $customfield.id eq '7'}
                                   <div class="col-sm-6" id="wherediv" style="display:none;">
                                       <div class="form-group">
                                           <label for="customfield{$customfield.id}">{$customfield.name}</label>
                                               {$customfield.input|replace:"/>":" placeholder=\"`$customfield.description`\" />"}
                                       </div>
                                   </div>
                                   {/if}
                               {/foreach}
                           </div>
                       </div>
                   {/if}

in this example, customfield #6 is the dropdown, and #7 is the hidden text form field for "Other" and i've used the previous mentioned report to setup the client custom fields... your customfield values will almost certainly be different.

 

for simplicity of the explanation, i'm using two foreach loops - one to generate all the customfields (apart from #7), and another one to show just #7 - though I could equally have just hard-coded the hidden form field, or make the existing foreach loop more conditional and compact...

 

                    {if $customfields}
                       <div class="sub-heading">
                           <span>{$LANG.orderadditionalrequiredinfo}</span>
                       </div>
                       <div class="field-container">
                           <div class="row">
                               {foreach $customfields as $customfield}
                                   <div class="col-sm-6" {if $customfield.id eq '7'} id="wherediv" style="display:none;"{/if}>
                                       <div class="form-group">
                                           <label for="customfield{$customfield.id}">{$customfield.name}</label>
                                               {if $customfield.id eq '6'}{$customfield.input|replace:'id="customfield6"':'id="customfield6" onchange="wherefindus(this); "'|replace:'option value="Other"':'option id="whereoption" value="Other"'}{elseif $customfield.id eq '7'}{$customfield.input|replace:"/>":" placeholder=\"`$customfield.description`\" />"}{else}{$customfield.input}{/if}
                                               {if $customfield.description and $customfield.id neq '7'}
                                                   <span class="field-help-text">
                                                       {$customfield.description}
                                                   </span>
                                               {/if}
                                       </div>
                                   </div>
                               {/foreach}
                           </div>
                       </div>
                   {/if}

the choice is yours - the second is more efficient, but you may get confused with the coding when adding additional options - you may also need to adjust the sort order of the fields...

 

at checkout, customers will see something like this...

 

 

a dropdown list containing the options generated by the report - though these could easily be modified in the custom field setup.

the dropdown works normally for most selections, but if they choose other, the hidden div is revealed that displays customfield #7 (the "Other" text box)...

 

 

if you want to watch it in action, here's a quick demo video -

 

as I said previously, both custom fields would be visible in the profile page of the client area - but they'd be easily hidden/readonly by a template edit to clientareadetails.tpl or an action hook to modify the customfields array.

 

on the cart side, you could use action hooks for tweaking the customfields array, but I don't think you could code an entire solution purely with hooks without the need for some template editing - and the hook code would be much longer than just the one Smarty {if} statement that the above solution basically is.