JSFiddle - React, Tailwind, and code Playground
HTML
<p class="form-field first_name pd-text required required-custom ">
<label class="field-label" for="190502_34068pi_190502_34068">Please enter your first name so I can start your quote... *</label>
<input type="text" name="190502_34068pi_190502_34068" id="190502_34068pi_190502_34068" value="yug" class="text" size="30" maxlength="40" onchange="" />
</p>
<div id="error_for_190502_34068pi_190502_34068" style="display:none"></div>
<p class="form-field last_name pd-text required required-custom ">
<label class="field-label" for="190502_34070pi_190502_34070">Thank you, please could you let me know your last name... *</label>
<input type="text" name="190502_34070pi_190502_34070" id="190502_34070pi_190502_34070" value="hjgv" class="text" size="30" maxlength="80" onchange="" />
</p>
<div id="error_for_190502_34070pi_190502_34070" style="display:none"></div>
<p class="form-field email pd-text required required-custom ">
<label class="field-label" for="190502_34072pi_190502_34072">Awesome! Please could you provide me your email address so that I can send your quote documents to you... *</label>
<input type="text" name="190502_34072pi_190502_34072" id="190502_34072pi_190502_34072" value="luke.james@instanda.com" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 190502, 34072, 162304018);" /><br/><span class="description">Not yug hjgv? <a target="_self" href="/form/incorrectProspect/account_id/190502/campaign_id/8424/form_id/4218">Click Here</a>.</span>
</p>
<div id="error_for_190502_34072pi_190502_34072" style="display:none"></div>
<p class="form-field phone pd-text required required-custom ">
<label class="field-label" for="190502_34074pi_190502_34074">Do you have a contact number? *</label>
<input type="text" name="190502_34074pi_190502_34074"...
JavaScript
<script>
// register jQuery extension
jQuery.extend(jQuery.expr[':'], {
focusable: function (el, index, selector) {
return $(el).is('a, button, :input, [tabindex]');
}
});
$(document).on('keypress', 'input,select', function (e) {
if (e.which == 13) {
e.preventDefault();
// Get all focusable elements on the page
var $canfocus = $(':focusable');
var index = $canfocus.index(document.activeElement) + 1;
if (index >= $canfocus.length) index = 0;
$canfocus.eq(index).focus();
}
});