Magento – magento 2 get value of selected select box using knockout in custom module

knockoutjsmagento2

I have created custom module , in which I have created front end template form using knockout js.
In form I have created a select box.
I want selected option value in form post method and save that value in data base.

Below is my code in html template.

       <select data-bind="
                  optionsValue: 'value',
                    optionsText: 'label',
                    optgroup: [{
                        label: 'Prefix',
                        value: [{
                            label: 'Mr',
                            value: 'Mr'
                        }, {
                            label: 'Mrs',
                            value: 'Mrs'
                        }, {
                            label: 'Miss',
                            value: 'Miss'
                        }
                        ]
                    }]">

            </select>

If any one has did this , please help me.

Best Answer

I got it's solution . change selectbox code in html template.

    <select name=" prefix" id="prefix" data-bind="value: selectedValue">
       <option value="Mr">Mr.</option>
       <option value="Mrs">Mrs.</option>
       <option value="Miss">Miss.</option>
       <option value="Master">Master.</option>
    </select>

In js file get value using : this.selectedValue = ko.observable();

Thanks :)

Related Solutions

Magento – How to add datepicker in magento 2 frontend form

you can use the magento 2 datepicker. It use the jquery_ui datepicker.

Try this in your phtml:

<script type="text/javascript">
require([
    "jquery",
    "mage/calendar"
], function($){
  $('#datepicker').datepicker({
       prevText: '&#x3c;zurück', prevStatus: '',
        prevJumpText: '&#x3c;&#x3c;', prevJumpStatus: '',
        nextText: 'Vor&#x3e;', nextStatus: '',
        nextJumpText: '&#x3e;&#x3e;', nextJumpStatus: '',
        monthNames: ['Januar','Februar','März','April','Mai','Juni',
        'Juli','August','September','Oktober','November','Dezember'],
        monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
        'Jul','Aug','Sep','Okt','Nov','Dez'],
        dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
        dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
        dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
      showMonthAfterYear: false,
      dateFormat:'d.m.yy'
    } 
  );
});
</script>

Example with form:

<div class="field col-sm-6 ">
    <div class="response-field-date">
        <div class="subtemplate-wrapper">
            <label for="" style="" class="">Terminwunsch</label>
            <div class="row">
                <div class="input-box col-sm-12">
                    <input name="terminwunsch" id="datepicker" title="Terminwunsch" value="" type="text">
                    <script type="text/javascript">
                    require([
                        "jquery",
                        "mage/calendar"
                        ], function($){
                          $('#datepicker').datepicker({
                               prevText: '&#x3c;zurück', prevStatus: '',
                                prevJumpText: '&#x3c;&#x3c;', prevJumpStatus: '',
                                nextText: 'Vor&#x3e;', nextStatus: '',
                                nextJumpText: '&#x3e;&#x3e;', nextJumpStatus: '',
                                monthNames: ['Januar','Februar','März','April','Mai','Juni',
                                'Juli','August','September','Oktober','November','Dezember'],
                                monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
                                'Jul','Aug','Sep','Okt','Nov','Dez'],
                                dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
                                dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
                                dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
                              showMonthAfterYear: false,
                              dateFormat:'d.m.yy'
                            } 
                          );
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

Magento – Magento 2:Custom Field Value in Edit Products Section

I have face same issue and Below i have puted alternate solution for this issue.

Try Below code you will get your selected option on first position.

public function toOptionArray()
{

    $currentOptionId = 3;
    $optionArray = $this->getOptions();

    if(!empty($optionArray)) 
    {

        foreach ($optionArray as $key => $value) 
        {
            if($value['value']==$currentOptionId) 
            {

                unset($optionArray[$key]);

                $newOpuion['value'] = $value['value'];
                $newOpuion['label'] = $value['label'];

                array_unshift($optionArray, $newOpuion);
            }
        }

        return $optionArray;
    } 
}

Best Answer

Related Solutions

Magento – How to add datepicker in magento 2 frontend form

Magento – Magento 2:Custom Field Value in Edit Products Section

Related Topic