两个提交一个ajax一个常规形式

时间:2015-12-21 18:10:28

标签: javascript php jquery ajax

我有这个表单,我试图用ajax提交以及常规提交常规提交用于创建pdf,而ajax提交用于显示html示例以显示预览哪个都工作正常如果我单独使用它们或在预览提交之前使用create pdf但是如果在预览之后提交pdf的sumbit不起作用,则不会发生像常规提交按钮被禁用的情况。我的代码附在下面,请注意,如果我首先使用ajax提交,那么正常的帖子工作正常并不起作用。

<script type="text/javascript">
    $('#submitpdf').submit(function() {
        return true;
    });

    $('#submitpreview').click(function() {
        $('#form').submit(function(event) { // catch the form's submit event
            $.ajax({ // create an AJAX call...

                data: $(this).serialize(), // get the form data
                type: $(this).attr('GET'), // GET or POST
                url: 'test.php', // the file to call
                success: function(response) { // on success..
                    $('#created').html(response); // update the DIV

                }
            });
            return false;
        });
    });
</script>

这里是表单标签和提交按钮的HTMl:

<form action="dopdf.php" name="formular" id="form" method="GET" enctype="multipart/form-data">
<input type="submit" id="submitpdf" value="Create PDF" name="print" class="btn btn-primary submit-button" onclick="javascript:document.getElementById('act').value='0'" style="margin-left: 0;" />
<input id="submitpreview" type="submit" value="Preview!" name="preview" class="btn btn-primary submit-button" onclick="javascript:document.getElementById('act').value='0'" style="margin-left: 0;" />
      </form>

另外需要注意的是,使用ajax我想提交给&#34; test.php&#34;并定期提交我想提交给&#34; dopdf.php&#34;。

2 个答案:

答案 0 :(得分:1)

单击submitPreview按钮的代码对我来说看起来不正确(点击处理程序上的,你基本上是在注册提交事件代码!)。尝试更改为此干净版本。此外,请确保将事件处理程序代码包装在document.ready事件中以避免其他问题。

此外,您还需要阅读表单的method属性,而不是GET属性。

$(function(){

   $('#submitpreview').click(function(e) {

      e.preventDefault(); // prevent the default form submit behaviour
      var _this=$(this).closest("form");

      $.ajax({ // create an AJAX call...

        data:_this.serialize(), // get the form data
        type: _this.attr('method'), // GET or POST
        url: 'test.php', // the file to call
        success: function(response) { // on success..
           $('#created').html(response); // update the DIV    
        }

      });
  });

});

由于您的表单操作值设置为dopdf.php,因此当用户点击该按钮时,它将提交给dopdf.php。你不需要任何额外的jQuery点击处理程序。

答案 1 :(得分:0)

您可以执行以下操作

  • 你的脚本

    $('#form').submit(function() {
         $.ajax({ // create an AJAX call...
    
            data: $(this).serialize(), // get the form data
            type: $(this).attr('GET'), // GET or POST
            url: 'test.php', // the file to call
            success: function(response) { // on success..
                $('#created').html(response); // update the DIV
    
            }
        });
    });
    

和表格一样。不要改变它