Beefy Boxes and Bandwidth Generously Provided by pair Networks
laziness, impatience, and hubris
 
PerlMonks  

Attaching to Particular Form Submissions

by andyford (Curate)
on Nov 27, 2007 at 22:08 UTC ( [id://653388]=monkdiscuss: print w/replies, xml ) Need Help??

I want to attach an event (via javascript in the Free Nodelet, of course) to certain form submissions and I got a basic concept working (cribbed from the examples in "Learning Javascript"):

if (window.addEventListener) { window.addEventListener("load",setupEvents,false); } else if (window.attachEvent) { window.attachEvent("onload", setupEvents); } else { window.onload=setupEvents; } function setupEvents(evnt) { document.forms[1].onsubmit=myAlert; } function myAlert() { alert("gackerriffic"); }
So cool, I get a javascript alert when I activate the second form on any page. However, I want to target form submissions of a particular type, which is not always the second form.

I'm thinking I want to request that the forms on perlmonks be given names or id attributes so I can pick them out easily. Is there another way?

Replies are listed 'Best First'.
Re: Attaching to Particular Form Submissions
by erroneousBollock (Curate) on Nov 28, 2007 at 06:28 UTC
    if (window.addEventListener) { window.addEventListener("load",setupEvents,false); } else if (window.attachEvent) { window.attachEvent("onload", setupEvents); } else { window.onload=setupEvents; }
    Great, you're attaching a handler to the 'load' event non-destructively, but then...

    function setupEvents(evnt) { document.forms[1].onsubmit=myAlert; } function myAlert() { alert("gackerriffic"); }
    ... you're destructively assigning to document.forms[1].onsubmit (clobbering any event handler that may already be present).

    A better idea is to use the following:

    var isIE = /*@cc_on!@*/false; // is the browser Internet Explorer +? var addEvent = !isIE ? function (obj, type, fn) { obj.addEventListener(type, fn, fals +e); } : function (obj, type, fn) { obj['e'+type+fn] = fn; obj[type+fn] = function(){ obj['e'+type+fn](window.event); } +; obj.attachEvent('on'+type,obj[type+fn]); }; addEvent(window,'load',function(evt) { addEvent(this.document.forms[1],'submit',function(evt) { alert("gackerriffic"); }); });

    (Any browser that implement neither addEventListener nor attachEvent is not worth supporting... the case for IE is already marginal ;)

    If you must clobber a node's event handler 'slot' (eg: for reasons of event ordering) consider assigning an event handler that references the existing handler.

    myNode.onevent = function() { // your code if (myNode.onevent) myNode.onevent.call(myNode,arguments); };

    I want to target form submissions of a particular type, which is not always the second form.

    I'm thinking I want to request that the forms on perlmonks be given names or id attributes so I can pick them out easily. Is there another way?

    Each of the different kinds of page (usually) has a seperate nodeid (can be parsed from document.location.href).

    As an example, the 'Comment On' page has node_id=3333 and takes a get parameter of the form parent=123456 to refer to the node being commented upon.

    As mentioned above, you can also look for certain things in the document.body.innerHTML.

    As an example, once you've submitted the 'Comment On' page (via preview) you can no-longer parse the parent nodeid from the document.location.href. It can be found in the main form of the (preview) page in a hidden input named 'note_parent_node'.

    If XPath is available (either natively, or via a selector library like jQuery), I highly recommend it over using regular expressions to parse the contents of the pages.

    -David

Re: Attaching to Particular Form Submissions
by moritz (Cardinal) on Nov 27, 2007 at 22:21 UTC
    You can always check for the button text, and looking at the source code of this very page I see a few names assigned - isn't that enough for your purpose?

    What is your purpose, by the way?

      The motivator was to get a mini-feed entry on facebook when I post a new node on perlmonks. It's not horribly useful or substantial, but it's a step up from facebook's usual pokes and virtual drinks and werewolf bites.

      My wordpress blog has a plugin (wordbook) that posts to facebook automatically when I write a blog entry, so I hope to copy from the plugin and translate it javascript.

      The big picture is that the web is full of disparate communities, and I want to create some links.

      Your suggestion looks like it has merit. Thanks!

Log In?
Username:
Password:

What's my password?
Create A New User
Domain Nodelet?
Node Status?
node history
Node Type: monkdiscuss [id://653388]
Approved by Arunbear
help
Chatterbox?
and the web crawler heard nothing...

How do I use this?Last hourOther CB clients
Other Users?
Others studying the Monastery: (9)
As of 2024-03-28 08:57 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    No recent polls found