<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\widgets\Pjax;
?>
<?php Pjax::begin(); ?>
<?= Html::beginForm(['exem/exem'], 'post', ['data-pjax' => '', 'class' => 'form-inline']); ?>
<?= Html::submitButton('-', ['name' => 'minus', 'value' => 'minus', 'class' => 'btn red']); ?>
<?= Html::input('number', 'number', $stringHash , ['class' => 'form-control']) ?>
<?= Html::submitButton('+', ['name' => 'plus', 'value' => 'plus', 'class' => 'btn blue']); ?>
<?= Html::endForm() ?>
<?php Pjax::end(); ?>
<?php
namespace frontend\controllers;
use yii\web\Controller;
use Yii;
use yii\base\Security;
class ExemController extends Controller {
public function actionExem()
{
$string = 1;
if(isset($_POST['minus']) == 'minus')
{
$string = Yii::$app->request->post('number') -1;
}
if(isset($_POST['plus']) == 'plus')
{
$string = Yii::$app->request->post('number') +1;
}
return $this->render('pjax', [
'stringHash' => $string,
]);
}
}
.center{
width: 150px;
margin: 40px auto;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="center">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-number" data-type="minus" data-field="quant[2]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[2]" class="form-control input-number" value="10" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-number" data-type="plus" data-field="quant[2]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
$('.btn-number').click(function(e){
e.preventDefault();
fieldName = $(this).attr('data-field');
type = $(this).attr('data-type');
var input = $("input[name='"+fieldName+"']");
var currentVal = parseInt(input.val());
if (!isNaN(currentVal)) {
if(type === 'minus') {
if(currentVal > input.attr('min')) {
input.val(currentVal - 1).change();
}
if(parseInt(input.val()) === input.attr('min')) {
$(this).attr('disabled', true);
}
} else if(type === 'plus') {
if(currentVal < input.attr('max')) {
input.val(currentVal + 1).change();
}
if(parseInt(input.val()) === input.attr('max')) {
$(this).attr('disabled', true);
}
}
} else {
input.val(0);
}
});