0

Is anyone able to help me out,

I have a form and I want the focus to move onto the next field, once the user has entered a value for a form field.

the form has been created using html and css, and would ideally like a javascript event to faciliate this.

I've already tried this and played around with it for a couple of hours but I can't seem to crack it and can't get it to work.

I have attached some code below, to show you my progress. (only html and javascript, there is no CSS styling

any help would be greatly appreciated,

Is there a specific ready why the focus is not moving on to the next field?

<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();
   }
  });

https://jsfiddle.net/4wz9fapm/

harry
  • 129
  • 5
  • 14
  • Possible duplicate of [How to focus next input field on keypress](https://stackoverflow.com/questions/40304963/how-to-focus-next-input-field-on-keypress) – Pete Mar 13 '18 at 11:19
  • Hi @Pete I have had a look at this, and it's not the same. thanks for your response! :) – harry Mar 13 '18 at 11:28
  • How is it not - you have a list of inputs, you have a button press and you want to focus on the next input - it's exactly the same – Pete Mar 13 '18 at 11:30
  • in that one they have limits in which the user can enter, whereas my one is asking for information not a number. (keycode === 46 || keycode === 8 || keycode === 37 || keycode === 39 || (keycode >= 48 && keycode <= 57)))) { return; } var nextInput = i + 1; if (nextInput < array.length) { array[nextInput].focus(); } }; }); – harry Mar 13 '18 at 11:35
  • Yes it's not exactly the same but it has all the parts you need to answer your question - duplicates are not exact duplicates they are questions which replicate the main parts of another question – Pete Mar 13 '18 at 11:36
  • ah right okay, I have tried to implement this, I have attached the js fiddle below but still, no luck, are you able to point out where I'm going wrong? https://jsfiddle.net/4wz9fapm/5/ – harry Mar 13 '18 at 11:42

1 Answers1

1

Ok here's how I would do it then

var $inputs = $("input");       // get all inputs first

$inputs.keypress(function(e) {
  if (e.which == 13) {
    e.preventDefault();

    var index = $inputs.index(this) + 1;  // get next index of input
    if (index < $inputs.length) {         // check if not last input
      $inputs.eq(index).get(0).focus();   // focus next
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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@hotmail.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" id="190502_34074pi_190502_34074" value="07949370851" class="text" size="30" maxlength="40" onchange="" />
</p>
<div id="error_for_190502_34074pi_190502_34074" style="display:none"></div>


<p class="form-field  company pd-text required required-custom    ">
  <label class="field-label" for="190502_34076pi_190502_34076">Thank you! And what is your business name? If you trade in your own name then that's fine - simply enter your full name *</label>
  <input type="text" name="190502_34076pi_190502_34076" id="190502_34076pi_190502_34076" value="uguig" class="text" size="30" maxlength="255" onchange="" />
</p>
<div id="error_for_190502_34076pi_190502_34076" style="display:none"></div>


<p class="form-field  Marketing_Preferences pd-checkbox required required-custom">
  <label class="field=label" for="190502_34174pi_190502_34174">Occasionally we may wish to contact you to let you know about special offers and products : *</label>
  <span class="value"><span><input type="checkbox" name="190502_34174pi_190502_34174_287262" id="190502_34174pi_190502_34174_287262" value="287262" onchange="" /><label class="inline" for="190502_34174pi_190502_34174_287262">Email</label></span><span><input type="checkbox" name="190502_34174pi_190502_34174_287264" id="190502_34174pi_190502_34174_287264" value="287264" onchange="" /><label class="inline" for="190502_34174pi_190502_34174_287264">Phone</label></span><span><input type="checkbox" name="190502_34174pi_190502_34174_287266" id="190502_34174pi_190502_34174_287266" value="287266" onchange="" /><label class="inline" for="190502_34174pi_190502_34174_287266">Text</label></span><span><input type="checkbox" name="190502_34174pi_190502_34174_287268" id="190502_34174pi_190502_34174_287268" value="287268" onchange="" /><label class="inline" for="190502_34174pi_190502_34174_287268">None</label></span><span><input type="checkbox" name="190502_34174pi_190502_34174_287270" id="190502_34174pi_190502_34174_287270" value="287270" onchange="" /><label class="inline" for="190502_34174pi_190502_34174_287270">All</label></span></span>
</p>
<div id="error_for_190502_34174pi_190502_34174" style="display:none"></div>
Pete
  • 57,112
  • 28
  • 117
  • 166