如何使用javascript或jquery或ajax在php中增加字段数量,而无需重新加载整个页面


How to increment number of fields in php using javascript or jquery or ajax without reload whole page

>我在 yii 中有一个表单,其中有一个名为 certificate_name 的文本字段。现在我希望当我单击加号图标时,文本字段应该递增 1 并显示在上一个字段下方。

这是我的 php 代码:

    <?php for ($i = 0; $i <= $_REQUEST['total_certi']; $i++) { ?>
        <div class="pr-ser">
            <div class="row">
                <?php echo $form->labelEx($model4, 'certificate_name'); ?>
                <?php echo $form->textField($model4, 'certificate_name', array('maxlength' => 300)); ?>
                <?php echo $form->error($model4, 'certificate_name'); ?>
            </div><!-- row -->
        </div>
    <?php } ?>
            <p id="demo"></p>
            <div class="row buttonsub">
                <input type="button" id ="trainer_certi" onclick="myFunction()" value="Add" />
            </div>

如果我递增整个div 而不是 fild,则没有问题。我可以管理这个。我的JavaScript代码如下:

   <script>
      function myFunction() {
         var value = parseInt(document.getElementById('demo').value, 10);
            value = isNaN(value) ? 0 : value;
            value++;
        document.getElementById('demo').value = value;
        var total_certi = value;  
        alert(total_certi);
        }
    </script>

如果我在 $_REQUEST['total_certi'] 中得到结果并且它在 for 循环中工作,那么我就完成了我的工作。

在这里,我可以在脚本中的警报中获得递增的值,但是如何将此值应用于php并在不重新加载页面的情况下增加字段数量?

您可以使用

ajax请求,但对于多文本字段,您需要写入/数组certificate_name[]而不是certificate_name

这是为您工作和简单的代码 -

添加更多按钮 -

<a class="btn btn-primary add-more" href="#">Add More</a>

添加更多字段 JS 代码 -

   $('.add-more').live('click', function(){
      var url_path = ''; //your project base url 
            $.ajax({
                url:url_path+'?r=ajax/addmore',
                data:'req=add_more',
                dataType:'html',
                type:'POST',
                async: true,
                cache: false,
                success:function(resp){
                    $('.pr-ser').append('<div class="row">'+resp+'</div>');
                },
                error:function(er){
                    alert("An error has occured, Please reload/refresh the page and try again.");
                }
            });
       return false;
   });

将代码写入 Ajax 控制器 -

public function actionAddmore(){
   if(Yii::app()->request->isAjaxRequest){
       $cert_name = CHtml::textField('certificate_name[]', '', array('maxlength'=>'300'));
       echo $cert_name
    }
}

如果你使用的是 Yii2 - 看看下面的扩展:Yii2 Dynamicform。我已经在我的项目中使用了它,它正是您正在尝试构建的。