使用jQuery提交表单

Question

我想使用jQuery提交表单。有人能提供代码、演示或示例链接吗？

- mehul

Answer 1

这取决于您是通过常规提交表单还是通过 AJAX 调用来提交。您可以在 jquery.com 上找到大量信息，包括带有示例的文档。对于正常提交表单，请查看该站点上的 submit() 方法。对于 AJAX，有许多不同的可能性，但您可能想使用 ajax() 或 post() 方法之一。请注意，post() 实际上只是一种方便的方法，用于以简化且受限制的界面调用 ajax() 方法。

一个至关重要的资源，我每天都在使用的资源，您应该收藏它，那就是How jQuery Works。它有关于使用 jQuery 的教程，左侧导航可以访问所有文档。

示例：

正常

$('form#myForm').submit();

AJAX

$('input#submitButton').click( function() {
    $.post( 'some-url', $('form#myForm').serialize(), function(data) {
         // ... do something with response from server
       },
       'json' // I expect a JSON response
    );
});

$('input#submitButton').click( function() {
    $.ajax({
        url: 'some-url',
        type: 'post',
        dataType: 'json',
        data: $('form#myForm').serialize(),
        success: function(data) {
                   // ... do something with the data...
                 }
    });
});

请注意，上述ajax()和post()方法是等效的。您可以添加其他参数到ajax()请求中以处理错误等。

- tvanfosson

Answer 2

你需要使用$("#formId").submit()来提交表单。

通常情况下，你需要在一个函数内部调用此方法。

例如：

<input type='button' value='Submit form' onClick='submitDetailsForm()' />

<script language="javascript" type="text/javascript">
    function submitDetailsForm() {
       $("#formId").submit();
    }
</script>

您可以在Jquery网站上获取更多信息。

- Draco

---

如果你正在使用jQuery，为什么还要使用内联的onclick属性？ - nnnnnn

Answer 3

当您有一个现有表单需要与jQuery - ajax/post一起使用时，您可以：

• 保留表单的提交事件
• 阻止默认的提交功能

• 执行您自己的操作

$(function() {
    //hang on event of form with id=myform
    $("#myform").submit(function(e) {

        //prevent Default functionality
        e.preventDefault();

        //get the action-url of the form
        var actionurl = e.currentTarget.action;

        //do your own request an handle the results
        $.ajax({
                url: actionurl,
                type: 'post',
                dataType: 'application/json',
                data: $("#myform").serialize(),
                success: function(data) {
                    ... do something with the data...
                }
        });

    });

});

请注意，在上面的示例中，为了使serialize()函数正常工作，所有表单元素都需要定义其name属性。

表单示例：

<form id="myform" method="post" action="http://example.com/do_recieve_request">

<input type="text" size="20" value="default value" name="my_input_field">
..
.
</form>

@PtF - 在这个示例中，数据是使用POST提交的，这意味着您可以通过

 $_POST['dataproperty1'] 

其中dataproperty1是您JSON中的“变量名称”。

如果您使用CodeIgniter，这里是示例语法：

 $pdata = $this->input->post();
 $prop1 = $pdata['prop1'];
 $prop1 = $pdata['prop2'];

- womd

Answer 4

在jQuery中，我更喜欢以下方式：

$("#form-id").submit()

但是，你其实不需要使用jQuery来执行这个任务 - 只需使用普通的JavaScript：

document.getElementById("form-id").submit()

- gernberg

---

@windmaomao 我也遇到了同样的问题。我的 jQuery 可以运行所有其他函数，但无法提交表单。只需使用 document.getElementById 方法即可解决问题。 - ChallengeAccepted

Answer 5

从手册中获取：jQuery文档

$("form:first").submit();

- AdamSane

---

最好通过“id”提交表单，而不是查找第一个表单并提交它。然而，如果每次只有一个表单，则可以完美地工作。 - Chintan Thummar

Answer 6

有关信息
如果有人使用

$('#formId').submit();

不要做这样的事情

<button name = "submit">

花费了很多时间才发现我的submit()不会像这样起作用。

- A.Z. Soft

---

关键字“sumit”上的错别字使得答案不清楚，无法确定这个错别字是无意的还是与问题有关。你的意思是一个名为“submit”的按钮搞乱了jquery表单提交()吗？还是你的问题在于你给按钮命名为submit而不是标准的type="submit"？ - Daryn

我的意图并不是回答这个问题，而是告诉那些遇到这个问题的人。我认为问题出在没有定义类型的按钮名称上，因为我使用onclick事件在提交之前检查一些输入。如果类型=提交，则表单提交时不会触发我的onclick事件。 - A.Z. Soft

<button id="submit">无法提交。 - Babak Asadzadeh

Answer 7

使用jQuery来提交你的表单。 这里是链接http://api.jquery.com/submit/

<form id="form" method="post" action="#">
    <input type="text" id="input">
    <input type="button" id="button" value="Submit">
</form>

<script type="text/javascript">
$(document).ready(function () {
    $( "#button" ).click(function() {
        $( "#form" ).submit();
    });
});
</script>

- Chintan Thummar

---

虽然这是一篇旧帖子，但值得将类型button添加到您的按钮中，以确保表单不会提交（因为并非所有浏览器都以相同的方式处理没有类型的按钮）。 - Mikey

@Mikey 谢谢你的建议。 - Chintan Thummar

Answer 8

这将使用预加载程序发送表单：

var a=$('#yourform').serialize();
$.ajax({
    type:'post',
    url:'receiver url',
    data:a,
    beforeSend:function(){
        launchpreloader();
    },
    complete:function(){
        stopPreloader();
    },
    success:function(result){
         alert(result);
    }
});

我有一些诀窍可以使用随机方法重组表单数据的提交方式 http://www.jackart4.com/article.html

- jacky

---

你能发布更新后的链接吗？上面的链接已经失效了。 - Chris22

Answer 9

$("form:first").submit();

请查看events/submit。

- Ahmed Atia

Answer 10

请注意，如果您已经为表单安装了提交事件侦听器，则内部调用submit()函数可能会导致重复提交。

jQuery('#<form-id>').submit( function(e){ 
    e.preventDefault();
    // maybe some validation in here
    if ( <form-is-valid> ) jQuery('#<form-id>').submit();
});

won't 的作用是尝试为此表单的提交事件安装一个新的事件监听器（但失败了）。因此，您必须访问HTML元素本身（从jQquery中解除包装）并直接调用submit（）方法：

    jQuery('#<form-id>').submit( function(e){ 
      e.preventDefault();
      // note the [0] array access:
      if ( <form-is-valid> ) jQuery('#<form-id>')[0].submit();
    });

- gutschilla