如何将参数传递给模态窗口

时间:2014-10-25 14:08:14

标签: php yii

我有三个按钮在页面上打开1个模态窗口:

<?php $this->beginWidget('bootstrap.widgets.TbModal', array('id'=>'myModal',)); ?>

<div class="modal-header">
    <a class="close" data-dismiss="modal">&times;</a>
    <h4 class="text-center">Pay</h4>
</div>

<div class="modal-body">
    <?php
    $this->widget('bootstrap.widgets.TbDetailView', array(
        'type'=>'bordered condensed',
        'data'=>$model,
        'attributes'=>array(
            array(
                'type'=>'raw',
                'label'=>'Период',
                'value'=> '', // if (clicked button id is 1 value == 1 day) else if (clicked button id is 2 value == 7 days)
            ),
        ),
    ));
    ?>

</div>

<div class="modal-footer">
    <?php $this->widget('bootstrap.widgets.TbButton', array(
        'type'=>'primary',
        'label'=>'Проверить',
        'url'=>'#',
        'htmlOptions'=>array('data-dismiss'=>'modal'),
    )); ?>
</div>

<?php $this->endWidget(); ?>
<?php $this->widget('bootstrap.widgets.TbButton', array(

    'encodeLabel' => false,
    'label'=>'1 day',
    'type'=>'primary',

    'htmlOptions'=>array(
        'id' => '1',
        'onclick' => 'alert(this.id)',
        'data-toggle'=>'modal',
        'data-target'=>'#myModal',
    ),
)); ?>&nbsp;&nbsp;&nbsp;
<?php $this->widget('bootstrap.widgets.TbButton', array(

    'encodeLabel' => false,
    'label'=>'7 dayss',
    'type'=>'primary',

    'htmlOptions'=>array(
        'id' => '2',
        'onclick' => 'alert(this.id)',
        'data-toggle'=>'modal',
        'data-target'=>'#myModal',
    ),
)); ?>&nbsp;&nbsp;&nbsp;
<?php $this->widget('bootstrap.widgets.TbButton', array(

    'encodeLabel' => false,
    'label'=>'1 month',
    'type'=>'primary',

    'htmlOptions'=>array(
        'id' => '3',
        'data-toggle'=>'modal',
        'data-target'=>'#myModal',
    ),
)); ?>&nbsp;&nbsp;&nbsp;

如何将点击的按钮ID传递给TbButton值? if(点击按钮id为1值== 1天)否则if(点击按钮id为2值== 7天)...

1 个答案:

答案 0 :(得分:0)

首先,网站上的元素ID必须是唯一的,您可能需要考虑使用数据属性或以不同方式调用这些ID。

接下来的事情是,只有提交表单的按钮才会将带有表单的值传递给服务器,因此您需要使用隐藏的输入字段或通过按下该按钮提交表单或使用ajax请求提交表单并手动附加。

正如我所看到的,您已将onclick事件直接放在元素中,更好的解决方案是将其放在单独的脚本标记/脚本文件中,但它不在您的问题范围内。

分配要与表单一起发送的值需要做的是使用以下js来:

将代码分配给输入字段:

$('#length_field').val(this.id)

或没有jQuery:

document.getElementById('length_field').value = this.id

如果您使用data-time-length="7"代替id,则可以通过以下方式执行:

$('#length_field').val($(this).data('time-length'))

但是我不清楚你想要传递这个值的位置,你想用它做什么。