auto submit form refresh every second

Question

I have a little problem with this code :

          <form class="form-horizontal" method="post" action="{{ route('bilan.resultat.add', ['bilanId' => $bilan->id] )}}" id="form" name="formu">
        {{ csrf_field() }}
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Sexe</th>
            <th>Age</th>
            <th>Taille</th>
            <th>Poids</th>
          </tr>
        </thead>
        <tbody class="text-primary">
          <tr>
            <td><input id="age" size="7" maxlenght="3" name="valage" value="{{ $bilan->age }}" readonly></td>
            <td><input size="7" maxlenght="3" name="valtaille" value="{{ $bilan->Taille_cm }}" readonly></td>
            <td><input type="hidden" size="2" maxlenght="3" id="anc_id" name="anc_id" value="{{ $bilan->resultat->anc_id }}" readonly></td>
            <td><a href="/bilans" class="btn btn-outline-primary pull-right" role="button">Retour</a></td>
          </tr>
        </tbody>
      </table>
      <table class="table table-responsive">
        <tr>
          <td><p class="text-primary">Indice de masse corporelle (IMC)</p></td>
          <td><input name="imc" size="5" value="@if($bilan->resultat !== null) {{ $bilan->resultat->imc }} @endif"/></td>
          <td><p hidden class="text-primary">Fréquence cardiaque maximale</p></td>
          <td><input type="hidden" name="fcm" size="5" value="@if($bilan->resultat !== null) {{ $bilan->resultat->fcm }} @endif"/><a hidden>  b/min</a></td>
        </tr>
        <tr>
          <td><p class="text-primary">Distance minimale normale</p></td>
          <td><input name="dmn" size="5" value="@if($bilan->resultat !== null) {{ $bilan->resultat->dmn }} @endif"/><a> m</a></td>
          <td><p hidden class="text-primary">Fréquence cardiaque de travail 50%</p></td>
          <td><input type="hidden" name="fct50" size="5" value="@if($bilan->resultat !== null) {{ $bilan->resultat->fct50 }} @endif"/><a hidden> b/min</a></td>
        </tr>
      </table>
      <a href="/bilans" class="btn btn-outline-primary pull-right" role="button">Retour</a>
    </form>

I want to auto load the form when the page is loaded so i add the script :

<script>
window.onload = function() { ancrecupid(); calculerIMC(); calculerDMN(); document.getElementById('form').submit(); };
</script>

It works but the page is reloaded every second, and i just want the form to be loaded once... I have several functions to load that's why i put function() { ancrecupid(); calculerIMC();....

What's wrong in my code ?

at the end, you automatically submit, causing page refresh .. — moped, Dec 15 '17 at 13:57
If the page is reloaded there is no way you can stop window.onload code to execute, except that you get some state from server and make decision based on it. Otherwise dont reload the page each second, only the specific data using ajax. — muasif80, Dec 15 '17 at 13:58
You need Ajax for that. Interested? This means that javascript will submit the form, without the client noticing anything. — Emmanuel Delay, Dec 15 '17 at 13:58
thank you for response, yes i'm interest using ajax but i don't know how ? — ginette, Dec 15 '17 at 14:02

score 1 · Answer 1 · answered Dec 15 '17 at 14:01

There is nothing wrong in your code. It is working as written. What you need is a flag that denotes whether your page is loaded via get request or via post request. Currently, your JS code is not able to distinguish between them, that is why it is doing infinite redirection. To fix this you have to return a flag from your backend code and use that flag in your JS code. You can take help from following link

Checking if request is post back in PHP

OR

You can use ajax for this.

Link: http://api.jquery.com/jquery.ajax/

score 0 · Answer 2 · answered Dec 15 '17 at 14:22

With jQuery, something like this is the idea. Not sure if you need those other functions anymore

$(document)ready(function() {
  var myform = $('#form'); 
  // every 1 second:
  setInterval(function() {
    // send Ajax request, with form data
    $.ajax({
      type: 'post',
      url: myform.attr('action'),
      data: myform.serialize(),   // this reads all the inputs/select, ... puts it all in the correct format...
      success: function(response) {
        // response holds whatever you echoed with php.  For example you can show that response in a div <div id="response"></div>
        $('#response').html(response);
      }
    });

  }, 1000);
})

auto submit form refresh every second

2 Answers2