How to use the “enter” key to progress through a form and also have clicking a button as an option as well on a mutli-step form

Question

I have a multi-step form that has several different slides of different input fields. I'm trying to get it so that when the user presses "enter" after filling out the input, the form will progress to the next slide. I also want the button, when clicked, to also progress the form (this is what I currently have as the functionality). I can't figure out how to include the "enter" function because everything I have seen involves the .keydown method.

Here's what I have thus far:

 <script> //jQuery time var current_fs, next_fs, previous_fs; //fieldsets var left, opacity, scale; //fieldset properties which we will animate var animating; //flag to prevent quick multi-click glitches var arrayfname = ['#txt_first_name']; var arraylname = ['#txt_last_name']; var arrayzip = ['#txt_zip']; var arrayaddress = ['#txt_address']; var arrayphone = ['#txt_phone']; var arraydob = ['#hdn_dob']; $('.next').click(function(){ if(animating) return false; if($(this).data('slide') == "1") { moveon = RegPath.Functions.validateFields(arrayfname,false,"",'[{access_token}]'); } else if($(this).data('slide') == "2"){ moveon = RegPath.Functions.validateFields(arraylname,false,"",'[{access_token}]'); } else if($(this).data('slide') == "3"){ moveon = RegPath.Functions.validateFields(arrayzip,false,"",'[{access_token}]'); } else if($(this).data('slide') == "4"){ moveon = RegPath.Functions.validateFields(arrayaddress,false,"",'[{access_token}]'); } else if($(this).data('slide') == "5"){ moveon = RegPath.Functions.validateFields(arrayphone,false,"",'[{access_token}]'); } //var moveon = RegPath.Functions.validateFields(arrayPersonalInfo,false,"",'[{access_token}]'); if(moveon == false){ return false; } else { current_fs = $(this).parent(); next_fs = $(this).parent().next(); //activate next step on progressbar using the index of next_fs $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); //show the next fieldset next_fs.show(); //hide the current fieldset with style current_fs.animate({opacity: 0}, { step: function(now, mx) { //as the opacity of current_fs reduces to 0 - stored in "now" //1. scale current_fs down to 80% scale = 1 - (1 - now) * 0.2; //2. bring next_fs from the right(50%) left = (now * 50)+"%"; //3. increase opacity of next_fs to 1 as it moves in opacity = 1 - now; current_fs.css({ 'transform': 'scale('+scale+')', 'position': 'absolute' }); next_fs.css({'left': left, 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, //this comes from the custom easing plugin easing: 'easeInOutBack' }); } }); $('.submitForm').click(function(){ var popUpURL = '{{{offer.linkout_url}}}'; var moveon = RegPath.Functions.validateFields(arraydob,true,popUpURL,'[{access_token}]'); }); </script> <script> $(function(){ RegPath.PrepForm.prepFormPersonal(); RegPath.PrepForm.prepFormContact(); }); </script> 

 html { height: 100%; /*Image only BG fallback*/ /*background = gradient + image pattern combo*/ } body { font-family: montserrat, arial, verdana; background: url('[{offer_cdn_url}]/images/cag/cag_purp_bg.jpg') no-repeat fixed center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } /*form styles*/ #msform { width: 465px; margin: 29px auto; text-align: center; position: relative; } #msform fieldset { background: rgba(255, 255, 255, 0.7); border: 0 none; border-radius: 15px; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); box-sizing: border-box; width: 465px; margin: 0 0%; padding-top: 0%; padding-bottom: 4%; /*stacking fieldsets above each other */ position: relative; } /*Hide all except first fieldset*/ #msform fieldset:not(:first-of-type) { display: none; } .header { background: #f6cc27; padding-top: 4%; padding-bottom: 4%; margin-bottom: 3%; border-top-left-radius: 15px; border-top-right-radius: 15px; padding-left: 1%; padding-right: 1%; } /*inputs*/ #msform input, #msform textarea { padding: 15px; border: 1px solid #ccc; border-radius: 3px; margin-bottom: 10px; width: 90%; box-sizing: border-box; font-family: montserrat; color: #2C3E50; font-size: 16px; margin-top: 3%; margin-left: 3%; margin-right: 3%; } p { font-size: 0.6em; text-align: left; } /* input#txt_zip { width: 40%; float: left; } label#zip { width: 100%; display: inline-flex; float: left; } input#txt_dob { width: 50%; float:left; } label#dob { width: 100%; display:inline-flex; float: left; } */ /*buttons*/ #msform .action-button { width: 90%; background-image: linear-gradient(#009b00, #00c800); font-weight: bold; color: white; border: 0 none; border-radius: 30px; cursor: pointer; padding: 17px 5px; margin: 10px 5px; font-size: 19px; } #msform .action-button:hover, #msform .action-button:focus { box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60; } #msform .disabledSubmit { background-color: #9f9e9e; } input.submit { background-image: linear-gradient(#009b00, #00c800); color: #ffffff !important; border-radius: 30px !important; cursor: pointer; padding: 17px 5px !important; font-size: 19px !important; font-weight: 700; } /*headings*/ .fs-title { font-size: 21px !important; text-transform: uppercase; color: #000000; font-weight: 700; } .fs-subtitle { font-weight: normal; font-size: 13px; color: #666; margin-bottom: 20px; } .tcpaCopy { font-size: 8px; margin-top: 5px; margin-bottom: 5px; text-align: left; } .disabled { background-color: #e5e5e5; color: #969696 !important; } .check { display: inline-flex; } label { font-size: 1.1em; padding-bottom: 3%; font-weight: 700; padding-top: 2%; } .green { background-color: #27AE60 !important; } #msform .tcpaSubmit:hover, #msform .tcpaSubmit:focus { box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60; } /*progressbar*/ #progressbar { margin-bottom: 30px; overflow: hidden; /*CSS counters to number the steps*/ counter-reset: step; } #progressbar li { list-style-type: none; color: white; text-transform: uppercase; font-size: 9px; width: 16%; float: left; position: relative; } #progressbar li:before { content: counter(step); counter-increment: step; width: 20px; line-height: 20px; display: block; font-size: 10px; color: #333; background: white; border-radius: 3px; margin: 0 auto 5px auto; } /*progressbar connectors*/ #progressbar li:after { content: ''; width: 100%; height: 2px; background: white; position: absolute; left: -50%; top: 9px; z-index: -1; /*put it behind the numbers*/ } #progressbar li:first-child:after { /*connector not needed before the first step*/ content: none; } /*marking active/completed steps green*/ /*The number of the step and the connector before it = green*/ #progressbar li.active:before, #progressbar li.active:after{ background: #f6cc27; color: white; } input#opt_in { width: 11% !important; } .record_table { width: 100%; border-collapse: separate; } .record_table tr:hover { cursor: pointer; } td#consent { width: 30%; padding-top: 3%; padding-bottom: 3%; border-top-left-radius: 10px; border-bottom-left-radius: 10px; background-color: #f6cc27; font-family: 'Open Sans', sans-serif; font-weight: 700; color: #ffffff; border-color: #f6cc27; } #space { margin-top: 2%; } td#consentInfo { border-left-color: #ffffff; font-size: 0.8em; vertical-align: middle !important; } .record_table td { border: 1px solid #eee; } @media only screen and (max-width: 768px) { #msform { width: 80%; } #msform fieldset { width: 100%; } .fs-title { font-size: 20px; } input:matches([type=button]) { -webkit-appearance: none; } .subcopy { font-size: 1.5em !important; } #subtitle { font-size: 1.1em !important; } #logo { width: 200px; } } /* TOP OF THE PAGE */ .subcopy { margin-top: 10px; padding-bottom: 0; font-size: 2.5em; color: #F6CC27; font-family: 'Kanit', sans-serif; font-weight: bold; text-align: center; } #subtitle { text-align: center; color: #ffffff; font-family: 'Kanit', sans-serif; font-size: 2em; } #logo { width: 300px; display: block; margin-left: auto; margin-right: auto; padding-top: 2%; } 

 <div class="container"> <div class="logo"> <img src="[{offer_cdn_url}]/images/cag/CAG_logo@2x copy.png" id="logo"> </div> <div class="questions subcopy" > YOU MAY BE ENTITLED TO $1000 OR MORE </div> <div id="subtitle">Over $1 Billion of Class Action Settlement Funds</div> </div> <div class="container"> <!-- multistep form --> <form id="msform" method="post" action="/api/register"> <!--Needed--> <input type="hidden" name="remotePenCriteriaPassed" id="remotePenCriteriaPassed" value="false" /> <input type="hidden" name="zip_lookup_done" id="zip_lookup_done" value="" /> <!-- progressbar <ul id="progressbar"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <!-- fieldsets --> <fieldset> <div class="header"> <h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1> </div> <!--<h3 class="fs-subtitle">Step 1:</h3>--> <label for="txt_first_name">First Name</label> <input type="text" name="first_name" id="txt_first_name" value="[{first_name}]" placeholder="First Name" required/> <div class="help-block with-errors">Please enter your first name</div> <input type="button" name="next" class="next action-button" data-slide="1" value="Continue" /> </fieldset> <fieldset> <div class="header"> <h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1> </div> <label for="txt_last_name">Last Name:</label> <input type="text" name="last_name" id="txt_last_name" value="[{last_name}]" placeholder="Last Name" required/> <div class="help-block with-errors">Please enter your last name</div> <input type="button" name="next" class="next action-button" data-slide="2" value="Continue" /> </fieldset> <fieldset> <div class="header"> <h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1> </div> <label for="txt_zip" id="zip">Zip Code:</label> <input type="tel" name="zip" id="txt_zip" value="[{zip}]" placeholder="Zip Code" required/> <div class="help-block with-errors">Please enter a valid zip code</div> <input type="button" name="next" class="next action-button" data-slide="3" value="Continue" /> </fieldset> <fieldset> <div class="header"> <h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1> </div> <label for="txt_address">Address:</label> <input type="text" name="address_1" id="txt_address" value="[{address_1}]" placeholder="Address" required/> <div class="help-block with-errors">Please enter a valid address</div> <input type="button" name="next" class="next action-button" data-slide="4" value="Continue" /> </fieldset> <fieldset> <div class="header"> <h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1> </div> <label for="txt_phone">Phone:</label> <input type="tel" name="phone" id="txt_phone" value="[{phone}]" placeholder="Phone Number (123) 456-7890" required/> <div class="help-block with-errors">Please enter a valid phone number</div> <input type="button" name="next" class="next action-button" data-slide="5" value="Continue" /> </fieldset> <fieldset> <div class="header"> <h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1> </div> <label for="txt_dob" id="dob">Date of Birth:</label> <input type="tel" name="dob" id="hdn_dob" value="[{dob}]" placeholder="Birthday (mm/dd/yyyy)" required/> <div class="help-block with-errors">Please enter a valid date</div> <input type="button" id="btnSubmit" class="submit submitForm submit-btn" value="CLAIM YOUR CASH" /> </fieldset> </form> </div> 

Answer 1

I don't think you can do this without using the .keydown method or a similar method. Still it is quite easy to implement. Not sure if you are trying to avoid it for a particular reason, but if it is a matter not knowing how to implement it, please find the code below.

$(document).keypress(function(e) {
    if(e.which == 13) {
        // Just add your validation code here.
    }
});

Answer 2

In case anyone is looking for a solution: this is what ended up working

$('input').keypress(function(e){
   if(e.which == 13){//Enter key pressed
     var Input = $(this).data('slide');
       $('*[data-slide="'+Input+'"]').click();       
   } 
});