CODEWITHSUNDEEP
javascriptjquerytriggerseventtrigger
user2571510
user2571510

Reputation: 11377

jQuery: trigger click or focus input field

I have a page with multiple divs that all look like the example below. Each div contains a field, a hidden field and a button.

How can I achieve that by click on the button the (visible) input field gets triggered ? I need to trigger either a click or focus as both fire the same function.

Each button in question has the class="triggerBtn" and the corresponding input field has the class="inputField".

Example div: 

<div>
    <input type="text" class="inputField" id="field1" name="field1" />
    <input type="hidden" name="field1" />
    <button type="button" class="btn btn-primary triggerBtn">Find</button>
</div>

Upvotes: 11

Views: 118179

Answers (5)

patel.milanb
patel.milanb

Reputation: 5990

Updated Jsfiddle: http://jsfiddle.net/ZmL4y/3/

$(document).on("click",".triggerBtn", function() { 
    var inputField =  $(this).closest('div').find('.inputField');
    if($(inputField).is(":visible"))
    {
       $(inputField ).focus();
    }
});

Upvotes: -1

Jeet
Jeet

Reputation: 1380

$(".triggerBtn").parent().children("input[type:text]").first().focus()

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

I guess you want:

$(".triggerBtn").click(function () {
    $(this).closest('div').find('.inputField').focus();
});

Upvotes: 19

Khanh TO
Khanh TO

Reputation: 48972

$(".triggerBtn").on("click",function(e){
      $(this).closest("div").find(".inputField").click();
     //or $(this).closest("div").find(".inputField").focus();
});

Upvotes: 1

AmOs
AmOs

Reputation: 149

add Onclick="function()" see here if you need to trigger it manually using jquery you can to this by

$("#field1").trigger("click");

see also here

Upvotes: 6

Related Questions