javascript関数からのフォームデータの処理

Question

IDが 'manage_campaigns'のフォームがあります。

私はonclickの、関数を呼び出して送信ボタンのためにこれを使用してJavaScript関数にフォームデータを送信しようとしている：

javascript:updateAffiliateCampaigns(this); 

これは、これまで私が持っているjavascript関数である：

function updateAffiliateCampaigns(oForm) {} 

私は実際にフォームで使用されているキャンペーンIDのチェックボックスリストしか持っていません。 関数にチェックされる項目をどのように渡すのですか？そして、javascript関数のデータをどのように処理しますか？

Answer 1

あなたが使用する可能性がありますjqueryの（http://jsfiddle.net/bkAMR/）

$('#manage_campaigns').submit(function(){ 
    var formData = $(this).serialize(); 
    $.ajax({ 
     url: $(this).attr('action'), 
     data: formData, 
     success: function(data) { 
      // I got Donut 
      alert(data); 
     }, 
    }); 
    return false; 
}) 

Answer 2

[OK]を、私たちはあなたの実際の質問に入る前にカバーするためにいくつかのことを持っている

1. javascript:疑似プロトコルは、hrefアンカー要素の属性でのみ有効です
2. thisのイベント属性（onclickなど）内で使用する場合、常に要素自体を参照します。したがって、<input type="submit" onclick="updateAffiliateCampaigns(this)"のようにサブミットボタンに入れた場合、thisはフォームを参照しませんが、送信ボタン自体
3. すべてのフォーム要素のDOMノードには、フォームノードDOMを参照するformプロパティがあるので問題ありません。
4. 送信ボタンを使用すると、この例では、我々は「は今イベント属性

にfalseを返すことによって達成されるデフォルトのアクションを、キャンセルするJavaScriptを使用しない限り、任意のJavaScriptの実行に関係なく、フォームを送信しようとしますそれをカバーしています...

DOM formオブジェクトにはelementsと呼ばれるプロパティがあり、それ自体がフォーム要素の名前を表すプロパティを持っています。

だから、これで私たちの例フォーム

<form> 
    <input type="checkbox" name="campaign" value="1" /> 
    <input type="checkbox" name="campaign" value="2" /> 
    <input type="checkbox" name="campaign" value="3" /> 

    <input type="submit" value="go" onclick="return updateAffiliateCampaigns(this.form);" /> 
</form> 

としてあなたはその後、今、あなたはこのようなものを知ることが良好であることを私はあなたを伝える部分であるが、そう

function updateAffiliateCampaigns(oForm) 
{ 
    console.log(); 
    var campaign = oForm.elements.campaign; 
    var checked = []; 

    for (var i = 0, l = campaign.length; i < l; i++) 
    { 
    if (campaign[i].checked) 
    { 
     checked.push(campaign[i].value) 
    } 
    } 

    // The variable "checked" now contains the values of 
    // all checked items 

    return false; 
} 

のようなあなたの関数を書くかもしれませんハード・ウェイもやっているよ。 jQueryやYUIのようなJavaScriptライブラリは、このような作業をずっと簡単にしました。