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

Share Improve this question Follow edited Jul 20, 2019 at 16:07 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 23, 2011 at 18:34 two7s_clashtwo7s_clash 5,83711 gold badge3030 silver badges4545 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

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