從文本框中獲取數據並傳遞給 yii2 中的控制器

Question

這與將數據從表單傳遞到 yii2 中的控制器的問題相同。 我想從 3fields 中的用戶獲取數據並將其傳遞給控制器​​操作。 我正在嘗試通過 javascript 執行此操作，但似乎沒有調用 javascript 函數。

當我點擊按鈕時什么也沒有發生。 控制台中也沒有錯誤。

我在下面附上 3 個字段、按鈕和 javascript 的代碼。

索引2.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 和代碼。

假設您的按鈕有一個名為yourButton的 ID，您可以這樣做

<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 那么你應該使用 #udc #startdate 在 jQuery 中搜索......

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