Page scrolls to the top on submit


I have a simple calculator script on my website and when I click the calculate it works perfectly. However, if I hit the return button after putting the input, it does the calculation and page scrolls all the way to the top. It also deletes the data from the form. Here is my fiddle: Does anyone have any idea how I can fix this?


What you’re describing sounds like the form is submitting to itself, which would make it look like the data is being erased from the fields and then scrolling to the top of the form.

If you use preventDefault() or change the submit button to <input type="button" />, that should fix it.



UPDATE: It isn’t doing that, for me. Works as advertised.

It is already and still acts the same way… Only when I hit return though. If I click the button with mouse, it works perfectly.

AH! Okay… hitting return is actually submitting the form, most likely. I thought I saw some code that would detect the keypress. If you can, set all fields so that the return key is ignored. That should prevent the form from submitting.



Sorry but what did you exactly mean by setting all fields?

Sorry… I meant give each field a keypress or keydown attribute that will check the value of the key pressed, and return false; if the key is return/enter (which I think is code 13.)



This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.