Populate form with results from grid

Question

I would like help in the correct way to populate a form with results for edit.

I am using flexigrid and have code that gets the details from a row and saves them in variables.

The point where I am stuck, is that I also have a form that I would like these details displayed for edit. The results are in the var 'columns'. For the life of me, I cannot see a way to do it.

Once the results are in the form, jQuery would then pass these results to db for processing.

I have all the code, but not sure what piece to post for your attention. I would be grateful if someone could show me how to do this based if possible on my code which I am willing to show here.

This is used to collect data from grid:

function editbox(com, grid) {
    if (com == 'Edit') {
        if ($('.trSelected').length > 0) {
            var items = $('.trSelected');
            var itemlist = '';
            for (i = 0; i < items.length; i++) {
                itemlist += items[i].id.substr(3);
            }
            var id = $("tr.trSelected td:nth-child(1) div").text();
            var location = $("tr.trSelected td:nth-child(2) div").text();
            var customer = $("tr.trSelected td:nth-child(3) div").text();
            var address = ($("tr.trSelected td:nth-child(4) select :selected").text() == "Select an Address") ? "" : $("tr.trSelected td:nth-child(4) select :selected").text();
            var service = ($("tr.trSelected td:nth-child(5) select :selected").text() == "Select a Service") ? "" : $("tr.trSelected td:nth-child(5) select :selected").text();
            var department = $("tr.trSelected td:nth-child(6) div").text();
            var status = $("tr.trSelected td:nth-child(7) div").text();
            var custref = $("tr.trSelected td:nth-child(8) div").text();
            var size = $("tr.trSelected td:nth-child(9) div").text();
            var authorisation = $("tr.trSelected td:nth-child(10) div").text();
            var intakedate = $("tr.trSelected td:nth-child(11) div").text();
            var destroydate = $("tr.trSelected td:nth-child(12) div").text();
            var columns =   "id=" + id +
                            "&location=" + location +
                            "&customer =" + customer  +
                            "&address=" + address +
                            "&service=" + service +
                            "&department=" + department +
                            "&status=" + status +
                            "&custref=" + custref +
                            "&size=" + size +
                            "&authorisation=" + authorisation +
                            "&intake_date=" + intakedate +
                            "&destroy_date=" + destroydate;

            console.log(columns);
            $("#boxeditform").dialog('open');
            //console.log(department+" "+custref+" "+address);
        } else {
            jAlert('you must select a row');
        }
    }
}

HTML for to capture data:

<form id="EB_edit" name="EB_edit" action="" method="post" class="webform">  

    <label for="EB_status">Status:</label> 
    <select name="EB_status">
    <option SELECTED VALUE="">Select a Status</option>
    <option value="In">In</option>
    <option value="Out">Out</option>
    <option value="Destroyed">Destroyed</option>
    <option value="Permanent">Permanent</option>
    </select><br /><br />
    <input id="EB_id" name="EB_id" type="hidden" value="" />
    <label for="EB_custref">Box Reference #:</label>  
    <input id="EB_custref" name="EB_custref" type="text" class="text ui-widget-content ui-corner-all inputbox EB_custref" value="" />  
    <label for="EB_address">Address:</label>  
    <input id="EB_address" name="EB_address" type="text" class="text ui-widget-content ui-corner-all inputbox EB_address" value="" />
    <label for="EB_service">Service:</label>  
    <input id="EB_service" name="EB_service" type="text" class="text ui-widget-content ui-corner-all inputbox EB_service" value="" />
    <label for="EB_dept">Department:</label>  
    <input id="EB_dept" name="EB_dept" type="text" class="text ui-widget-content ui-corner-all inputbox EB_dept" value="" />
    <div id="f2"></div><br />
    <button id="EB_submit" class="submit">Submit</button>
</form>

The aim is to populate form with data from editbox() var 'columns'.

Answer 1

I'm not up to speed on Flexigrid, but there's got to be a better way!

Rather than setting all those vars, why not create a mapping and use that to populate the form?

Try something like this:

function editbox(com, grid) {
  if (com == 'Edit') {
    if ($('.trSelected').length > 0) {

      var mapGridToForm   =   //Name         Child index  Form id
                            [ ['id',              1,      'EB_id'       ],
                              ['location',        2,      '???'         ],
                              ['customer',        3,      '???'         ],
                              ['address',         4,      'EB_address', 'select'],
                              ['service',         5,      'EB_service', 'select'],
                              ['department',      6,      'EB_dept'     ],
                              ['status',          7,      'EB_status'   ],
                              ['custref',         8,      'EB_custref'  ],
                              ['size',            9,      '???'         ],
                              ['authorisation',  10,      '???'         ],
                              ['intakedate',     11,      '???'         ],
                              ['destroydate',    12,      '???'         ]
                          ];
      var baseNode        = $('tr.trSelected');

      $("#boxeditform").dialog('open');

      //--- Populate the form.
      for (J = mapGridToForm.length - 1;  J >= 0;  --J) {
        var row     = mapGridToForm[J];

        if (row.length > 3) {   //--- It's a select control.

            // NOTE: Normally, we use the `value` attribute for selects.
            var gridVal = baseNode.find ('td:nth-child(' + row[1] + ') select:selected').text ();

            //--- Blank the value if it's unselected
            if (/^Select a/i.test (gridVal) )
                gridVal = "";
            $('#' + row[2] ).val (gridVal);
        } 
        else {
            //--- Get the value from the grid and set the form control with it.
            var gridVal = baseNode.find ('td:nth-child(' + row[1] + ') div').text ();
            $('#' + row[2] ).val (gridVal);
        }
      }
    } else {
        jAlert('you must select a row');
    }
  }
}

Note that val() intelligently fetches the selected value from <select> controls.