Question

我正在通过加载功能加载具有表单的html页面（partialpage.html），但是在主页面中加载此表单后，表单未提交。加载表单的jquery代码位于主页面中。

部分partialpage.html：

 <div id="askcon">
    <table align="center" cellspacing="5" cellpadding="5" border="0" class="tb1">

    <form name="f1" id="f1" >
    <tr>
    <td><input type="text" name="name" id="box5"/></td>

    <td><input type="text"  name="fname"  id="box5"/></td>
    </tr>
    <tr>
    <td colspan="2">
    <input type="submit" id="box7" class="sub" />
    </td>
    </tr>
    </form>
    </table>
    </div>

加载此partialpage.html的主页面中的Jquery：

<script>
 $("#f1").on("submit", function(event) {
         event.preventDefault();               
         $.ajax({
         type: 'POST',
         url: 'post.php',
         data: $(this).serialize(),       
         dataType: 'json',
         error : function(){ alert("error");}
   }).done(function(data) {
        if ('url' in data) {
            $("#askcon").load("form.htm", function () {
                $('#resfname').html(data.fname);       
                $('#resurl').html(data.url);

            });
        }
});
});
</script>

Answer 1

我认为，如果我做对了，你将你的函数用.done排队到.on（“submit”，...）而不是成功：函数到ajax请求。不过，正如我上面提到的，你必须进入.load（）问题。我没有更正你的这部分代码。

$("#f1").on("submit", function(event) {
        event.preventDefault();               
        $.ajax({
            type: 'POST',
            url: 'post.php',
            data: $(this).serialize(),       
            dataType: 'json',
            error : function(){ alert("error");},
            success: function(data) {
                if ('url' in data) {
                    $("#askcon").load("form.htm", function () {
                        $('#resfname').html(data.fname);       
                        $('#resurl').html(data.url);
                    });
                }
        });
});

表单未提交通过加载功能加载的表单

1 个答案: