CODEWITHSUNDEEP
javascriptjqueryscrollonclick
Camila
Camila

Reputation: 177

Scroll on next button

Trying to scroll to next button on button click:

It works when you click on the title, but not when you click on Here is code: https://codepen.io/anon/pen/YQyNyw

Anyone ideas?

Particular part that I'm having trouble with:

let activeIndex = 0; let scrollTopPadding = -100; let wrapper; let fields;


$(document).ready(() => {   wrapper = $('.wrapper');   fields = $('.field');    fields.click(function() {
    scrollToActiveField(this);   });
     let inputs = $('.field button');
     inputs.click(function(){
    scrollToActiveField($(this).parent());   });   inputs.click(function(event) { // enter
        let nextInputIndex = inputs.index(this) + 1;
        if (nextInputIndex < inputs.length) {
          inputs.eq(nextInputIndex).focus();
        }
         });
     setActiveTab(); });

Here is the working example https://codepen.io/benelliott/pen/beBPyJ - I need buttons instead of inputs.

Upvotes: 1

Views: 339

Answers (1)

SethWhite
SethWhite

Reputation: 1977

The problem arises from the the buttons in your form being an unknown type. I believe the form is defaulting them to a "submit" button which causes funny behavior (would love an additional answer/comment that explains this, I don't have the time right now to research it).

Easy fix though. Just add type="button" to each button and your codepen works: https://codepen.io/hyrumwhite/pen/WOQRzK

<div class="wrapper">
<form class="form" action="">
  <div class="field">
    <label>First name</label>
    <button type="button"> test</button> 
  </div>
  <div class="field">
    <label>Last name</label>
    <button type="button"> test</button> 
  </div>
  <div class="field">
    <label>Telephone</label>
    <button type="button"> test</button> 
  </div>
  <div class="field">
    <label>Email</label>
    <button type="button"> test</button> 
  </div>
</form>
</div>

Upvotes: 1

Related Questions