The item type is a list that I will get from my model but I’m not sure how to do the add button to add unlimited field and than when I click in submit my form it would submit everything on my form + the correct amount of quantities.
I have developed one demo form for you check it out.
if u need to use this kindly keep css nd js in web folder.
@ _form.php
<?php
use yii\helpers\Html;
use kartik\widgets\ActiveForm;
use yii\helpers\ArrayHelper;
use yii\helpers\Url;
use kartik\widgets\Select2;
use kartik\widgets\DepDrop;
use common\models\Country;
use common\models\State;
/* @var $this yii\web\View */
/* @var $model common\models\City */
/* @var $form yii\widgets\ActiveForm */
?>
<script src="//code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<!-- The following styles are scripts are for styling this page and are not required to make this script function -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
<!--
.container {
max-width: 800px;
}
.syntaxhighlighter.demo_code {
max-width: 1100px;
margin-left: auto !important;
margin-right: auto !important;
}
.demo_code .container:before, .demo_code .container:after {
content: none;
}
.demo_code .container {
max-width: 1100px;
}
-->
</style>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js"></script>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<div class="city-form">
<div id="wrap">
<div class="container">
<div class="page-header"><h1 style="text-align: center">Dynamic Text boxes with jQuery and PHP</h1></div>
<p class="lead"><a href="/dynamic-textbox-jquery-php/">« Back to Article</a></p>
<?php $form = ActiveForm::begin(['id' => 'form-signup',
'class'=>'form-horizontal',
'type' => ActiveForm::TYPE_HORIZONTAL,
'formConfig' => ['showErrors' => true],
'options' => ['enctype' => 'multipart/form-data']
]);
?>
<div class="form-group ">
<label class="col-sm-2 control-label" for="txtbox1">Box <span class="label-numbers">1</span></label>
<div class="col-sm-10">
<input class="form-control" type="text" name="boxes[]" id="txtbox1" />
<a href="#" class="btn btn-success btn-xs add-txt">Add More</a>
</div>
</div>
<?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>
</div>
<script type="text/javascript">
SyntaxHighlighter.all();
jQuery(document).ready(function($){
$("body").css('min-height', $(window).height() + 1 );
$(window).resize(function(){
$("body").css('min-height', $(window).height() + 1 );
});
$("#toggle_code").click(function(){
$(".syntaxhighlighter.demo_code").toggleClass( "collapsed", 500, function(){
$("#toggle_code").text( ( $("#toggle_code").text() == 'View Code' ) ? 'Hide Code' : 'View Code' );
$("#toggle_code").toggleClass( "btn-success btn-danger" );
});
});
//Add More
$(".form-horizontal .add-txt").click(function(){
var no = $(".form-group").length + 1;
if( 5 < no ) {
alert('Stop it!');
return false;
}
var more_textbox = $('<div class="form-group">' +
'<label class="col-sm-2 control-label" for="txtbox' + no + '">Box <span class="label-numbers">' + no + '</span></label>' +
'<div class="col-sm-10"><input class="form-control" type="text" name="boxes[]" id="txtbox' + no + '" />' +
'<a href="#" class="btn btn-danger btn-xs remove-txt">Remove</a>' +
'</div></div>');
more_textbox.hide();
$(".form-group:last").after(more_textbox);
more_textbox.fadeIn("slow");
return false;
});
//Remove
$('.form-horizontal').on('click', '.remove-txt', function(){
$(this).parent().parent().css( 'background-color', '#FF6C6C' );
$(this).parent().parent().fadeOut("slow", function() {
$(this).parent().parent().css( 'background-color', '#FFFFFF' );
$(this).remove();
$('.label-numbers').each(function( index ){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
</div>
@controller
if($_POST) {
print_r($_POST);exit;//u will get post data here.
/* Code for save in model in loop.*/
return $this->render('dyntext', [
'model' => $model,
]);
} else
{
return $this->render('dyntext', [
'model' => $model,
]);
}
Thank you so much, with some changes it worked for me but now do you know how can I add a dropdown in the add more? The dropdown needs to load from my model array.
