Php 多表格提交_Php_Jquery_Ajax_Forms

Php 多表格提交

php jquery ajax forms

Php 多表格提交,php,jquery,ajax,forms,Php,Jquery,Ajax,Forms,我是一个自学成才的程序员，没有正式的教育或经验，所以请提前为我的代码道歉下面的代码试图将为iphone设计的站点转换为单页站点（即使用ajax）。我在提交多个表单时遇到问题。。。单击表单#id2上的“提交”按钮时可能会发生这种情况我做了一些研究，并考虑实施以下jquery解决方案以防止多个表单提交：此php解决方案用于防止服务器端多次提交表单：还有一些网站建议ajax post代码应该将async设置为false，将cache设置为false，但我不完全确定原因以及这是否适用于我的情

我是一个自学成才的程序员，没有正式的教育或经验，所以请提前为我的代码道歉

下面的代码试图将为iphone设计的站点转换为单页站点（即使用ajax）。我在提交多个表单时遇到问题。。。单击表单#id2上的“提交”按钮时可能会发生这种情况

我做了一些研究，并考虑实施以下jquery解决方案以防止多个表单提交：

此php解决方案用于防止服务器端多次提交表单：

还有一些网站建议ajax post代码应该将

async

设置为false，将

cache

设置为false，但我不完全确定原因以及这是否适用于我的情况

我必须使用委托函数的原因是，单击表单#id1上的提交将加载一个id为#2的表单。。。我试着在上使用

，jquery网站说它取代了委托函数，但这似乎不起作用。我正在使用谷歌CDN加载1.8.2版
var startUrl = 'menu.php';

$(document).ready(function(){
    loadPage(startUrl);
});

function loadPage(url) {
    $('body').append('<div id="progress">Loading...</div>');
    scrollTo(0,0);
    if (url == startUrl) {
        var element = ' #header ul';
    } else {
        var element = ' #content';
    }

    $('#container').load(url + element, function(){
        var title = $('h2').html() || 'Menu';
        $('h1').html(title); 
        $('h2').remove();
        $('.leftButton').remove();

        if (url != startUrl) {
            $('#header').append('<div class="leftButton">Menu</div>');
            $('#header .leftButton').click(function(e){
                $(e.target).addClass('clicked');
                loadPage(startUrl);
            });     
        } 

        $("#container").delegate("a", "click", function(e){
    var url = e.target.href;
            if (url.match(/example.com/)) { 
                    e.preventDefault();
                    loadPage(url);
                }
    });

    $("#container").delegate("form", "submit", function(event){
        event.preventDefault();
    });

        $('#id1').submit(function(){
    var formData = $(this).serialize();
    $.post('processform1.php',formData,processResults);     

    function processResults(data) {
        $('#id1').remove();
        $('#container').html(data);
    }

        });

        $("#container").delegate("#id2", "submit", function(event){
        var formData = $(this).serialize();
    $.post('processform3.php',formData,processResults);     

    function processResults(data) {
        $('#id2').remove();
        $('#container').html(data);
    }

        event.preventDefault();
    });                 

        $('#progress').remove();        

});
}

var startUrl='menu.php'；
$（文档）.ready（函数（）{
加载页（startUrl）；
});
函数加载页（url）{
$（'body'）.append（'Loading…'）；
滚动到（0,0）；
如果（url==startUrl）{
var元素='#标题ul'；
}否则{
变量元素='#内容'；
}
$（“#容器”）.load（url+元素，函数（）{
var title=$（'h2'）.html（）| |'菜单'；
$（'h1'）.html（标题）；
$（'h2'）。删除（）；
$（'.leftButton'）.remove（）；
如果（url！=startUrl）{
$（'标题'）.append（'菜单'）；
$（'#header.leftButton'）。单击（函数（e）{
$（e.target）.addClass（'clicked'）；
加载页（startUrl）；
});     
} 
$（“#容器”）。委托（“a”，“单击”，函数（e）{
var url=e.target.href；
if（url.match（/example.com/）{
e、 预防默认值（）；
加载页面（url）；
}
});
$（“#容器”）。委托（“表单”、“提交”、函数（事件）{
event.preventDefault（）；
});
$（'#id1'）。提交（函数（）{
var formData=$（this.serialize（）；
$.post（'processform1.php'，formData，processResults）；
函数processResults（数据）{
$（'#id1'）。删除（）；
$（'#container'）.html（数据）；
}
});
$（“#容器”）.delegate（“#id2”，“submit”，函数（事件）{
var formData=$（this.serialize（）；
$.post（'processform3.php'，formData，processResults）；
函数processResults（数据）{
$（'#id2'）。删除（）；
$（'#container'）.html（数据）；
}
event.preventDefault（）；
});                 
$（“#进度”）.remove（）；
});
}

以下是索引页：
<html>
<head>
    <title>Title</title>
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon-precomposed" href="myCustomIcon.png" />
    <link rel="apple-touch-startup-image" href="myCustomStartupGraphic.png" />
    <link rel="stylesheet" href="iphone.css" type="text/css" media="screen" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="iphone.js"></script> 

</head>
<body>
    <div id="header">
        <h1>Menu</h1>
    </div>
    <div id="container"></div>

</body>
</html>


标题
菜单
只需将其放在JS中的提交按钮所在的页面上即可
<script type="text/javascript">
  $(document).ready(function(){
    $("input[type='submit']").attr("disabled", false);
    $("form").submit(function(){
      $("input[type='submit']").attr("disabled", true).val("Please wait...");
      return true;
    })
  })
</script>


$（文档）.ready（函数（）{
$（“input[type='submit']”）attr（“disabled”，false）；
$（“表格”）。提交（函数（）{
$（“input[type='submit']”）.attr（“disabled”，true）.val（“请稍候…”）；
返回true；
})
})

您可能需要使用on（）
事件处理程序或进行其他修补，具体取决于表单是否在页面加载时生成。
我仍然要提交两次表单-但我希望按钮更改为“请稍候”！表单是在加载时硬编码在页面上的，还是通过其他Javascript动态生成的？表单是从PHP脚本生成的。。。看来提交表格的次数越来越少。。。我想我可能需要解除提交事件的绑定，或者将它们移出加载页面功能。