php - 将多页 php 表单转换为一页表单

Question

大家好，我有以下问题:我有一个多页网络表单，它运行良好，除了每一步都会重新加载网页。现在是时候通过步骤移动到单个页面了。我研究了很多变化，我可以通过谷歌找到这些变化，但迷失了:(

问题在于，除了前面的步骤之外，每个页面都使用数据库中的数据，该数据是根据先前的用户输入选择的。您能否提供一个如何处理表单的示例？

表单(简单)详细信息:

Step1.php - 对数据库进行简单的 PHP 查询以获取选择字段Step2.php - 根据用户答案显示选项是第 1 步，还存储一些第 1 步的详细信息以供将来使用Step3.php - 根据步骤 1 和步骤 2 结果进行更详细的输入step4.php验证，计算存储数据到mysql调用外部脚本

有什么想法吗？ (我知道我的问题对于极客来说可能非常简单，但对于我来说却不然，因为我仍在学习。

我尝试过以下代码:

<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

此解决方案包括回显您接收参数以执行各自查询的表单。这些是通过 ajax 检索并使用附加到右侧 div 的 jquery

将提交按钮替换为

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

将您的表单放在一个表单中，并制作 4 个看起来像您以前的表单的 php

这是我用过的一个例子

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);


}

一定有更简单的方法，但这就是我的做法