从文本框获取数据，并传递给控制器在yii2(Get data from textbox and

炎同样的问题如从一种形式到在yii2控制器将数据传递。我想从用户数据3fields并将它传递给控制器的动作。我试图用JavaScript来做到这一点，但它似乎JavaScript函数不会被调用。

没有任何反应，当我点击按钮。在控制台中没有错误也是如此。

我附加3个字段，按钮和JavaScript下面的代码。

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:

该registerJs使用一些jQuery的分配如此看来，该函数getValue不是通过按钮呼叫可见的，但你可以使用jQuery用于分配的onclick和代码。

假设你的按钮有一个名为id yourButton你可以做这样

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

在JavaScript代码中，你有“.upc”“.startdate”“.enddate”这是不是意味着你正在寻找类UPC，STARTDATE endate ...但在你的HTML没有相关的输入字段这个类..你有ID，那么你应该在jQuery的使用#udc #startdate搜索......一个如此

Answer 2:

您可以通过串行数据用ajax做它，并将其发送给控制好样动作

    $('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....!!!');
}
});
});