I have a plugin page where I added some custom fields in order to create a form made with dynamic fields.

On my plugin page, I have an option group with the field\_name and the type\_of\_field.

If the user selects 'select' as type of field, i would like to add dynamically another set of text fields to constitute the select options.

[![plugin page](https://i.stack.imgur.com/4ajkZ.png)](https://i.stack.imgur.com/4ajkZ.png)

```
//definition of the fields

    public function setSettings()
        {
            $args = array(
                array(
                    'option_group' => 'nsp_form_option_group',
                    'option_name' => 'nps_form_option',
                    'callback' => array( $this->form_callbacks, 'formSanitize' )
                )
            );

            $this->settings->setSettings( $args );
        }

        public function setSections()
        {
            $args = array(
                array(
                    'id' => 'nsp_form_section',
                    'title' => 'Form Manager',
                    'callback' => array( $this->form_callbacks, 'formSectionManager' ),
                    'page' => 'nsp_form_manager'
                )
            );

            $this->settings->setSections( $args );
        }

        // define the fields for creating a form field
        // name
        // type
        // required
        public function setFields()
        {
            $args = array(
                array(
                    'id' => 'field_name',
                    'title' => 'Field Name',
                    'callback' => array( $this->form_callbacks, 'textField' ),
                    'page' => 'nsp_form_manager',
                    'section' => 'nsp_form_section',
                    'args' => array(
                        'option_name' => 'nsp_form_option',
                        'label_for' => 'field_name',
                        'placeholder' => 'eg. Profession'
                    )
                ),
                array(
                    'id' => 'type_of_field',
                    'title' => 'Type of Field',
                    'callback' => array( $this->form_callbacks, 'selectField' ),
                    'page' => 'nsp_form_manager',
                    'section' => 'nsp_form_section',
                    'args' => array(
                        'option_name' => 'nsp_form_option',
                        'label_for' => 'type_of_field',
                        'options' => array(
                            'textfield' => 'Text',
                            'checkbox' => 'Checkbox',
                            'radio' => 'Radio buttons',
                            'select' => 'Select',
                            'textarea' => 'Textarea'
                        )
                    )
                ),
                array(
                    'id' => 'required',
                    'title' => 'Required',
                    'callback' => array( $this->form_callbacks, 'checkboxField' ),
                    'page' => 'nsp_form_manager',
                    'section' => 'nsp_form_section',
                    'args' => array(
                        'option_name' => 'nsp_form_option',
                        'label_for' => 'required',
                        'class' => 'ui-toggle'
                    )
                )
            );

            $this->settings->setFields( $args );
        }

//creation of fields
public function registerCustomFields()
    {
        // register setting
        foreach ( $this->settings as $setting ) {
            register_setting( $setting["option_group"], $setting["option_name"], ( isset( $setting["callback"] ) ? $setting["callback"] : '' ) );
        }

        // add settings section
        foreach ( $this->sections as $section ) {
            add_settings_section( $section["id"], $section["title"], ( isset( $section["callback"] ) ? $section["callback"] : '' ), $section["page"] );
        }

        // add settings field
        foreach ( $this->fields as $field ) {
            add_settings_field( $field["id"], $field["title"], ( isset( $field["callback"] ) ? $field["callback"] : '' ), $field["page"], $field["section"], ( isset( $field["args"] ) ? $field["args"] : '' ) );
        }
    }

// template
<div class="wrap">
    <h1>Form Fields Manager</h1>
    <?php settings_errors(); ?>

    <form method="post" action="options.php">
        <?php 
            settings_fields( 'nsp_form_option_group' );
            do_settings_sections( 'nsp_form_manager' );
            submit_button();
        ?>
    </form>
</div>

```

I was thinking doing an ajax request 'onchange' and create new fields in php, but then how would I update the template to display / hide the fields ?

Or another approach ?