Announcement

Collapse
No announcement yet.

Dynamic forms

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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.
    Albert Drent
    aducom software netherlands
    scriptcase partner, reseller, support and (turn-key) development
    www.scriptcase.eu / www.scriptcase.nl

  • #2
    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. :-)
    On interest I'm more than happy to explain.

    jsb

    Comment


    • #3
      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....
      Albert Drent
      aducom software netherlands
      scriptcase partner, reseller, support and (turn-key) development
      www.scriptcase.eu / www.scriptcase.nl

      Comment


      • #4
        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().

        Code:
        //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)

        Code:
        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

        Comment


        • #5
          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.
          Albert Drent
          aducom software netherlands
          scriptcase partner, reseller, support and (turn-key) development
          www.scriptcase.eu / www.scriptcase.nl

          Comment


          • #6
            Originally posted by aducom View Post
            ... but how does the data come into my SC application? ...
            In the php_fill_select method. Declare 2 parameter ($sql_statement, $sel_field) for this method and it gets even more flexible.

            Code:
            $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
            Last edited by jsbinca; 11-16-2014, 06:34 PM.

            Comment


            • #7
              Wauw, especially the second part is interesting. I'll play with it, but this looks a lot better then my approach. Thanks.
              Albert Drent
              aducom software netherlands
              scriptcase partner, reseller, support and (turn-key) development
              www.scriptcase.eu / www.scriptcase.nl

              Comment


              • #8
                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!
                Last edited by aducom; 11-18-2014, 10:13 AM.
                Albert Drent
                aducom software netherlands
                scriptcase partner, reseller, support and (turn-key) development
                www.scriptcase.eu / www.scriptcase.nl

                Comment


                • #9
                  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
                  Last edited by aducom; 11-18-2014, 05:51 PM.
                  Albert Drent
                  aducom software netherlands
                  scriptcase partner, reseller, support and (turn-key) development
                  www.scriptcase.eu / www.scriptcase.nl

                  Comment


                  • #10
                    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
                    Last edited by jsbinca; 11-18-2014, 09:59 PM.

                    Comment

                    Working...
                    X