MachForm Community Forums » MachForm 4

1. offcourse
   Member

   Hi

   Just wanted to share a little tweak I did to be able to turn a number field into a range field. I also turned the Number field into an html5 "number" instead of "text".

   I still have a couple doubts, because I am using the "Custom CSS class" field.

   Basically, I am using that field to tell Machform that it is a range field, rather than a regular number one. I am using the parameters min,max and default_value to prepare the slider and then I added a small section to show the currently selected value. Still needing to make the "step" value configurable, so ideas are welcome.

   The only thing I would like to try and understand was how to make use of the existing classes at the same time. For instance, by using column_2 and the new "range" value/class, how would I use them both.

   Suggestions are welcome, although for now this solves my problem.

   I edited the view-functions.php file and in line 2806 I added the following code:

   //build the tag for range is that is the class
   		if($element->css_class == 'range'){
   			$new_field_type = $element->css_class;
   			$rangeUpdater = 'oninput="outputUpdate(value)"';
   			$rangeValue = '<output for=fader id=range'.$element->id.'>'.$element->default_value.'</output>';
   		}else{
   			$new_field_type = 'number';
   		}

   Then change the code after that to accommodate these changes, so I replaced what was there by this:
   

   $element_markup = <<<EOT
   		<li id="li_{$element->id}" {$li_class}>
   		<label class="description" for="element_{$element->id}">{$element->title} {$span_required}: {$rangeValue}</label>
   		<div>
   			<input id="element_{$element->id}" name="element_{$element->id}" min="{$element->range_min}" max="{$element->range_max}" step="100" hint="{$element->css_class}" class="element text {$element->size}" type=$new_field_type {$maxlength} {$quantity_link_data_tag} value="{$element->default_value}" {$input_handler} {$rangeUpdater} />
   			{$range_limit_markup}
   
   <script>
   function outputUpdate(vol{$element->id}) {
   document.querySelector('#range{$element->id}').value = vol{$element->id};
   }
   </script>
   
   		</div>{$guidelines} {$error_message}
   		</li>
   EOT;

   Any additions are very welcome.

   Also, adding all html5 field types to machforms, would be great. A switch/bollean field type would also work great.

   Posted 8 years ago #

RSS feed for this topic

Reply

You must log in to post.