多个表单,通过单个页面提交

时间:2014-07-25 13:56:00

标签: php jquery html

我已经就最好的方法提出了一些建议。在一个页面上,我有5个包含表单的部分,每个部分的末尾都有一个文件上传表单。这是一个布局的例子

<html>
<head>
</head>
<body>
    <form>
        <!--Form 1 with all the Inputs -->
        <button type="submit" name="form1">Confirm Section</button>
    </form>
    <form> upload file </form> <!-- using Dropzonejs -->

    <form>
        <!--Form 2 with all the Inputs -->
        <button type="submit" name="form2">Confirm Section</button>
    </form>
    <form> upload file </form> <!-- using Dropzonejs -->

    <form>
        <!--Form 3 with all the Inputs -->
        <button type="submit" name="form3">Confirm Section</button>
    </form>
    <form> upload file </form> <!-- using Dropzonejs -->

    <form>
        <!--Form 4 with all the Inputs -->
        <button type="submit" name="form4">Confirm Section</button>
    </form>
    <form> upload file </form> <!-- using Dropzonejs -->

    <form>
        <!--Form 5 with all the Inputs -->
        <button type="submit" name="form5">Confirm Section</button>
    </form>
    <form> upload file </form> <!-- using Dropzonejs -->

    <!-- button to continue to another page -->
    <button type="submit" name="continue">Continue</button>


    <script type="text/javascript">myjscode.js</script>     

</body>
</html>

我在每个部分按下提交按钮时使用此jquery操作,每次提交都有一个。

$(document).ready(function(){
    $('#form1form').on('submit',function(e) {
        $.ajax({
            url:'includes/form1uploads.php',
            data:$(this).serialize(),
            type:'POST',
            success:function(data){
                console.log(data);
                document.getElementById('showhidedropzonesection').style.display = 'block';
            },
            error:function(data){
                $(".alert-danger'").show().fadeOut(5000);
            }
        });
        e.preventDefault();
    });
});

当我发布form1详细信息时,然后$ _POST所有输入并上传到数据库,我在$ _SESSION中保留了几个字段,以便我可以在下一个表单上使用它们,但是当我提交下一个表单时形成放入$ _POST的数据不会存储任何内容并向数据库提交一个空行。

现在因为你无法解决这个问题的最佳方式,所以我可以有一个输入部分表单,然后是我的上传文件表单,然后再按照我的说明再转到另一个输入表单。

或者有更好的方法来接近它吗?

我已经将它设置为这样,因为当用户将到达form1的末尾时,他们将需要上传文件,显示输入的证据,以及下一部分的相同内容

1 个答案:

答案 0 :(得分:0)

我会在每次更改时使用ajax提交数据并且&lt; html&gt;组成表单将由另一个.php页面重新构建,ajax正在POST以返回正确的html布局

http://www.sanwebe.com/2011/12/making-simple-jquery-ajax-contact-form