Get data from textbox and pass to Controller in yii2

Question

Itis the same question as Pass data from a form to a controller in yii2 . I want to get data from user in 3fields and pass it to a controller action. I'm trying to do this by javascript but it seems that the javascript function is not being called.

Nothing happens when I click on the button. No error in the console as well.

I'm attaching the code of 3 fields,button and javascript below.

index2.php

<?php

use yii\helpers\Html;
//use yii\grid\GridView;
use kartik\grid\GridView;
use kartik\export\ExportMenu;
use frontend\modules\stock\models\Sellitem;
use dosamigos\datepicker\DatePicker;
use dosamigos\datepicker\DateRangePicker;
use kartik\form\ActiveForm;

/* @var $this yii\web\View */
/* @var $searchModel frontend\modules\stock\models\SellitemSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = 'Stock';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="sellitem-index">

    <h1><?= Html::encode($this->title) ?></h1>
    <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

    <div class="row">
        <div class="form-group">
            <div class="col-xs-4 col-sm-4 col-lg-4">
                <label for="upc" class="control-label"><p class="text-info">Product Code&nbsp;<i class="icon-star"></i></p></label>
                <input type="text" class="form-control" id="upc" class="span3">
            </div>
            <div class="col-xs-4 col-sm-4 col-lg-4">
                <label for="upc" class="control-label"><p class="text-info">Start Date&nbsp;<i class="icon-star"></i></p></label>
                <?= DatePicker::widget([
                //'label' => 'Startdate',
                'name' => 'startdate',
                'id' => 'startdate',
                //'value' => '02-16-2012',
                'template' => '{addon}{input}',
                    'clientOptions' => [
                        'autoclose' => true,
                        'todayHighlight' => true,
                        'format' => 'yyyy-mm-dd'
                    ]
                ]);?>
            </div>
            <div class="col-xs-4 col-sm-4 col-lg-4">
                <label for="upc" class="control-label"><p class="text-info">End Date&nbsp;<i class="icon-star"></i></p></label>
                <?= DatePicker::widget([
                //'label' => 'Startdate',
                'name' => 'enddate',
                'id' => 'enddate',
                //'value' => '02-16-2012',
                'template' => '{addon}{input}',
                    'clientOptions' => [
                        'autoclose' => true,
                        'todayHighlight' => true,
                        'format' => 'yyyy-mm-dd'
                    ]
                ]);?>
            </div>
        </div>

    </div>
    <p>
        <div class="form-group pull-right">
            <button class="btn btn-primary" onclick="getValue()">Seach</button>           
        </div>
    </p>
</div>
<?php
/* start getting the itemid */
$this->registerJs('
function getValue()
    {
        var uPc = $(".upc").val();
        var startDate = $(".startdate").val();
        var endDate = $(".enddate").val();

        alert(uPc);

    }
');
/* end getting the itemid */
?>

Answer 1

The registerJs use some jQuery assigning so seems that the function getValue is not visible by the button call but you could use jQuery for assign the onclick and code.

Assuming your button has a id named yourButton you could do this way

<div class="form-group pull-right">
    <button id="yourButton" class="btn btn-primary" >Seach</button>           
</div>

$this->registerJs (
      "$('#yourButton').on('click', function() { 
          var uPc = $('#upc').val();
          var startDate = $('#startdate').val();
          var endDate = $('#enddate').val();

          alert(uPc);
      });"
  );

In your javascript code you have '.upc' '.startdate' '.enddate' this mean that you are looking for class upc, startdate endate ... but in your html there is not this class associated to the input field .. you have id then you should search in jQuery using #udc #startdate ... an so

Answer 2

you can do it using ajax by serializing your data and send it to controll action like

    $('body').on('click','#btn_id',function(){
      var data = $('form#id').serialize();
      $.ajax({
          'type' : 'get/post',
           'dataType' : 'html/json',
           'url' : 'controller/action',
           'data' : {variable:data},
            success : function(data){
               console.log('Data Pass Successfully');
},
            error : function(){
              console.log('There is an Error....!!!');
}
});
});