Jquery is not call on button click

Question

i have a jquery for file selection http://jsfiddle.net/parvathy/e8wr5/

please look the fiddle. when i am clicking on the text box, that jquery is worked .. but when clicking on the "browse" button that is not worked.i am using boot strap css for button and input text please help me..

 <input type="text" name="fake_section" id="fake_section" class="form-control" style="float:left;">    
 <button type="button" id="fake_section" class="btn btn-primary" ">Browse</button>


$(document).ready(function () {
$('#fake_section').click(function (e) {
    e.preventDefault();
    $('#file').trigger('click');
});

$('#file').change(function (e) {
    var filename = $(this).val();
    var ext = filename.split('.').pop().toLowerCase();
    if ($.inArray(ext, ['xls', 'xlsx']) == -1) {
        alert('Only add Excel Files!');
    }
    else {
        $('input[name="fake_section"]').val(filename);
    }
});

});

You have duplicate id attribute values. These need to be unique within the document. — Phil
– Phil, Commented Feb 5, 2014 at 6:02

Arun P Johny · Accepted Answer · 2014-02-05 06:02:38Z

3

Because you have 2 elements with the id fake_section, use class instead - when you use an id selector it selects the first element with the given id

<input type="text" name="fake_section" class="fake_section form-control" style="float:left;">
<button type="button" class="fake_section btn btn-primary" style="margin-left:10px;">Browse-</button>

then

$('.fake_section').click(function (e) {
    e.preventDefault();
    $('#file').trigger('click');
});

Demo: Fiddle

answered Feb 5, 2014 at 6:02

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

neel Over a year ago

but i want to use the boot strap class there

Arun P Johny Over a year ago

@Parvathiiiii you can have multiple classes for an element

loveNoHate Over a year ago

Any Idea why I got the Bootstrap styling on your FIDDLE @ArunPJohny, and in Parvathiiiii's not?!?

Arun P Johny Over a year ago

@dollarvar I added those library references under the External Resources section in the left panel

loveNoHate Over a year ago

Ui, nice new knowing about the features in JSFIDDLE, thanks! ;)

AFetter · Accepted Answer · 2014-02-05 06:07:53Z

0

Be attention on the ids, your mistake were the same id in two controls. Some IDEs help you with a warning when you have many controls with the same Ids.

<input type="text" name="fake_section" id="fake_section2" class="form-control" style="float:left;">    
 <button type="button" id="fake_section1" class="btn btn-primary" ">Browse</button>


$(document).ready(function () {
$('#fake_section1').click(function (e) {
    e.preventDefault();
    $('#file').trigger('click');
});

answered Feb 5, 2014 at 6:07

AFetter

3,6246 gold badges41 silver badges63 bronze badges

Collectives™ on Stack Overflow

Jquery is not call on button click

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related