javascript - 如何在不重新加载整个页面的情况下使用 javascript 或 jquery 或 ajax 增加 php 中的字段数

Question

我在 yii 中有一个表单，其中有一个名为 certificate_name 的文本字段。 现在我希望当我点击加号图标时，文本字段应该递增一个并出现在前一个字段的下方。

这是我的 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 并在不重新加载页面的情况下增加字段数？

Answer 1

您可以使用 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 Controller -

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