After "submit" JavaScript / jQuery

Question

Is it possible in Yii2, when you click "submit" and have to wait until it is loaded, to have a window, or at least a message that "it's loading so be patient"? I have little experience with JavaScript, but I suppose that's the way to do that. I tried that:

<style>
#loading {
  width: 30%;
  height: 30%;
  position: absolute;
  left: 25%;
  top: 25%;
  background-color: green;
  line-height: 5;
  text-align: center;
  display: none;
}
</style>

<script>
$('#formularz').on("submit", function() {
  $("#loading").show();
});
</script>

<h1>Dodaj numery do przedzwonienia</h1>
<h3>Wybierz zamówienie, którego numery chcesz przedzwonić:</h3>

<div class="order-form" id="formularz">
<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'id')->dropDownList(ArrayHelper::map(Order::find()->all(), 'id', 'id')) ?>
<?= Html::submitButton("Przedzwoń", ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
<?php ActiveForm::end(); ?>
</div>

<div id="loading">
    Ładowanie trwa...
</div>

But didn't work.

Ripper · Accepted Answer · 2016-12-20 22:03:40Z

you might need to use JSExpression, also add console.log to see if it triggers if you hit F12 on your browser and check console... hope it helps

<?php
    // this goes on top of file to other uses right after namespace
    use yii\web\JsExpression;
?>

<style>
#loading {
  width: 30%;
  height: 30%;
  position: absolute;
  left: 25%;
  top: 25%;
  background-color: green;
  line-height: 5;
  text-align: center;
  display: none;
}
</style>

<?php
    // you might want to use JSExpression and check if it triggers
    $this->registerJs("
        $('#formularz').on('submit', function() {
            $('#loading').show();
            console.log('loading...');
        });
"); ?>

<h1>Dodaj numery do przedzwonienia</h1>
<h3>Wybierz zamówienie, którego numery chcesz przedzwonić:</h3>

<!-- you can not use same id twice -->
<div class="order-form" id="formularz-div">
<?php $form = ActiveForm::begin([
    'id' => 'formularz',
]); ?>
<?= $form->field($model, 'id')->dropDownList(ArrayHelper::map(Order::find()->all(), 'id', 'id')) ?>
<?= Html::submitButton("Przedzwoń", ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
<?php ActiveForm::end(); ?>
</div>

<div id="loading">
    Ładowanie trwa...
</div>

u_mulder · Accepted Answer · 2016-12-20 13:25:41Z

1

<div> element has no submit event. Submit event is for a <form>. So, your form opening tag should be:

<form id="formularz" .....>

Or you can modify jquery selector like this:

$('#formularz form').on("submit", function() {
  $("#loading").show();
});

This means that on submitting some <form> inside div#formularz your event will happen.

I'm not familiar with Yii, but try something like:

ActiveForm::begin([
    'id' => 'formularz',
]);

And then check generated html.

edited Dec 20, 2016 at 13:25

answered Dec 20, 2016 at 13:18

u_mulder

54.8k5 gold badges54 silver badges72 bronze badges

2 Comments

Olga Over a year ago

Okay, but I'm using Yii, where I start form like that: $form = ActiveForm::begin();, so where can I put it? I can't start one form twice.

Olga Over a year ago

I tried, no result. I also tried to find id of form generated by Yii, but it didn't change a bit.

Collectives™ on Stack Overflow

After "submit" JavaScript / jQuery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related