Dynamic forms

Now and then I have the need of creating some kind of dynamic form, i.e. having the user define one or more questions and decide the input type, ie. text, date or select. I useually create a maximum of questions with the 3 field types and hide the types per question not needed. It’s not ideal, but it works. The issue is that I want the select field react to input the user has given while defining the question. The approach I like is to create a select field on a temporary table which is filled with the available options in the onload event. The generation of the php does give an sql errormessage (as the temporary table does not exists at design time) but if you run the application it works well. Bottom line of this remark is to do a feature request to be able to use temporary tables and avoid errormessages.

Cough, cough.
Sorry for being late on this, but I’m trying to catch up.
Could you entertain an array solution instead of a temporary table.
The only thing is (and you might stone me to death) you need a few (<10) lines of JS code. :slight_smile:
On interest I’m more than happy to explain.

jsb

I would like any solution which is better then mine, I’m not a javascript guru I’m affraid. But I have a form with a max. of 10 variable fields of type date and/or number and/or text and/or integer. I need them to store in the database. Now I have a form with a lot of fields for each row of max. 10 fields (10x4= total of 40 fields) of the allowed fieldtype and I hide per row what I don’t need. I am using the up/down and date comboboxes. It’s not an ideal situation so yes, if you have a better approach, please…

My pleasure,
here we go.

Create a custom field of type select (let’s assume {select1}, set to manual and leave it empty.
Create a php method i.e. php_fill_select().


//create an array with the values for the select field
//this is an example, you would loop through a record set 
$php_array = array(
    array('label' => 'name1', 'value' => 1),
    array('label' => 'name2', 'value' => 2),
    array('label' => 'name3', 'value' => 3));

$options = json_encode($php_array);
$select_field = 'select1';
sc_ajax_javascript('js_fill_select', array($options,$select_field)); //call the js method to fill the field

Create the JS method (js_fill_select) with two variables (values, select_field)


var jsArray = JSON.parse(values); //convert to js array
var sel = document.F1[select_field]; //get the select field
sel.options.length = 0; //clear the select field
sel.options.add(new Option('Please select an option',0)); // in case you want a title
for(var i in jsArray) //loop through the array
{
    var opt = jsArray[i]; // get the options
    sel.options.add(new Option(opt.label, opt.value)); // fill the field, the attributes label and value are the same used in the php_array. If you use 'emp_name' and 'emp_id', it would be opt.emp_name and opt.emp_id
}

That’s it, hopefully it works for you. Although reading your last post I have to admit, that this approach is for a single record form application or control application only.
The problem with the multi record applications is to determine in which line we’re in. But having said that it’s working beautifully. You have an (or more) empty select and just
throw at it what ever you want/need according to the input (onChange event) of some other fields.

jsb

1 Like

Looks nice, but I find it hard to understand. In this case you are creating a select field with three values? Stupid question perhaps, but I can see you are filling it, but how does the data come into my SC application? Just by $_GET? As I said, I’m not a javascript guru… In fact, mostly I try to avoid JS.

In the php_fill_select method. Declare 2 parameter ($sql_statement, $sel_field) for this method and it gets even more flexible.


$phpArray = array();
sc_lookup(rs,$sql_statement);
foreach($rs as $row)
{
   $phpArray[] = array('label' => $row[0], 'value' => $row[1]);// fill the array from the select (I've chosen label and value because it's the same as in the field settings)
}
$options = json_encode($php_array);// this is just to create a correctly formed data structure for javascript
sc_ajax_javascript('js_fill_select', array($options,$sel_field)); //call the js method to fill the select field by passing along the array and the field name

All you need to do is somethin like

$my_sql = “SELECT emp_name, emp_id FROM employee”;
$my_field = ‘select1’;
php_fill_select($my_sql, $my_field);

whenever you need it.

The javascript part is just a loop through the array and fill the select field. You use the select field as you are used to (i.e. onChange: $selected_option = {select1}).
This way it is a dynamic select field which can be used over and over again with different selections based on user interaction without the need of reloading the page
and without providing a sql_statement or a manual list at design time.

Hope this helps clarify things.

jsb

1 Like

Wauw, especially the second part is interesting. I’ll play with it, but this looks a lot better then my approach. Thanks.

It’s working well, but it’s not a full solution to my problem. I need to have approx. max. 10 fields where the end-user can declare what kind of field it will be: a text field, integer, date. But for predefining select it’s a great solution, tnx!

I’ve been using your routine to set some other properties. I.e. I’m able to make the visible fieldsize dynamic by:

var sel = document.F1[fldname]; //get the select field
sel.size=fldwidth;

I would also be able to limit the total lenght to be entered dynamically. I tried

sel.maxLength=10;

but that doesn’t work. Does anybody know the right property name?

I used http://www.w3schools.com/jsref/dom_obj_text.asp as reference

Try sel.options.length=10 or sel.length=10

If nothing works you can always limit the loop.

var maxLength = 10;
for( var i=0; i < maxLength; i++)
{
var opt = jsArray[i];
sel.options.add(new Option(opt.label, opt.value));
}

Ahem… just in case you want to adjust the width of the field,
it would be: sel.style.width=“100px”;

jsb