Conditional form inputs based on checkbox or select

[7ammer]

It would be great to have conditional input fields based on a checkbox's value or a select's value.
Form inputs could be simply shown/hidden with a bit of css (display:none / display:block).

[ghost]

@7ammer can you make screen how do you see it

[7ammer]

Hi @Aios. Here you can see a conditional form. The user clicks the button and a form shows.
The picture below shows yes / no buttons. Other inputs could be used: select dropdowns, radio buttons or checkboxes.

Here are some syntax ideas:

AdminFormElement::conditional( 
   AdminFormElement::checkbox('publish', 'Publish')->required()
)->equalTo('true',[
   AdminFormElement:: date('from_date', 'From Date')->required(), // only required if condition is true
   AdminFormElement:: date('to_date', 'To Date')->required() // only required if condition is true
]);

AdminFormElement::conditional(
   AdminFormElement::select('status', 'Status', ['Unknown', 'Single', 'Married'])
   )->equalTo('Single', [
      AdminFormElement::text('name', 'Your Name')   
   ])
   ->equalTo('Married', [
      AdminFormElement::text('name', 'Your Name'),
      AdminFormElement::text('name', 'Partners Name'),
      AdminFormElement::file('file', 'Attach proof')
   ]);

Alternatives:

AdminFormElement::conditional( 
   AdminFormElement::checkbox('publish', 'Publish')->required(), [
      'true' => [
         AdminFormElement:: date('from_date', 'From Date')->required(), // only required if condition is true
         AdminFormElement:: date('to_date', 'To Date')->required() // only required if condition is true
      ]
);

AdminFormElement::conditional(
   AdminFormElement::select('status', 'Status', [
      'Unknown',
      'Single'
      'Married'
   ]),
   [
      'Single' => [
         AdminFormElement::text('name', 'Your Name')
      ],
      'Married' => [
         AdminFormElement::text('name', 'Your Name'),
         AdminFormElement::text('name', 'Partners Name'),
         AdminFormElement::file('file', 'Attach proof')
      ]
   ]
);

AdminFormElement::checkbox('publish', 'Publish')->conditionalEquals(true, [
   AdminFormElement:: date('from_date', 'From Date')->required(), // only required if condition is true
   AdminFormElement:: date('to_date', 'To Date')->required() // only required if condition is true
]);

AdminFormElement::select('status', 'Status', [
   'Unknown',
   'Single'
   'Married'
])->conditionalEquals('Single', [
   AdminFormElement::text('name', 'Your Name')
])->conditionalEquals('Married', [
   AdminFormElement::text('name', 'Your Name'),
   AdminFormElement::text('name', 'Partners Name'),
   AdminFormElement::file('file', 'Attach proof')
])

[ghost]

@7ammer Looks great!. What you think about survey.js?

[7ammer]

survey.js looks great and has a lot of features.
What about jquery-visibly.js? It's very simple and efficient :)
conditionize.js is another alternative.

Example using jquery-visibly.js:

<form>
  <select id="status">
    <option value="Unknown">Unknown</option>
    <option value="Single">Single</option>
    <option value="Married">Married</option>
  </select>

  <div visibly="status:Single">
      <input type="text" name="name">
  </div>

  <div visibly="status:Married">
      <input type="text" name="name">
      <input type="text" name="partner">
      ...
  </div>
</form>

<script>
   $(document).ready(function() {
	$('[visibly]').Visibly();
   })
</script>

[ghost]

We need make some with advanced features but very simple & flexible - still looking for survey))
@7ammer

[7ammer]

Just found this: http://www.celljs.org. Might be useful.

[ghost]

@7ammer no - i think it will be as survey.js

[7ammer]

@Aios cool 👍

[daaner]

I think we’ll do it in a new branch. Though old Issue

[daaner]

Such a functional will be in the next big update