javascript - 在表单帖子上调用 Javascript 以通过 jQuery 更新 UI

Question

我有一个提交表单的 Input 元素：

<input type="submit" value="Download" id="downloadButton" class="btn-download" />

我需要按钮来调用 javascript 函数，然后正常发布表单。

在 jQuery 中如何做到这一点？

Answer 1

$('#downloadButton').on('click', function (e) {
    e.preventDefault();
    //call your function here
    $(this).parents('form').submit();
});

该preventDefault()调用很重要，因为它会停止提交表单，因此您可以在最后调用表单提交之前调用您的函数。

Answer 2

你可以做：

<form onsubmit="return doSomething();">
</form>

function doSomething() {
    // do something
    return true;
}

如果在doSomething函数中您不喜欢所看到的内容，则返回false而不是true.

编辑

jQuery 等效项（以满足两个评论者）：onsubmit从 HTML 中删除并替换为：

jQuery(document).ready(function () {
    jQuery("form#myFormId").submit(doSomething);
});

Answer 3

看看这个jsfiddle

它在提交表单之前将文本框内容的大小写更改为大写

$('#formID').on('submit', function () {

    //var form = $(this),
    //input = form.find('input[type="text"]');
    //input.val(input.val().toUpperCase());
    //alert(input.val());        
    // call your function here!
});

Answer 4

jsFiddle在这里

将输入类型更改为type="button"并使用：

$('#downloadButton').click(function() {
    //Do any javascript stuff here
    //And here, etc. Then, when ready...
    $('#yourFormID').submit();
});

我建议为您的表单分配一个 ID 属性，因为这是一种很好的做法。

<form id="yourFormID" action="" method="POST">

也许您在此页面上只有一个表格，在这种情况下$('form').submit()很好。但是将来（或者甚至在这个页面上，你还没有说）你可能在一个页面上有多个表单，因此需要 ID 来指定要提交的确切表单。

请注意，如果您不将提交按钮元素的更改<input type="submit"为<input type="button"，那么您必须使用e.preventDefault()来阻止按钮的默认操作。为什么要为此烦恼？只需更改type="button"和使用更少的代码和更少的未来混乱。

Answer 5

这就是您的要求： 1.- 单击按钮（添加事件处理程序） 2.- 调用函数 3.- 提交表单

myfunction(){
 //do wathever you want
 $('#formid').submit();
}

$(document).on("click", "#downloadButton", myfunction);

你也可以这样做：

$(document).on("click", "#downloadButton", function(event){
  $('#formid').submit();
});

没有额外的功能

但@Paritosh 的解决方案更准确。

Answer 6

在表单上添加提交事件。

$('form').submit(function(event){
    event.preventDefault();
    var formObj = $(this);
    var formData = formObj.serialize();
    $.ajax({
        type: 'post',
        data: formData
    }).done(function(response){
        console.info(response);
        // update UI here accordingly.
    });
});