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

时间:2015-01-03 17:14:13

标签: php jquery mysql ajax forms

美好的一天, 我有以下问题: 我有一个多页面webform,它运行良好,每一步都会使网页重新加载。现在是时候用步骤移动到单个页面了。我已经研究了很多变种,我可以在谷歌找到但却迷路了:(

问题在于,前面步骤的每个页面都使用数据库中的数据,该数据是在以前的用户输入中选择的。 能否请您提供一个如何处理表格的例子。

表格(简单)详情:

Step1.php - 对数据库进行selet字段的简单php查询 Step2.php - 根据用户答案显示选项是step1,还存储一些step1细节以备将来使用 Step3.php - 更详细的输入取决于step1和step2结果 step4.php verivication,计算mysql中的存储数据调用extrenal脚本

有什么想法吗? (我知道我的问题对于一个极客来说真的很容易,但对我来说却不是,因为我还在学习。

我试过的是以下代码:

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

1 个答案:

答案 0 :(得分:0)

此解决方案包括回显您接收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);


}

必须有一种更简单的方法,但这就是我的方式