Get values from custom text fields

INTONE

I was able to insert a custom table with text fields in an editor (mostly in an effort to replicate part of an application form) instance using the following code :

  editor = new $.fn.dataTable.Editor({
  ajax: "php/loans.php",
  table: "#view_loans_details",
  fields: [
  { fields go here},
  {
   //then finally - full width text title - place table with 
   //custom input fields after this
   label:"<h3>COLLATERAL/SECURITY<h3>",
   name:"loans.title_5",
   id: "loans_title_5",
   type: "display",
   className: "text_align_center text_header_color_blue callateral_details"
     }
   ],
    i18n: {
     edit: {
      title: "Edit Loans Details"
      },
      create: {
      title: "Create Loans Details"
      }
      }
    });

  editor.on('initCreate', function(e) {
  setTimeout(function() {

  $('label[for="loans_title_5"]').removeClass("DTE_Label");
  $('label[for="loans_title_5"]').addClass("text_header_color_blue text_align_center");

  var tabb    = "<div id='collateral_table'>";
    tabb += "<table class='tables' cellspacing='0' >";
    tabb += "<tr><th>Furniture/Appliance Type</th><th>Serial#</th><th>Condition</th><th>Office Use</th></tr>";

    tabb += "<tr class='even'>";
    tabb += "<td><input type='text' id='collateral_type_1' name='collateral_type_1' value='"+data.loans.collateral_type_1+"'></td>";
    tabb += "<td><input type='text' id='collateral_serial_1' name='collateral_serial_1' value='"+data.loans.collateral_serial_1+"'></td>";
    tabb += "<td><input type='text' id='collateral_conditions_1' name='collateral_conditions_1' value='"+data.loans.collateral_conditions_1+"'></td>";
    tabb += "<td><input type='text' id='collateral_office_1' name='collateral_office_1' value='"+data.loans.collateral_office_1+"'></td>";
    tabb += "</tr>";



    tabb += "</table></div>";

    $("#collateral_table").empty();
    $(tabb).insertAfter(".callateral_details");

     },200);

    });

The problem I am having is that i am not seeing these custom fields passed out to the server with any POST value. Is there a specific way to retrieve custom fields?

I also looked up chrome developer tools under network>preview and say where empty POST values were sent. Is it even possible to insert raw input tags and submit via post in an editor instance or is there a specific api that must be used.

allan

Hi,

I would suggest that the best way of going this is to create a custom field type plug-in for Editor that displayed the HTML that you want. At the moment Editor itself knows nothing about the additional inputs in the DOM since it doesn't scan over the DOM elements on submit, but rather the fields that have been configured for that instance.

Allan

INTONE

Thank you allan. I kinda was avoiding that complexity.( I am not even close to calling myself an intermediate Javascript developer.). I was able to hack out a solution using the above mentioned setup.

for those who might be interested this is how I did it.

1. Enter all the respective fields as usual giving each of them a unique id.

   {
   label:"some column name I want to hide",   
   name:"some_column_name",
   id:"some_column_name_id"
   
   }
   

2. Then in your init edit and init create states hide all these.

     editor.field('loans.collateral_serial_1' ).hide();
   

3. In your raw html input use an onkeyup to capture all key presses via a function.

   <input type='text' id='collateral_serial_1_' onkeyup='middleManInput(this.id)' >

    //In your function declaration get the id of the element , 
    //use id to get the value, 
    // use the same id to identify id of the element you declared in editor but hid.
    // pass that value from the capturing element and pass it to the editor element. 
   
    function middleManInput(id){
   
     //capturing element value
     var v = document.getElementById(id).value;
   
     //identify the editor element - how i did it was give each raw html element an
    //additional "_" so all i am doing now it removing it to get the id of the editor element
    var n = id.substring(0, id.length - 1);
   
    //pass it on to the editor element using the declared id in step 1.
    console.log(id+" this value: "+v+" thevalue of new id"+n);
    document.getElementById(n).value = v;
   }
   

That is it. once the value is passed on key up to the actual editor field, everything works as expected.

if you want to display the values entered in the raw html you can simple place a value property in the input element. This should only be done in the edit state.

  <input type='text' id='collateral_serial_1_'  value='"+data.loans.collateral_serial_1+"' onkeyup='middleManInput(this.id)' />

allan

Very clever - nice solution :-).

I would encourage you try try out the plug-ins as they offer a lot more flexibility for long term code maintenance - if you have any questions about them, please let me know!

Regards,
Allan