Umgang mit Formulardaten von JavaScript-Funktion

Question

Ich habe ein Formular mit der ID 'manage_campaigns'.

Ich versuche, eine Funktion aufzurufen und die Formulardaten an eine Javascript-Funktion zu senden, indem Sie diese für den Absenden-Button, Onclick:

javascript:updateAffiliateCampaigns(this); 

Dies ist die JavaScript-Funktion ist habe ich bisher:

function updateAffiliateCampaigns(oForm) {} 

Ich habe wirklich nur eine Checkbox-Liste von Kampagnen-IDs, die im Formular verwendet werden. Wie würde ich übergeben, welche Elemente auf die Funktion überprüft werden, und wie würde ich dann mit den Daten in der JavaScript-Funktion umgehen?

Answer 1

Sie könnten verwenden 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, haben wir ein paar Dinge zu decken, bevor Sie den eigentlichen Frage bekommen

1. Das javascript: Pseudo-Protokoll ist nur nützlich in href Attribute von Ankerelementen
2. Bei Verwendung this innerhalb eines Ereignisattributs (wie onclick) bezieht sich immer auf das Element selbst. Also, wenn Sie das auf eine Schaltfläche zum Senden so wie <input type="submit" onclick="updateAffiliateCampaigns(this)"this wird nicht auf das Formular verweisen, aber die Schaltfläche senden selbst
3. Aber das ist OK, weil alle Formularelement DOM-Knoten eine form -Eigenschaft, die ihre enthaltenen Form Knoten verweist.
4. Senden Tasten versuchen, das Formular unabhängig von einer Javascript-Ausführung es sei denn, Sie Javascript einreichen verwenden, um die Standardaktion, die in diesem Beispiel löschen durch die Rückkehr false auf das Ereignis erreicht wird Attribut

Nun, da wir Das Objekt

DOM form Objekte haben eine Eigenschaft namens elements, die selbst Eigenschaften hat, die die Namen der Formularelemente darstellen.

Also mit diesem als Beispiel Form

<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> 

Sie können dann Ihre Funktion schreiben, wie so

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; 
} 

Nun ist der Teil, wo ich Ihnen sagen, dass diese Dinge zu wissen, ist gut, aber Sie Mach es auch auf die harte Tour. JavaScript-Bibliotheken wie jQuery und YUI haben Aufgaben wie diese sehr viel einfacher gemacht.