Magento 2:Get input field text value in js file from template file

by V.P   Last Updated November 15, 2017 06:09 AM

I have a added a custom block in checkout section using a custom module.(http://i.prntscr.com/BRC2VcknSZiLsFpgzzPSAg.png)

I want to get the input text field value in js file(from .html file).

I have used like this data-bind="value: (this value should be the value that will enter in the text field value). I have tried to get the value in js file as var param = $('[name="reward-points"]').val(); But getting as undefined.

How can I get the value. Please help.

This is the files of my module:

app/code/Vendor/Module/view/frontend/web/template/checkout/shipping/additional-block.html

<div data-bind="visible: canVisibleBlock">
    <div class="payment-option _collapsible opc-payment-additional discount-code"
         data-bind="mageInit: {'collapsible':{'openedState': '_active'}}">
        <div class="payment-option-title field choice" data-role="title">
            <span class="action action-toggle" id="block-rewards-heading" role="heading" aria-level="2">
                <!-- ko i18n: 'Use Reward Points'--><!-- /ko -->
            </span>
        </div>
        <div class="payment-option-content" data-role="content">
            <form class="form form-discount" id="rewards-form">
                <div class="payment-option-inner">
                    <div class="field">
                        <label class="label" for="reward-points">
                            <span data-bind="i18n: 'Enter reward points'"></span>
                        </label>
                         <!-- ko i18n: 'You have'--><!-- /ko --> <b data-bind="text: rewardsPointsAvailableVal"></b> <!-- ko i18n: 'Reward Points available.'--><!-- /ko -->
                        <div class="control">
                            <input class="input-text" id="reward-points" name="reward-points" type="number" title="Reward Points Value"
                            data-validate="{'required-entry':true}" data-bind="value: rewardsPointsAvailableVal, attr:{placeholder: $t('Enter the points to spent')} ">
                        </div>
                    </div>
                </div>
                <div class="actions-toolbar">      
                   <div class="primary">
                        <button id="otp_button" class="action action-apply" data-bind="click:submitForm">REDEEM POINTS</button>
                   </div>
                </div>
                <div class="otp-sec" id="otp-sec" style="display:none">
                    <div class="control">
                        <input class="input-text" id="rewards-otp" name="rewards-otp" type="number" title="Reward Points OTP"
                        data-validate="{'required-entry':true}" data-bind="attr:{placeholder: $t('Enter the OTP')} ">
                    </div>
                    <div class="actions-toolbar">      
                       <div class="primary">
                            <button id="otp_button" class="button" data-bind="click:submitForm">APPLY POINTS</button>
                       </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

app/code/Vendor/Module/view/frontend/web/js/view/checkout/shipping/additional-block.js

define(
   [
       'jquery',
       'ko',
       'uiComponent',
       'mage/validation',
    ],
    function ($, ko, Component) {
       'use strict';
        var show_hide_rewards_blockConfig = window.checkoutConfig.show_hide_rewards_block;
        var rewardsPointsAvailable = window.checkoutConfig.checkoutRewardsPointsAvailble;
        var url = window.checkoutConfig.form_url;
        var carttotal = window.checkoutConfig.cart_total;
        var param = $('[name="reward-points"]').val();
        alert(param);
        //var param = document.getElementById('reward-points').value;

        return Component.extend({
            defaults: {
                      template: 'Vendor_Module/checkout/shipping/additional-block'
            },
            canVisibleBlock: show_hide_rewards_blockConfig,
                  rewardsPointsAvailableVal: rewardsPointsAvailable,
            /* Validation Form*/
            validateForm: function (form) {
                 return $(form).validation() && $(form).validation('isValid');
            },
                  submitForm: function(){
                    if (!this.validateForm('#rewards-form')) {
                       return;
                    }
              alert("qwerty"+param);
                    $.ajax({
                        url: url,
                        type: "POST",
                data: {param:param},
                        dataType: 'json'
                    }).done(function (data) {
                        document.getElementById('otp-sec').style.display = 'block';
                    });

                 }                
        });
    }
);

app/code/Vendor/Module/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="billing-step" xsi:type="array">
                                            <item name="component" xsi:type="string">uiComponent</item>
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="afterMethods" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="rewards" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Vendor_Module/js/view/checkout/shipping/additional-block</item>                                                               </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>


Related Questions





where is custom field stored in database?

Updated February 22, 2017 09:09 AM