Trigger JQuery function when button is clicked

Question

Trigger JQuery function when button is clicked

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have the following function:

<script type='text/javascript'>
          $(document).ready(function(){
               $("input[name='numeroRg']").blur(function(){
                    var $nomePaciente = $("input[name='nomePaciente']");
                    var $dataNascPaciente = $("input[name='dataNascPaciente']");
                    .....

At the moment, it is being fired when input which has the name of numeroRG loses focus , I would like it to be triggered when the user clicked on button pesquisarName

<form>
     <div class="tab-content"> 
          <div role="tabpanel" class="tab-pane fade in active" id="htab1">
               <div class="row" style="padding-top: 15px;">
                    <div class="col-xs-4">
                         <div class="form-group">
                              <label for="numeroRg">RG:</label>
                              <input type="text" class="form-control" name="numeroRg" id="rg" placeholder="__.___.___-_">
                         </div> 
                         <button class="btn btn-info" name="pesquisarName" id="pesquisarId">Pesquisar</button>
                    </div>  
               </div>
          </div> 
</form>

I've tried to put it like this, but it did not work:

<script type='text/javascript'>
          $(document).ready(function(){
               $("button[name='pesquisarName']").click(function(){
                    var $nomePaciente = $("input[name='nomePaciente']");
                    var $dataNascPaciente = $("input[name='dataNascPaciente']");
                    .....

javascript jquery

asked by anonymous 22.08.2017 / 16:16

2 answers

0

For test effect in "Run" omitted the tag form

You can call function by ID using .click ()

You can fire the function in the button click with id="pesquisarId" replacing the line

$("input[name='numeroRg']").blur(function(){

by this line

$('#pesquisarId').click(function() {

$(document).ready(function(){
    $('#pesquisarId').click(function() {
       //.......
       //.......
       //para testar
       console.log('Botão id="pesquisarId" clicado e função disparada');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="tab-content"> 
          <div role="tabpanel" class="tab-pane fade in active" id="htab1">
               <div class="row" style="padding-top: 15px;">
                    <div class="col-xs-4">
                         <div class="form-group">
                              <label for="numeroRg">RG:</label>
                              <input type="text" class="form-control" name="numeroRg" id="rg" placeholder="__.___.___-_">
                         </div> 
                         <button type="button" class="btn btn-info" name="pesquisarName" id="pesquisarId">Pesquisar</button>
                    </div>  
               </div>
          </div>
       </div>

22.08.2017 / 21:43

Disable event dates (fullcalendar) Same partial view within several modal popup

score 0 · Accepted Answer

Your button is submitting the form, you have two alternatives, cancel the submission, change the type the button.

Canceling Submission

$(document).ready(function(){
               $("#ev").submit(function(ev){
                    ev.preventDefault();
                    	alert('seu evento');
                    });
                   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formid="ev">
     <div class="tab-content"> 
          <div role="tabpanel" class="tab-pane fade in active" id="htab1">
               <div class="row" style="padding-top: 15px;">
                    <div class="col-xs-4">
                         <div class="form-group">
                              <label for="numeroRg">RG:</label>
                              <input type="text" class="form-control" name="numeroRg" id="rg" placeholder="__.___.___-_">
                         </div> 
                         <button class="btn btn-info" name="pesquisarName" id="pesquisarId">Pesquisar</button>
                    </div>  
               </div>
          </div>
       </div>
</form>

Adding a type to button

$(document).ready(function(){
               $("button[name=pesquisarName]").click(function(ev){
                    	alert('seu evento');
                    });
                   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form><divclass="tab-content"> 
          <div role="tabpanel" class="tab-pane fade in active" id="htab1">
               <div class="row" style="padding-top: 15px;">
                    <div class="col-xs-4">
                         <div class="form-group">
                              <label for="numeroRg">RG:</label>
                              <input type="text" class="form-control" name="numeroRg" id="rg" placeholder="__.___.___-_">
                         </div> 
                         <button type="button" class="btn btn-info" name="pesquisarName" id="pesquisarId">Pesquisar</button>
                    </div>  
               </div>
          </div>
       </div>
</form>