Multiple forms without reloading the page

Question

I am using php. i need to send a post to the server every time the user sends the result of a match, without reloading the page

I've been trying jquery but I couldn't.

This is my form:

<?php

$sqlpartidos =mysqli_query($con, "SELECT * FROM partidoprode WHERE idfecha = '$idfecha';");

while($filapartidos = mysqli_fetch_array($sqlpartidos)){

  echo '<div class="list-group-item list-group-item-action flex-column ">
  <div>

    <div class="row justify-content-center">

      <div class="col-3" id="bloqueequipo">
      <div><h5 class="nombreequipos">'.$filapartidos['nombrelocal']. ' '.' </div><div><img src="'.$filapartidos['imglocal'].'" alt="" class="imgequipos"></h5></div> 
      </div>
      <div class="col-6" id="bloqueequipo"><form id="myForm" method="post"><input type="number" id="reslocal" name="reslocal" min="0" max="10" size="1"/> - <input type="number" id="resvisitante" name="resvisitante" min="0" max="10" size="1"/><input type="hidden" name="idpartido" id="idpartido" value="'.$filapartidos['id'].'"/><input type="hidden" name="idfecha" id="idfecha" value="'.$filapartidos['idfecha'].'"/><div id="botondiv"><input type="submit" value="Submit" /></div></form> <div id="results"></div></div>
      <div class="col-3" id="bloqueequipo">
      <div><h5 class="nombreequipos">'.$filapartidos['nombrevisitante']. ' '.' </div><div><img src="'.$filapartidos['imgvisitante'].'" alt="" class="imgequipos"></h5></div> 
      </div>

    </div> 

  </div>
  <div class="col-12 text-muted nombreequipos"><small>'.$filapartidos['fecha'].'</small></div>

  </div>';
}
  ?>

EDIT: I was trying to do this.

function SubmitFormData() {
    var idpartido = $("#idpartido").val();
    var idfecha = $("#idfecha").val();
    var reslocal = $("#reslocal").val();
    var resvisitante = $("#resvisitante").val();
    $.post("enviar_jugada.php", { idpartido: idpartido, idfecha: idfecha, reslocal: reslocal, resvisitante: resvisitante },
    function(data) {
     $('#results').html(data);
     $('#myForm')[0].reset();
    });
}

And the input

<input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" />

What problem did you encounter when using JQuery? Show us what you have tried. — KIKO Software, Oct 06 '19 at 15:44
Each form, if it is to have an ID, MUST have a unique ID. You would be better removing the ID in my opinion. The same applies to other elements declared in the loop that have an ID - they MUST be unique — Professor Abronsius, Oct 06 '19 at 15:44
Your HTMl is also invalid due to the nature of incorrect element spanning - within hte `h5` tage there is a closed `div` ith no corresponding opening tag. — Professor Abronsius, Oct 06 '19 at 15:47
@KIKOSoftware edited. That way he only sends me the data from the first game. — Facundo Quintana, Oct 06 '19 at 15:51
You didn't say what problem you encountered. It is hard to guess. If your form submits, and you want to prevent this, you need to use: [preventDefault()](https://stackoverflow.com/a/9347286/3986005) — KIKO Software, Oct 06 '19 at 15:57

Professor Abronsius · Answer 1 · 2019-10-06T16:54:42.913

The above code is very messy and riddled with errors ( indent your code correctly will help you immensely! ) but perhaps the following approach might help?

If you use printf or sprintf etc you can create quite clean looking markup that has placeholders into which variables are plugged - which makes it much easier to read imo. Remove All the ID attributes that you generate in the loop - you do not generally need them as you can access HTML elements using querySelector and sibling selectors. In this way you can capture a (node)list of submit buttons and assign the event handler remotely rather than inline

The original markup is, as I say, messy so the following might not be accurate to your original intentions.

while( $filapartidos = mysqli_fetch_array( $sqlpartidos ) ){

    printf('
    <div class="list-group-item list-group-item-action flex-column">
        <div>
            <div class="row justify-content-center">

                <div class="col-3 bloqueequipo">
                    <div>
                        <h5 class="nombreequipos">%s</h5>
                        <img src="%s" alt="" class="imgequipos" />
                    </div>
                </div>

                <div class="col-6 bloqueequipo">
                    <form method="post">
                        <input type="number" name="reslocal" min="0" max="10" size="1" /> - 
                        <input type="number" name="resvisitante" min="0" max="10" size="1" />
                        <input type="hidden" name="idpartido" value="%s" />
                        <input type="hidden" name="idfecha" value="%s" />
                        <div class="botondiv">
                            <input type="submit" />
                        </div>
                    </form>
                    <div data-id="results"></div>
                </div>

                <div class="col-3 bloqueequipo">
                    <div>
                        <h5 class="nombreequipos">%s</h5>
                        <img src="%s" alt="" class="imgequipos" />
                    </div>
                </div>

                <div class="col-12 text-muted nombreequipos">
                    <small>%s</small>
                </div>

            </div>
        </div>
    </div>',

        /* assign the variables / data to the placeholders */
        $filapartidos['nombrelocal'],
        $filapartidos['imglocal'],
        $filapartidos['id'],
        $filapartidos['idfecha'],
        $filapartidos['nombrevisitante'],
        $filapartidos['imgvisitante'],
        $filapartidos['fecha']

    );//end printf

}//end while loop

<script>
    const ajax=function(url,data,callback){
        let xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(e){
                if( this.status==200 && this.readySate==4 )callback( this.response );
            }
            xhr.open( 'POST', url, true );
            xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
            xhr.send( data )
    }

    Array.prototype.slice.call( document.querySelectorAll( 'form > div > input[type="submit"]' ) ).forEach( bttn=>{
        bttn.addEventListener('click',function(e){
            e.preventDefault();
            let fd=new FormData( e.target.parentNode.parentNode );
            let results=e.target.parentNode.parentNode.parentNode.querySelector('[data-id]');
            ajax( location.href, fd, function(r){
                alert(r);
                results.innerText=r
            });
        });
    });
</script>

Multiple forms without reloading the page

1 Answers1