獲取HTMLFormElement從jQuery的）對象提交（

所以我有這個片段捕捉提交：獲取HTMLFormElement從jQuery的）對象提交（

$(function(){ 
    $('#xhr2_form').submit(function(e){ 
     e.preventDefault(); 
     sendForm(); 
    }); 
});

和這個片段應用XHR 2表單提交

var xhr = new XMLHttpRequest(); 

function sendForm() { 
    var myForm = $('#xhr2_form'); 

    // get fields 
    var values = {}; 
    $.each($('#xhr2_form').serializeArray(), function(i, field){ 
     values[field.name] = $(this).val(); 
    }); 

    // append data 
    var formData = new FormData(myForm); 
    formData.append('type',values['type']); 

    xhr.open('POST', '/test/xhr2', true); 
    xhr.onload = function(e){}; 

    xhr.send(formData); 
}

問題是API對於FORMDATA接受一個HtmlFormElement如下記載：

http://dev.w3.org/2006/webapi/XMLHttpRequest-2/#the-formdata-interface

問題是我試圖從Jquery的提交事件中檢索HTMLFormElement，但我不知道如何。

沒有JS，這是它是如何做：

<form id="myform" name="myform" action="/server"> 
    <input type="text" name="username" value="johndoe"> 
    <input type="number" name="id" value="123456"> 
    <input type="submit" onclick="return sendForm(this.form);"> 
</form> 

function sendForm(form) { 
    var formData = new FormData(form); 

    formData.append('secret_token', '1234567890'); // Append extra data before send. 

    var xhr = new XMLHttpRequest(); 
    xhr.open('POST', form.action, true); 
    xhr.onload = function(e) { ... }; 

    xhr.send(formData); 

    return false; // Prevent page from submitting. 
}

所以我怎麼jQuery中的HTMLFormElement？

來源

2011-07-05 yretuta

只是一個提示訪問事件的原始元素，jQuery的已經內置支持從一種形式，像這樣得到的表單數據：'$（「＃id_of_form」）序列化（） '< - 查詢字符串格式的文本。這使得它可以減少很多代碼。 – Alxandr

僅僅是你提供一個jQuery對象，而不是一個DOM節點的問題？如果是這樣的話，你應該沒問題，只需從對象中檢索第一個元素（除非你有一些像在頁面上的另一個xhr2_form那樣無效）會給你所需要的表單元素。

function sendForm() { 
    var myForm = $('#xhr2_form'); // this is a jQuery object 

    // ... 

    /* 
    * myForm is a jQuery object 
    * myForm[0] is the first element of the object, in this case whichever 
    * node has the ID "xhr2_form" 
    */ 
    var formData = new FormData(myForm[0]); 

    // ... 
}

你也可以使用.get檢索（不要與$.get混淆），像這樣：

$("#xhr2_form").get(0); // or myForm.get(0);

此外，作爲一個方面說明，當你使用jQuery來搜索一個ID，如$("#some_id")，之後它確定some_id is a potentially valid ID，它uses getElementById to find the node anyway。

來源

2011-08-15 09:24:58 brymck

這應該做的工作。 –

我不確定要了解您的問題。

要獲得HTMLFormElement，只需使用： document.getElementById("myform")

alert(document.getElementById("myform")) ; // Return HTMLFormElement

或者使用jQuery：

alert($("#myform")[0]); // Return HTMLFormElement

來源

2011-08-15 09:24:12

也是一個有效的選項，很好的舊document.getElementById :) –

在事件本身中，值this應該是表單元素。或者，你可以通過$(e.target)或$(e.originalTarget)

來源

2011-08-16 00:03:09 Stephen

這是XHR2教程的示例代碼，Jquery是否支持XHR2？ – yretuta

啊，我錯過了這一點，編輯了我的答案，並刪除了我的琢磨。 – Stephen

$(function(){ 
    $('#xhr2_form').submit(function(e){ 
     e.preventDefault(); 
     sendForm($(this).parents('form')); 
    }); 
});

來源

2011-08-19 17:11:39 Bene

獲取HTMLFormElement從jQuery的）對象提交（

回答

相關問題