I have a form with two buttons. The bottom one should submit the form to the server. In the middle of the form there is another button that needs to trigger a simple scoring function and add this score value in a new form field (which will or won't be submitted depending on its existence).

Using the Prototype js library, how would I cancel this middle button from submitting the form and have it perform my calculation/DOM addition function?

EDIT:

What I have currently isn't preventing the form submit...

$$('.form-submit-calculate').each(function(calculator){
calculator.observe("click",function(){alert('calculate'); return false; });
});

for

<div id="cid_31" class="form-input-wide">
                    <div style="margin-left:406px" class="form-buttons-wrapper">
                        <button id="input_31" class="form-submit-calculate">
                            Get Score
                        </button>
                    </div>
                </div>

I have a form with two buttons. The bottom one should submit the form to the server. In the middle of the form there is another button that needs to trigger a simple scoring function and add this score value in a new form field (which will or won't be submitted depending on its existence).

Using the Prototype js library, how would I cancel this middle button from submitting the form and have it perform my calculation/DOM addition function?

EDIT:

What I have currently isn't preventing the form submit...

$$('.form-submit-calculate').each(function(calculator){
calculator.observe("click",function(){alert('calculate'); return false; });
});

for

<div id="cid_31" class="form-input-wide">
                    <div style="margin-left:406px" class="form-buttons-wrapper">
                        <button id="input_31" class="form-submit-calculate">
                            Get Score
                        </button>
                    </div>
                </div>

• javascript
• forms
• prototypejs
• dom-events

4 Answers 4

Event.observe('scoreButton', 'click', function(e) {
    Event.stop(e);
  }
});

Your button does not need to automatically submit your form.

Give it a type="button" and nothing will happen. There is no default action with type="button". You set the action then in your JS.

Read more: http://reference.sitepoint./html/button

simply have the function which is attached to the click event of the button you don't want to submit return false. you can also use e.preventDefault within the event function.

This seems to do the trick for me:

$$('.form-submit-calculate').each(function(calculator){

            calculator.onclick = function(){
                    alert('calculate');
                    return false;
                }


        });

Feel free to tell me your better more elegant answer! (And why it is... I'm just hacking my way around Prototype right now, no idea what the best practices are.)