How to get value from custom editor template into field

Aryan1703

I have created a custom template for my editor where i have added a raidio button to get value, but some reason it does not take the value and return " "(empty string) all the time.

I had try using html <editor-field name="YccBocc"></editor-field>, but this does not work and was messing up the css of the form.

 <fieldset class="Log">
            <legend>
                Log Details
            </legend>
            <div class="radio-buttons">
                <label class="radio-label">
                    <input type="radio" name="YccBocc" value="3" id="yccRadio" editor-field-name="YccBocc">
                    YCC
                </label>
                <label class="radio-label">
                    <input type="radio" name="YccBocc" value="2" id="boccRadio" editor-field-name="YccBocc">
                    BOCC
                </label>
            </div>
            <editor-field name="date"></editor-field>
            <editor-field name="time"></editor-field>
            <editor-field name="controllerRunsheet"></editor-field>
            <editor-field name="OperatorEdit"></editor-field>
        </fieldset>

  var opsLogEditor = new $.fn.dataTable.Editor({
            ajax: "../ajax/at/ops/opsLog.php",
            table: "#dailyLogtable",
            template: '#customForm',
            fields: [
                {
                    label: "Date",
                    name: 'date',
                },
                {
                    label: "Control Center",
                    name: 'YccBocc',
                //     type: 'radio',
               //       options: [
               //         { label: 'Ycc', value: 3 },
               //         { label: 'Bocc', value: 2 }
                    ]
                },

allan

There is no option for Editor to use HTML form elements that you define yourself like that. Editor will always create the HTML form elements that it needs.

In this case you have the fields.type and options properties commented out. To have a YccBocc field as a radio input in Editor, you'd need to comment them back in and remove your custom inputs.

Allan

Aryan1703

The issue with that is the css is pretty messed up. I tried fixing it but it did not work

input[type="checkbox"] {
  width: 20px; 
  height: 20px; 
}

allan

That's fairly epic. Looks like a width 100% applied to the input element. If you give me a link to the page I can hopefully help to address that.

Allan

Aryan1703

Here is the link to the site "https://stagingc.assettrack.cx/operations/dailyRunSheet.php".

I guess you already have access to the site.

thanks in advance

allan

Thank you. Right click on the element and you'll see the style:

#customForm input, #customForm select {
  height: 34px;
  width: 94%;
  margin-left: .5rem;
}

Maybe change it to:

#customForm input[type=text], #customForm select {
  height: 34px;
  width: 94%;
  margin-left: .5rem;
}

Allan

Aryan1703

This helped with the labels but what i want is to make the checkbox to be aligned properly something like this. Right now, they are pretty streched up.

Aryan1703

Also ho can i make this field an mandatory field. I have already made it required in editors field but it throws an error, when i try to submit it

jquery.dataTables.min.js:4 Uncaught TypeError: Cannot read properties of undefined (reading 'YccBocc')
at P.isPlainObject.d (jquery.dataTables.min.js:4:12134)
at a.valFromData (dataTables.editor.min.js:131:48)
at a.<anonymous> (dataTables.editor.min.js:77:177)
at Function.each (jquery-3.5.1.js:387:19)
at Object.<anonymous> (dataTables.editor.min.js:77:57)
at Function.each (jquery-3.5.1.js:387:19)
at a.oc [as _submit] (dataTables.editor.min.js:77:20)
at dataTables.editor.min.js:49:418
at a.Xb [as _event] (dataTables.editor.min.js:64:400)
at m (dataTables.editor.min.js:49:340)

js <div class="radio-buttons"> <!-- <editor-field name="YccBocc"></editor-field> --> <div data-editor-template="YccBocc" /> </div>

allan

what i want is to make the checkbox to be aligned properly something like this.

Took me a little while to realise that it looks like you have changed this input to a select. Are you happy with that then?

Also ho can i make this field an mandatory field

Add a validator to the server-side script. If you are using my Editor PHP libraries, see the documentation here.

Allan

Aryan1703

Yep that helped. Thanks