This question is somehow similar to this one.
I have a form in my ecommerce solution. When you insert something into the cart, you can change number of items. The cart is whole in one form. The form has two submit buttons – recalcualte and continue (which will take buyer to Step 2 of the process).
When user changes the number of items using the inputs, he can either hit recalculate (which sends post to app that will change the numbers in session/db) or continue (that will also send the post data to recalculate and then take user to the step 2).
But when user hits enter, the recalculate button takes precedence.
What I want is to make the recalculate button submit the form, but ONLY when clicked and NOT when submited by pressing enter. In contrast the “continue” button should work also with enter.
The solution MUST NOT use javascript as the frontend has to be useable without JS enabled.
Any ideas?
Put the button that takes precedence first in your html sourcecode, and use markup to invert the position of the two buttons?
Edit: you say your layout can’t handle that.
Either:
1. Change the layout. Functionality is more important, and for layout there is more than one way to do it.
2. Have the form not check if “recalculate” or “submit” was pressed, but rather if the shown price was correct with the calculated prize. Example:
User buys 1 item, value 3 dollar.
User buys 2 items, value 5 dollar.
Total prize: 13 dollar.
User now changes the 1 item into 4 items. 3 dollar becomes 12 dollar, but he doesn’t hit recalculate.
Have a field in your form that shows the total amount (a hidden field is nicest). When the user submits the form, redo the calculation. If the calculated prize equals the prize in the hidden field, the user knew the final correct prize. If it differs, reshow the form mentioning “You changed your shopping cart, the total prize has been updated to reflect these changes. Verify the amount and submit to purchase” or something.