Member Avatar for Aeonix

<input id="aaa" onclick="scrollTo('registerBox'); return false;" formaction="register.php" type="submit" value="Register" />

If JavaScript is enabled (which it is, and it's working on other functions and triggers). Shouldn't it execute scrollTo("registerBox"); and don't do anything (return false;).
Am I missing something? I don't want it to formaction if JavaScript is enabled.

  • 3 Contributors
  • 3 Replies
  • 387 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

Short answer for : the problem is most likely the handler (or the call you make inside it), not the HTML attribute. A few concrete facts and a robust pattern to get the behavior you want (no submission when JavaScript is enabled, submit when JS is disabled).

  • window.scrollTo does not accept an element ID string. To scroll to an element by ID use the element API (for example, element.scrollIntoView) or compute the element's offset and call window.scrollTo with numbers. If your inline call throws an error, the rest of the onclick handler (including return false) never runs and the form will submit — check the developer console for errors first.
  • Keep markup and behavior separate (as suggested) and use progressive enhancement: leave the input as a submit with a formaction for no-JS users, but convert it to a non-submitting control or attach JS that prevents submission when JS is available.

Example (different approach from earlier replies): change the control to a button on DOM ready and use scrollIntoView for smooth scrolling.

document.addEventListener('DOMContentLoaded', function () {
  var btn = document.getElementById('aaa');
  var target = document.getElementById('registerBox');
  if (!btn || !target) return;
  // make it non-submitting in JS-enabled browsers
  btn.type = 'button';
  btn.addEventListener('click', function () {
    if (target.scrollIntoView) {
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    } else {
      window.scrollTo(0, target.offsetTop);
    }
  });
});

Notes and quick checks:

  • Returning a value from an addEventListener handler does nothing; use e.preventDefault() there if you prefer not to change type. Inline onclick="...; return false;" can prevent submission, but it will fail if an exception occurs earlier in the handler (see console).
  • If you want to debug, confirm the element IDs match, open DevTools for errors, and ensure the script runs after the DOM is ready.
  • ’s snippet that returns a string won’t stop the default submit behavior in the addEventListener model — that’s why the unobtrusive approach above is more reliable.

Recommended Answers

All 3 Replies

Member Avatar for Member #1132231

There you go now type in the body area this not in the script tags
make a function that returns ot not just a button i know you returned false and that might be why and also i did not heard of formaction ( i am learning JavaScript)

     <input onClick=" return 'Hey!'" formaction="register.php" type="submit" value="Register"/>
Member Avatar for Aeonix

Sorry, but your snippet returns 'Hey!', I don't need it to return anything, I need it to execute mentioned function and return nothing.
That answer doesn't bring me closer to expectations.

And without punctionation and seperation it's hard to get by what you mean with "There you go now type in the body area this not in the script tags make a function that returns ot not just a button i know you returned false and that might be why".

Edited by Aeonix
Member Avatar for gentlemedia

For starter I'd recommend to take out the onclick attribute from the HTML. Keep structure and behavior seperate.

<input id="aaa" formaction="register.php" type="submit" value="Register" />

And then within <script> tags

document.getElementById('aaa').addEventListener('click', function (e) {
    e.preventDefault();
    // scrollTo here
});

or with jQuery

$('#aaa').on('click', function (e) {
    e.preventDefault()
    // scrollTo here
})
commented: Agreed +15
commented: I guess it's better practice, than to skip back and forth. +4
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.