Programmatically simulate a click on an element when Enter is pressed in a field

Question

My html:

<div class="container">
  <div class="row d-none d-md-block d-xl-none" id="PrescriptionTitle">
      <div class="col-sm-6">
          <span for="" class="text-left">Brand Name</span>
      </div>
      <div class="col-sm-6">
          <span for="">Generic name</span>
      </div>
      <div class="col-sm-2">
          <span for="">Dose</span>
      </div>
      <div class="col-sm-2">
          <span for="">Units</span>
      </div>
      <div class="col-sm-3 col-sm-offset-5">
          <span class="text-nowrap" for="">Frequency</span>
      </div>
      <div class="col-sm-1">
          <span for="">Durn</span>
      </div>
      <div class="col-sm-2">
          <span for="inputEmail4">Units</span>
      </div>
  </div>


      <div class="row DrugRow" id="DrugRow1">
            <div class="col-sm-6">
              <input type="text" id="brand1" class="form-control BrandName input-sm ui-autocomplete-input" placeholder="Brand name" aria-label="BrandName" aria-describedby="">
            </div>
            <div class="col-sm-6">
              <input type="text" id="generic1" class="form-control GenericName input-sm ui-autocomplete-input" placeholder="Generic name" aria-label="GenericName" aria-describedby="">
            </div>
            <div class="col-sm-2">
              <input type="text" id="dose1" class="form-control Dose input-sm" placeholder="Dose" aria-label="Dose" aria-describedby="">
            </div>
            <div class="col-sm-2">
              <input type="text" id="doseunits1" class="form-control DoseUnits input-sm ui-autocomplete-input" placeholder="mg" aria-label="DoseUnits" aria-describedby="">
            </div>
            <div class="col-sm-3">
              <input type="text" id="freq1" class="form-control Frequency input-sm ui-autocomplete-input" placeholder="OD" aria-label="Frequency" aria-describedby="">
            </div>
            <div class="col-sm-2">
              <input type="text" id="durn1" class="form-control Durn input-sm" placeholder="5" aria-label="Durn" aria-describedby="">
            </div>
            <div class="col-sm-2">
              <input type="text" id="durnunit1" class="form-control DurationUnits input-sm ui-autocomplete-input" placeholder="days" aria-label="DurationUnits" aria-describedby="">
            </div>
            <div class="col-sm-1">
              <a id="DelRow1" class="btn btn-danger btn-large DelRow" href="#" tabindex="5"><i class="fa fa-minus-circle fa-lg"></i></a>
            </div>

      </div>
<div class="row DrugRow" id="DrugRow2">
<div class="col-sm-6">
  <input type="text" id="brand2" class="form-control BrandName input-sm" placeholder="Brand name" aria-label="BrandName" aria-describedby="">
</div>
<div class="col-sm-6">
  <input type="text" id="generic2" class="form-control GenericName input-sm" placeholder="Generic name" aria-label="GenericName" aria-describedby="">
</div>
<div class="col-sm-2">
  <input type="text" id="dose2" class="form-control Dose input-sm" placeholder="Dose" aria-label="Dose" aria-describedby="">
</div>
<div class="col-sm-2">
  <input type="text" id="doseunits2" class="form-control DoseUnits input-sm" placeholder="mg" aria-label="DoseUnits" aria-describedby="">
</div>
<div class="col-sm-3">
  <input type="text" id="freq2" class="form-control Frequency input-sm" placeholder="OD" aria-label="Frequency" aria-describedby="">
</div>
<div class="col-sm-2">
  <input type="text" id="durn2" class="form-control Durn input-sm" placeholder="5" aria-label="Durn" aria-describedby="">
</div>
<div class="col-sm-2">
  <input type="text" id="durnunit2" class="form-control DurationUnits input-sm ui-autocomplete-input" placeholder="days" aria-label="DurationUnits" aria-describedby="" autocomplete="off">
</div>
<div class="col-sm-1">
  <a id="DelRow2" class="btn btn-danger btn-large DelRow" href="#" tabindex="5"><i class="fa fa-minus-circle fa-lg"></i></a>
</div>
</div>

<div class="row">
<div class="col-sm-23"></div>
<div class="col-sm-1">
  <a id="AddRow1" class="btn btn-primary btn-large AddRow" href="#" tabindex="5"><i class="fa fa-plus-circle fa-lg"></i></a>
</div>
</div>

</div>

Javascript code snippet:

var $input = $('input[type=text]');
$input.on('keyup', function (e) {
  var myClass = $(this).attr("class");
  console.log(myClass);
  if (myClass.indexOf("DurationUnits") != -1) {         
    $(this).siblings('.AddRow').click();
    return true;
  }
  // DurationUnits
  if (e.which === 13) {
    var ind = $input.index(this);
    $input.eq(ind + 1).focus()
  }
}); 
$('body').on('click', '.AddRow', function() {
// $("#DiscardModal").modal();
console.log("Clicked Add Row");
var id = 0;
var count = 0;
var IdList=[];
$(".DrugRow").each(function() {
  id = $(this).attr('id');
  count = id.replace("DrugRow", "");
});
var lastelementcount = count;
console.log("Last element count is " + lastelementcount);
count++;
var NewHTML = `
<div class="row DrugRow" id="DrugRow` + count + `">
    <div class="col-sm-6">
      <input type="text" id="brand` + count + `" class="form-control BrandName input-sm" placeholder="Brand name" aria-label="BrandName" aria-describedby="">
    </div>
    <div class="col-sm-6">
      <input type="text" id="generic` + count + `" class="form-control GenericName input-sm" placeholder="Generic name" aria-label="GenericName" aria-describedby="">
    </div>
    <div class="col-sm-2">
      <input type="text" id="dose` + count + `" class="form-control Dose input-sm" placeholder="Dose" aria-label="Dose" aria-describedby="">
    </div>
    <div class="col-sm-2">
      <input type="text" id="doseunits` + count + `" class="form-control DoseUnits input-sm" placeholder="mg" aria-label="DoseUnits" aria-describedby="">
    </div>
    <div class="col-sm-3">
      <input type="text" id="freq` + count + `" class="form-control Frequency input-sm" placeholder="OD" aria-label="Frequency" aria-describedby="">
    </div>
    <div class="col-sm-2">
      <input type="text" id="durn` + count + `" class="form-control Durn input-sm" placeholder="5" aria-label="Durn" aria-describedby="">
    </div>
    <div class="col-sm-2">
      <input type="text" id="durnunit` + count + `" class="form-control DurationUnits input-sm" placeholder="days" aria-label="DurationUnits" aria-describedby="">
    </div>
    <div class="col-sm-1">
      <a id="DelRow` + count + `" class="btn btn-danger btn-large DelRow" href="#" tabindex="5"><i class="fa fa-minus-circle fa-lg"></i></a>
    </div>
</div>
`;
$("#DrugRow" + lastelementcount).after(NewHTML);
event.preventDefault();
return false;
});

I need to move to the next input field on pressing Enter. I have successfully done that. When I come to the last input field on a row (which has a class DurationUnits), I need to simulate a click on the adjacent button which has a class AddRow. This is an element, and clicking this will create a few elements by javascript code (already done).

What's not working is the code simulating a click when enter is pressed from the input with class DurationUnits

Possible duplicate of [Trigger a button click with JavaScript on the Enter key in a text box](https://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box) — NielsNet, Sep 11 '18 at 10:38
would it not be better to create a function, then when enter is pressed / a click happens, just run that function? — treyBake, Sep 11 '18 at 10:39
@NielsNet No it's not a duplicate. That part of the code is already implemented and working fine. The problem is with triggering a click which is managed by code, and not a hard coded element. — Joel G Mathew, Sep 11 '18 at 10:40
So you want to trigger a click on a dynamically-added button? (just checking) — peeebeee, Sep 11 '18 at 10:43

score 0 · Answer 1 · answered Sep 11 '18 at 10:43

0

It's because you return true if it has class "DurationUnits". The return stops the function from executing the condition that follows (e.which === 13)

  if (myClass.indexOf("DurationUnits") != -1) {         
    ....
    return true;
  }
  // On class "DurationUnits" this won't run:
  if (e.which === 13) {
    ....
  }

answered Sep 11 '18 at 10:43

bArmageddon

8,088
6
22
40

I agree that it's a bug, but shouldnt this trigger on every function key instead of just Enter? It should still run? – Joel G Mathew Sep 11 '18 at 10:47
Not sure what you're asking, but on your main question "What's not working is the code simulating a click when enter is pressed from the input with class DurationUnits" - my answer explains the reason for that for sure – bArmageddon Sep 11 '18 at 10:49

Programmatically simulate a click on an element when Enter is pressed in a field

1 Answers1