javascript - 两个提交一个ajax一个常规表单

Question

我有这个表单，我正在尝试使用ajax提交以及常规提交，常规提交用于创建pdf，而ajax提交用于显示一个html示例以显示预览，如果我的话，两者都可以正常工作单独使用它们或在预览提交之前使用创建 pdf，但如果在预览提交之后提交 pdf，则它不起作用，不会发生像常规提交按钮被禁用一样的情况。我的代码如下所示，请注意，两者都工作正常，只是如果我先使用 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我想提交到“test.php”，而使用常规提交我想提交到“dopdf.php”。

Answer 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 单击处理程序。