使用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(); 
});