Handling form data from javascript function

Question

I have a form with an ID of 'manage_campaigns'.

I'm trying to call a function and send the form data to a javascript function by using this for the submit button, onclick:

javascript:updateAffiliateCampaigns(this);

This is the javascript function I have so far:

function updateAffiliateCampaigns(oForm) {}

I really only have a checkbox list of campaign id's that are being used in the form. How would I pass which items are checked to the function, and then how would I handle the data in the javascript function?

Ish · Accepted Answer · 2011-01-11 19:19:10Z

1

You might use 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;
})

edited Jan 11, 2011 at 19:19

answered Jan 11, 2011 at 19:12

Ish

29.8k11 gold badges62 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter Bailey · Accepted Answer · 2011-01-11 19:24:45Z

Ok, we've got a few things to cover before getting to your actual question

The javascript: pseudo-protocol is only useful in href attributes of anchor elements
When using this inside an event attribute (like onclick) it always refers to the element itself. So if you put that on a submit button like so <input type="submit" onclick="updateAffiliateCampaigns(this)" then this will not reference the form, but the submit button itself
But that's OK because all form element DOM nodes have a form property that references their containing form node.
Submit buttons try to submit the form regardless of any javascript execution unless you use javascript to cancel the default action, which in this example is achieved by returning false to the event attribute

Now that we've covered that...

DOM form objects have a property called elements, which itself has properties representing the form element's names.

So with this as our example 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>

You might then write your function like 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;
}

Now is the part where I tell you that knowing this stuff is good, but you're also doing it The Hard Way. JavaScript libraries like jQuery and YUI have made doing tasks like this much, much simpler.

Collectives™ on Stack Overflow

Handling form data from javascript function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related