1

I am wanting to use two button form and created the following which works. It however breaks any other events on the page but I can't figure out why. Is there a better way?

        window.addEvent('domready', function() {
        $('vote1').addEvent('click',function() {  
            new Element('input', { 
                    'type': 'hidden', 
                    'name': 'winner', 
                    'id': 'vote1id', 
                    'value': 'vote1' 
                }).inject($('voterform'));
            $('vote_wrapper').setStyle('display','none');
        });

        $('vote2').addEvent('click',function() { 
            new Element('input', { 
                    'type': 'hidden', 
                    'name': 'winner', 
                    'id': 'vote2id', 
                    'value': 'vote2' 
                }).inject($('voterform'));
            $('vote_wrapper').setStyle('display','none');   
        });

        $('voterform').addEvent('submit', function(e) {
            e.stop();
            var log = $('v_wrapper').empty().addClass('loader');
            this.set('send', {onComplete: function(response) { 
                log.removeClass('loader');
                $('v_wrapper').set('html', response).set("tween", {duration: 2500}).setOpacity(0).fade(1);
            }});
            this.send();
        });
    });
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
JJohn
  • 75
  • 1
  • 9
  • what other events does that break? very od - i dont see anything wrong with your code. one thing you can do to save yourself supporting two sets of handlers, keep vote1 code as is, set click handler on vote2 to do 1document.id("vote1").fireEvent("click");`. else, post more on problem please – Dimitar Christoff Sep 30 '10 at 16:23
  • I guess I should have said requests. Any type of html request isn't returned via ajax but breaks to a new page with the result. – JJohn Sep 30 '10 at 16:32
  • i see. hence you may have one of two things: an uncaught exception that causes your callback function not to run, hence the default browser behaviour takes place (i run the code above through jslint so whatever it is, it's not syntax or not in this code block). and two: un-properly dealt with event / bubbling once again fails to stop the default action. __are you saying that you can remove both click event handlers and it makes your form work through XHR though?__ you refer to `$('v_wrapper')` and `$('vote_wrapper')` - is this intentional? – Dimitar Christoff Oct 01 '10 at 08:40

1 Answers1

0

In the code above if $('vote1') or $('vote2') are links or form buttons you will want to modify your code as follows to prevent the default action from occurring:

    $('vote1').addEvent('click',function(e) {
        e.stop();  
        new Element('input', { 
                'type': 'hidden', 
                'name': 'winner', 
                'id': 'vote1id', 
                'value': 'vote1' 
            }).inject($('voterform'));
        $('vote_wrapper').setStyle('display','none');
    });

    $('vote2').addEvent('click',function(e) {
        e.stop();  
        new Element('input', { 
                'type': 'hidden', 
                'name': 'winner', 
                'id': 'vote2id', 
                'value': 'vote2' 
            }).inject($('voterform'));
        $('vote_wrapper').setStyle('display','none');   
    });
Tim Wickstrom
  • 5,476
  • 3
  • 25
  • 33