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


Converting multipage php form to one page form

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

问题在于,前面步骤之外的每个页面都使用数据库中的数据,这些数据是在以前的用户输入中选择的。您能否举例说明如何处理表格。

表格(简单)详情:

Step1.php - 简单的 php 查询数据库以获取 selet 字段Step2.php - 根据用户答案显示选项是步骤1,还存储一些步骤1的详细信息以供将来使用步骤3.php - 根据步骤1和步骤2结果进行更详细的输入步骤4.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>    

此解决方案包括回显您拥有的表单,这些表单接收 get 参数以执行各自的查询。这个由 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);

}

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