Yii2按钮onclick JsExpression包含PHP

时间:2017-03-07 11:56:03

标签: javascript php html yii2 yii2-advanced-app

我想提交一个表单,其字段是一个包含未知数量元素的数组。

class DynamicForm extends Model
{
    /** var string[] */
    public elements[];
}

在视图中有表单提交,我想添加一个按钮,其中有一个' onclick' Javascript函数,它以innerHtml的形式添加一个新字段。不幸的是,我找不到在我的javascript表达式中嵌入一些PHP代码的方法。我现在就在这里:

<?php
$form = ActiveForm::begin([
    'id' => 'test-form',
    'layout' => 'horizontal',
    'fieldConfig' => [
        'errorOptions' => [
            'role' => 'alert',
        ],
        'horizontalCssClasses' => [
            'label' => 'col-sm-3',
            'offset' => 'col-sm-offset-3',
            'wrapper' => 'col-sm-9',
            'error' => '',
            'hint' => '',
        ],
    ],
]); 
$formField = $form->field($model, 'elements[]', []);

$JsFunction = new \yii\web\JsExpression(
    "function addField() {
        document.getElementById(\"test-form\").innerHTML += \"<?php echo $formField; ?>\";
    }; 
    addField();"
);

echo Html::button(
    'Add element',
    [
        'class' => 'btn btn-primary',
        'onclick' => $JsFunction,
    ]
);
?>

奇怪的是,如果我在innerHTML中添加一个像"<p>hello!</p>"这样的字符串,它就可以完美地运行。另一个奇怪的事情是,如果我把HTML代码放在&#39; php echo&#39;命令生成,

'<input type=\"text\" id=\"dynamicform-elements\" class=\"form-control\" name=\"DynamicForm[elements][]\">'

它仍然有效!

虽然我认为为Yii::ActiveForm输入手动HTML代码并不是一个很好的做法,但这就是为什么我希望PHP能够为它完成这项工作。

提前谢谢!

2 个答案:

答案 0 :(得分:0)

在视野中;

$this->registerJs("addField(". $formField  .")", 3);
$this->registerJsFile('/js/file.js', ['position' => 3]);

在file.js

"function addField(variable) {
    document.getElementById("test-form").innerHTML += variable;
}; 

在JavaScript文件中,您可以使用const的constu创建类,以便更好地自定义类。 e.g

var class = function (config) {
        this.var1= config;

function addField() {
        document.getElementById("test-form").innerHTML += this.var1;
    }
};

并在View PHP中;

$this->registerJs("var addField = new Class(".\yii\helpers\Json::encode($same_array).")", 3); 

答案 1 :(得分:0)

我终于设法解决了这个问题,这是PHP的html生成代码的一些字符的问题。如果我这样做:

<html>
<head>
  <style> 
#example1 {
  background-position: right bottom;
  background-repeat: no-repeat, repeat;
  padding: 100px;
  z-index: 10;

 }
#slider {
    position: absolute;
    z-index: 0;
 }
  </style>
  </head>
  <body>
  <div id="example1">

  </div>
 <div id="slider">
 <img src="flwr.jpg" alt="Paris">
 <img src="paper.jpg" alt="Paris">
 <img src="flower.jpg" alt="Paris">
  </div>

<script>

</script>



</body>
</html>

......完美无缺。