How to get value from custom editor template into field

How to get value from custom editor template into field

Aryan1703Aryan1703 Posts: 65Questions: 15Answers: 1

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 }
                    ]
                },

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • Aryan1703Aryan1703 Posts: 65Questions: 15Answers: 1

    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; }

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • Aryan1703Aryan1703 Posts: 65Questions: 15Answers: 1

    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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • Aryan1703Aryan1703 Posts: 65Questions: 15Answers: 1
    edited May 7

    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.

  • Aryan1703Aryan1703 Posts: 65Questions: 15Answers: 1

    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>

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Answer ✓

    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

  • Aryan1703Aryan1703 Posts: 65Questions: 15Answers: 1

    Yep that helped. Thanks

Sign In or Register to comment.