ajax - Onsubmit 表单不起作用

Question

这是我要单击提交然后运行功能的表单 HTML 和 JavaScript 代码ExportPublication()：

<form  onsubmit="ExportPublication()" class="form-horizontal" id="frmExportPublication" name="frmExportPublication" >
    <div class="control-group">
        <label class="control-label" for="inputPassword">email Pa</label>
        <div class="controls">
            <textarea name="emailBody" class="input-xlarge">file</textarea>
        </div>
    </div>
    <input type="submit" class="btn btn-primary" id="ExportPublicationButton" projectid="" value="submit">
</form>
<script>
function ExportPublication() {
    $.ajax({
        url: '@Url.Action("CreateOutput", "Publication", new { area = "Cartable" })',
        data: $("#frmExportPublication").serialize(),
        type: 'POST',
        beforeSend: function () {
            ajaxWaiting.showWaiting();
        },
        success: function () {
            $("#message").show();
            ajaxWaiting.hideWaiting();
            $('#ExportPublication').modal('hide');
        },
        error: function (req, status, error) {
            ajaxWaiting.hideWaiting();
        }
    });
}
</script>

当我点击提交时，功能不起作用。我该如何纠正？

Answer 1

你的功能应该是这样的：

   function ExportPublication() {
    event.preventDefault();
    $.ajax({
        url: '@Url.Action("CreateOutput", "Publication", new { area = "Cartable" })',
        data: $("#frmExportPublication").serialize(),
        type: 'POST',
        beforeSend: function () {
            ajaxWaiting.showWaiting();
        },
        success: function () {
            $("#message").show();
            ajaxWaiting.hideWaiting();
            $('#ExportPublication').modal('hide');
        },
        error: function (req, status, error) {
            ajaxWaiting.hideWaiting();
        }
    });
    return false;
 }

同样在表单上提交函数应该返回一个值..即;

  <form  onsubmit="return ExportPublication()" class="form-horizontal" id="frmExportPublication" name="frmExportPublication" >

Answer 2

代替

  <form  onsubmit="ExportPublication()" class="form-horizontal" id="frmExportPublication" name="frmExportPublication" >

如果您可以尝试像下面这样通过 javascript 绑定侦听器，那就很有魅力了！

document.forms.frmExportPublication.onsubmit = ExportPublication;

fiddle ，为简洁起见，已从 fiddle 中删除了您的 ajax 调用。