user1650864 user1650864 - 5 months ago 14
jQuery Question

bootstrap button associated with input control doesn't work

I have a button associated to input control,On click i would like to call a function.

<div class="col-xs-4 selectContainer">
<label for="fldVIN" >VIN</label>
<div class="input-group">
<input type="text" id="fldVIN" data-bind="value:VIN" class="form-control" placeholder="Search VIN to retrieve the details"/>
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" id="searchVINBtn">Go!</button>
</span>
</div>




and here is the sample script i tried but it doesn't invoke the click function.

$(document).ready(function()
{
registerEventHandlers();
});

function registerEventHandlers(){
$('#searchVINBtn').click(function(e){
getCRMorDMSDetails() ;
});
});

function getCRMorDMSDetails()
{
alert('hi');
}

Answer

You have an extra ) after your registerEventHandlers function.

Working version:

  $(document).ready(function() {
    registerEventHandlers();
  });

  function registerEventHandlers() {
    $('#searchVINBtn').click(function(e) {
      getCRMorDMSDetails();
    });
  }; /* Remove ")" from this line */

  function getCRMorDMSDetails() {
    alert('hi');
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="col-xs-4 selectContainer">
  <label for="fldVIN">VIN</label>
  <div class="input-group">
    <input type="text" id="fldVIN" data-bind="value:VIN" class="form-control" placeholder="Search VIN to retrieve the details" />
    <span class="input-group-btn">
        <button class="btn btn-secondary" type="button" id="searchVINBtn">Go!</button>
    </span>
  </div>

Comments