Toggle HTML Tabs auf Drücken von ENTER

Question

Hier ist, was ich entworfen habe:

Jede dieser Registerkarten ihre eigenen Input Form haben.

Nach dem Drücken der EINGABETASTE im ersten Eingabeformular (das in Name), muss ich die Registerkarten wechseln und den Fokus auf das Eingabeformular auf der nächsten Registerkarte setzen. Dies muss wiederholt werden, bis ich auf der letzten Registerkarte (Ort) die EINGABETASTE drücke, wenn die Daten aus allen Formularen gesammelt und als Webanforderung übergeben werden.

Hier ist mein Eingabeformular:

<form><input type="text" name="name" placeholder="Name..." onsubmit="toggleFn()"></form>

toggleFn():

function toggleFn() { 
 
      document.getElementById("email").focus(); 
 
     }

Hier E-Mail ist die ID des Eingabeformulars ? In dem zweiten Registerkarte, aber beim Drücken eingeben, wird die Seite nur mit der Option Namen neu geladen = whatevername

für die Registerkarten der Code hier:

<div class="container-fluids"> 
 
    <ul class="nav nav-tabs"> 
 
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
 
    <li><a data-toggle="tab" href="#menu1">Name</a></li> 
 
    <li><a data-toggle="tab" href="#menu2">E-Mail</a></li> 
 
    <li><a data-toggle="tab" href="#menu3">Phone Number</a></li> 
 
    <li><a data-toggle="tab" href="#menu4">Location</a></li> 
 
    </ul> 
 

 
    <div class="tab-content"> 
 
    <div id="home" class="tab-pane fade in active"><br> 
 
     <h4>HOME</h4> 
 
    </div> 
 
    <div id="menu1" class="tab-pane fade"><br> 
 
     <h4>Name</h4> 
 
     <p>Enter name</p> 
 
     <form><input type="text" name="name" placeholder="Name..." onsubmit="toggleFn()"> 
 
     </form> 
 
    </div> 
 
    <div id="menu2" class="tab-pane fade"><br> 
 
     <h4>E-Mail</h4> 
 
     <form><input type="text" name="email" placeholder="E-Mail..."></form> 
 
    </div> 
 
. 
 
. 
 
.

Ich habe sehr begrenzte begrenzte Kenntnisse in Javascript und Web-Entwicklung im Allgemeinen, wenn Sie nicht bereits wissen. Bitte lassen Sie mich wissen, was ich falsch mache.

Danke fürs Lesen.

Answer 1

Sie können Javascript verwenden, um Klassen zu verstecken und Klassen zu Ihren Tabs hinzuzufügen.

var data = {}; 
 
function toggleFn(form) { 
 
    if (form.getAttribute('name') === 'name') { 
 
     data.name = form.name.value; 
 
     toggleElements(1); 
 
     setFocus('email'); 
 
    } else if (form.getAttribute('name') === 'email') { 
 
     data.email = form.email.value; 
 
     toggleElements(2); 
 
     setFocus('phone'); 
 
    } else if (form.getAttribute('name') === 'phone') { 
 
     data.phone = form.phone.value; 
 
     toggleElements(3); 
 
     setFocus('location'); 
 
    } else if (form.getAttribute('name') === 'location') { 
 
     data.location = form.location.value; 
 
     // send data via ajax here 
 
     // reload the page 
 
     console.log(data); 
 
    } 
 
    return false; 
 
} 
 

 
function setFocus(id) { 
 
    document.getElementById(id).focus(); 
 
} 
 

 
function toggleElements(menuNumber) { 
 
    document.getElementById('menu' + menuNumber).classList.add('deactive'); 
 
    document.querySelector('.menu' + menuNumber).classList.remove('active'); 
 
    document.querySelector('.menu' + (menuNumber + 1)).classList.add('active'); 
 
    document.getElementById('menu' + (menuNumber + 1)).classList.remove('deactive'); 
 
}

.deactive { 
 
     display: none; 
 
    } 
 
    ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #333; 
 
    } 
 
    li { 
 
     float: left; 
 
    } 
 
    li a { 
 
     display: block; 
 
     color: white; 
 
     text-align: center; 
 
     padding: 14px 16px; 
 
     text-decoration: none; 
 
    } 
 
    /* Change the link color to #111 (black) on hover */ 
 

 
    li a:hover { 
 
     background-color: #111; 
 
     color: #fff; 
 
    } 
 
    .active { 
 
     background-color: white; 
 
    } 
 
    .active a { 
 
     color: #000; 
 
    }

<div class="container-fluids"> 
 
    <ul class="nav nav-tabs"> 
 
     <li><a data-toggle="tab" href="#home">Home</a></li> 
 
     <li class="menu1 active"><a data-toggle="tab" href="#menu1">Name</a></li> 
 
     <li class="menu2"><a data-toggle="tab" href="#menu2">E-Mail</a></li> 
 
     <li class="menu3"><a data-toggle="tab" href="#menu3">Phone Number</a></li> 
 
     <li class="menu4"><a data-toggle="tab" href="#menu4">Location</a></li> 
 
    </ul> 
 

 
    <div class="tab-content"> 
 
     <div id="menu1" class="tab-pane fade"><br> 
 
      <h4>Name</h4> 
 
      <p>Enter name</p> 
 
      <form class="tabs" onsubmit="return toggleFn(this)" name="name"><input id="name" type="text" 
 
                        placeholder="Name..."> 
 
      </form> 
 
     </div> 
 
     <div id="menu2" class="tab-pane fade deactive"><br> 
 
      <h4>E-mail</h4> 
 
      <p>Enter E-mail</p> 
 
      <form class="tabs" name="email" onsubmit="return toggleFn(this)"><input id="email" type="email" 
 
                        placeholder="E-mail..."> 
 
      </form> 
 
     </div> 
 
     <div id="menu3" class="tab-pane fade deactive"><br> 
 
      <h4>Phone Number</h4> 
 
      <p>Enter Phone Number</p> 
 
      <form class="tabs" name="phone" onsubmit="return toggleFn(this)"><input id="phone" type="tel" 
 
                        placeholder="Phone..."> 
 
      </form> 
 
     </div> 
 
     <div id="menu4" class="tab-pane fade deactive"><br> 
 
      <h4>Location</h4> 
 
      <p>Enter Location</p> 
 
      <form class="tabs" name="location" onsubmit="return toggleFn(this)"><input type="text" id="location" 
 
                         placeholder="Location..."> 
 
      </form> 
 
     </div> 
 
    </div> 
 
</div>