How do I populate jquery form with excel data

Question

I need to populate a form with data from a multisheet excel workbook. I have tried writing a VBA script to serialize to Json but it seems very labor intensive and have looked into a plugin named jquery.populate but couldn't figure that one out.

Here is sample:

 <fieldset>
<div class="_50"><strong>Phytoplankton CNP Sample ID:</strong><input type="text"  name="phyCNP"></div>
<div class="_25">D1 Filtered (mL):<input type="text" name="2D1"></div>
<div class="_25">D2 Filtered (mL):<input type="text" name="2D2"></div>
</fieldset>
 <fieldset>
 <div class="_50"><strong>Algae Sample ID:</strong><input type="text" name="algae"></div>
 <div class="_25"> <label></label>
      <input type="radio" id="radPeri1mod" name="algae"  data-mini="true"/>
      <label for="radPeri1mod">PERI-1-MOD</label>
    <label> </label>
      <input type="radio" id="radPeri1" name="algae"  data-mini="true"/>
      <label for="radPeri1">PERI-1</label></div>
   <div class="_25"> Other: <input type="text" id="textOther" name="algae"  /></div>
   </fieldset>

1.What is best method to populate fields from excel multisheet workbook?

2.Is there a way to add fieldsets on the fly based on the number of excel fieldsets? The fieldset above may have one set of data or 5 sets of data. I only want one empty set in the base form.

score 0 · Answer 1 · edited May 23 '17 at 10:25

It's a bit messy for lack of good syntax, without getting into template builders, but you could build/insert each fieldset manually in a loop.

I cannot answer the ajax question since I am not versed in that aspect, but the following example should get you started

var ajaxForNumberOfFields,
    ajaxForNumberOfDataSets,
    ajaxForDataTitle,
    ajaxForDataName,
    $field,
    $header,
    $data1,
    $data2;

// if the form already has old data then clear it
if(clearData) {
    $('form:not(first-child)').remove();
}

// ajax the number of fields
// something like $.ajax('yourURL', options).done(function(data){ajaxForNumberOfFields = data);

for(var i=0;i<ajaxForNumberOfFields;++i) {
    // create a new fieldset
    $field = $('<fieldset />');

    // ajax the number of data sets
    // ajaxForNumberOfDataSets = $.ajax('yourURL', options).done(function(data){ajaxForNumberOfFields = data);

    for(var j=0;j<ajaxForNumberOfDataSets;++j;)
        // new data header and rows
        $header = $('<div class=_50 />');
        $data1 = ('<div class=_25 />');
        $data2 = ('<div class=_25> Other: </div>');

        // ajax the data for the current set
        // ajaxForDataTitle = $.ajax('yourURL', options).done(function(data){ajaxForNumberOfFields = data);
        // ajaxForDataName = $.ajax('yourURL', options).done(function(data){ajaxForNumberOfFields = data);

        // load header
        $header
            .append($('<strong />').text(ajaxForDataTitle))
            .append($('<input type="text" />').attr('name', ajaxForDataName));

        // build data 1
        $data1
            .append('<label />')
            .append($('<input type="radio" id="radPeri1mod" data-mini="true"/>').attr('name', ajaxForDataName))
            .append('<label for="radPeri1mod">PERI-1-MOD</label>')
            .append('<label />')
            .append($('<input type="radio" id="radPeri1" data-mini="true"/>').attr('name', ajaxForDataname))
            .append('<label for="radPeri1">PERI-1</label>');

        // build data2
        // iterating over fieldsets will restrict the use of the id attribute
        // will need to use class attribute to locate the input, then figure out which one it is
        $data2
            .append($('<input type="text" class="textOther" />').attr('name', ajaxforDataName));

        // build the fieldset
        $field.append($header).append($data1).append(data2);

        // stuff the fieldset into the form
        $('form').append($field);
    }
}

How do I populate jquery form with excel data

1 Answers1