Submit button unexpected behaviour inside Activeform

Hello Experts,

I was checking one simple JS in my system. I found strange behavior of the Submit Button. My codes are as below:

Controller:




class IncremController extends Controller

{

   public function actionIncre(){

     		 return $this->render('Incre');

                  }

}



View Code:




div class="site-incrementtest">

    <h1><?= Html::encode($this->title) ?></h1>


    <p>Test Increment</p>

            <script>

                var i = 1;

                function tesFunction() {

                    ++i;

              document.getElementById('test').innerHTML=i;

                }

            </script>


            <button onclick="tesFunction();">Click Me</button> <!-- Button1    -->

</div>


    <div class="row">

                <?php $form = ActiveForm::begin([

                'id' => 'form-Increment',

                'options' => ['class' => 'form-horizontal'],

                ])?>

                <div class="container-fluid" align="center">


                     <div class="col-xs-2">

                     <?= Html::submitButton('Inside Form', ['class' => 'btn btn-success', 'onclick'=>"tesFunction()"]) ?> <!-- Button2    -->

                     </div>

                     <div id="test" style="display:inline">1</div>

                </div>

               <div class="container-fluid" align="center">

            

                <div class="form-group"> 

                    <?php ActiveForm::end(); ?>

                </div>

                </div>

    </div>

    <div class="row">       

    <?= Html::submitButton('Outside Form Button', ['class' => 'btn btn-success', 'onclick'=>'tesFunction();']) ?> <!-- Button3    -->

    </div>



Issue:

1st Button (Regular PHP Button Syntax): working fine and increment the value as expected.

2nd Button (Yii2 submit button inside the ActiveForm) : On button click, increment by 1 and instantly it returns to the initialized Value.

3rd Button: Yii2 submit button outside the ActiveForm): working fine and increment the value as expected.

Can you please guide me, why 2nd Button could not hold the incremented value?

Any idea?

Thanks in advance.

Regards,

Sid

The page is reloaded (form actually will be submitted).

Hello Tri,

Thanks for your valued input. Can you guide me, if I want to get the value in the reloaded page, how to do that.

I think, I have to hold the value in a session. If so, how shall I use this variable in the session.

Regards,

Sid