将多页php表单转换为一个页面表单

Question

Good day all, I have got the following question: I have got a multipage webform which is working good exept every step makes webpages reload. Now it is a time to move to a single page with steps. I have studied lots of variation which I could find over the google but got lost :(

The problem is that everypage exept the front step uses data from database, which is selected on previous user input. Can you please provide an example how to handle the form.

Form (simple) details:

Step1.php - simple php query to database for selet fields Step2.php - display options depending on user answers is step1, also store some step1 detailes for future Step3.php - more detailed input depending on step1 and step2 results step4.php verivication, calculation store data in mysql call extrenal scripts

Any ideas? (I know my question can be really easy for a geeks but not for me as I am still learning.

i have tried is the following code:

<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
function call() {
  var msg   = $('#formx').serialize();
    $.ajax({
      type: 'POST',
      url: 'check.php',
      data: msg,
      success: function(data) {
        $('.results').html(data);
      },
      error:  function(xhr, str){
            alert('error: ' + xhr.responseCode);
        }
    });

    }
</script> 
<form method="post" action="javascript:void(null);" id="formx" onsubmit="call()"> here some data 
<input type="submit" value="Submit"/> </form> <div id="results"></div>    

Answer 1

This solution consists of echoing the forms you had which receive get parameters to do their respective queries. This ones are retrieved by ajax and using jquery appended to the right div

replace the submit button for a

    <a onClick='action1'>submit</a>

have your forms within a form and make 4 php's which look like your former forms

this is an example I've used

function contreportes(e){
    var res=e.target.responseText;//get new form
    $("table#productos tbody").append(res); //put it in place

}

function a(){
     //variables to send
    var codigo = document.getElementById('barcode').value;
    var cantidad = document.getElementById('cantidad').value;
    var id_presentacion = document.getElementById('id_presentacion').value;
    var porcentajedesc = document.getElementById('porcentajedesc').value;

        var url="/administracion/cotizacion/getproducto/?codigo="+codigo+"&cantidad="+cantidad+"&id_presentacion="+id_presentacion+"&porcentajedesc="+porcentajedesc;
        var datos=new FormData();  //generando un obj de un formulario que se va a crear virtualmente
        var solicitud=new XMLHttpRequest();

        solicitud.addEventListener("load",contreportes,false);
        solicitud.open("GET",base,true);
        solicitud.send(datos);


}

There must be an easier way but this is how i go about it