使用jQuery提交表单

Question

我想用jQuery提交表单。有人可以提供代码，演示或示例链接吗？

Answer 1

从手册：jQuery Doc

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

Answer 2

你将不得不使用$("#formId").submit()。

您通常会在函数中调用此函数。

例如：

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

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

你可以在此对Jquery website的更多信息。

Answer 3

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

参见events/submit。

Answer 4

您还可以使用jQuery的形式插件使用AJAX藏汉提交：

http://malsup.com/jquery/form/

Answer 5

这取决于你是否正常，或通过一个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()请求处理错误的其他参数等

Answer 6

在jQuery中，我宁愿以下几点：

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

但话又说回来，你真的不需要jQuery来执行任务 - 只要使用正规的JavaScript：

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

Answer 7

我也用下面的提交表单（实际上没有提交它）通过Ajax：

jQuery.get("process_form.php"+$("#form_id").serialize(), {}, 
    function() { 
     alert("Okay!"); 
    }); 

Answer 8

我推荐一个通用的解决方案，因此您不必为每个表单添加代码。使用jquery表单插件（http://jquery.malsup.com/form/）并添加此代码。

$(function(){ 
$('form.ajax_submit').submit(function() { 
    $(this).ajaxSubmit(); 
      //validation and other stuff 
     return false; 
}); 

}); 

Answer 9

function form_submit(form_id,filename){ 
    $.post(filename,$("#"+form_id).serialize(), function(data){ 
     alert(data); 
    }); 
} 

将张贴在通过AJAX您指定的文件名的表单数据。

Answer 10

jQuery("a[id=atag]").click(function(){ 

    jQuery('#form-id').submit();  

      **OR** 

    jQuery(this).parents("#form-id").submit(); 
}); 

Answer 11

，你可以做这样的：

$('#myform').bind('submit', function(){ ... }); 

Answer 12

注意，在Internet Explorer中存在与动态创建的形式问题。这样创建的表格将不会在IE提交（9）：

var form = $('<form method="post" action="/test/Delete/">' + 
      '<input type="hidden" name="id" value="' + myid + '"></form>'); 
$(form).submit(); 

为了得到它工作在IE创建表单元素，并利用像这样之前接好：

var form = document.createElement("form"); 
$(form).attr("action", "/test/Delete") 
     .attr("method", "post"); 
$(form).html('<input type="hidden" name="id" value="' + myid + '" />'); 
document.body.appendChild(form); 
$(form).submit(); 
document.body.removeChild(form); 

创建等形式实施例1中，然后将其附着将无法正常工作 - 在IE9它抛出一个JScript错误DOM Exception: HIERARCHY_REQUEST_ERR (3)

道具托米瓦@https://stackoverflow.com/a/6694054/694325

Answer 13

这将发送形式预加载：

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

i'have一些技巧，使一形式的数据后重整与随机方法http://www.jackart4.com/article.html

Answer 14

IE特技动态形式：

$('#someform').find('input,select,textarea').serialize(); 

Answer 15

目前为止的解决方案要求您了解表单的ID。

使用此代码提交表单，而无需知道该ID：

function handleForm(field) { 
    $(field).closest("form").submit(); 
} 

例如，如果你想处理一个按钮的点击事件，你可以使用

$("#buttonID").click(function() { 
    handleForm(this);  
}); 

Answer 16

你可以这样使用它：

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

或

document.formName.submit(); 

Answer 17

，当你有一个现有的形式，即现在应该用jQuery工作 - AJAX /后现在你可以：

• 挂到提交 - 您的形式
• 的情况下防止提交的默认功能

• 做你自己的东西

  $(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中的“variable-name”。

这里样本语法，如果你使用的CodeIgniter：

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

Answer 18

使用它使用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> 

Answer 19

需要注意的是，如果你已经安装了你的形式提交事件侦听器，将肠子调用提交（）

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

不会的工作，因为它试图为此表单的提交事件安装新的事件侦听器（失败）。所以，你必须存取权限的HTML元素本身（从jQquery拆开包装），并调用提交（）这个元素直接：

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

Answer 20

如果按钮位于表单标签之间，我更喜欢这个版本：

$('.my-button').click(function (event) { 
    var $target = $(event.target); 
    $target.closest("form").submit(); 
}); 

Answer 21

我的做法略有不同的变化将按钮提交按钮，然后单击

$("#submit").click(function(event) { 
$(this).attr('type','submit'); 
$(this).click(); 
});