What this onClick() do?

JavaScript
1

Hi guys,

I have codes below,


    <div id="uploadBox" class="well" onClick="$('#photoimg').click();">
        <button class="btn btn-mini btn-primary" type="button">Upload File</button>
    </div>
    <input type="file" class="hide" name="photoimg" id="photoimg" onchange="$(this.form).submit();"/>

Just wondering what these codes mean,


     onClick="$('#photoimg').click();"

Okay let me guess, when I click the button, it will invoke the <input type=“file” …> and auto submit the form with the codes,


onchange="$(this.form).submit();

Am I right or am I wrong?

Thanks in advanced.

2

Hi there,

You are right.

$('#photoimg').click();

is shorthand for:

$('#photoimg').trigger('click');

which will execute all handlers and behaviours attached to the matched element.
http://api.jquery.com/trigger/

I’m not sure why you would want to do this, though.
First off, in-line event handlers are usually a bad thing, as they impact negatively on the readability and maintenance of your mark-up.
Secondly, wouldn’t it be less confusing to have a “Select File” button and a “Submit” button?

Hope that helps.

3

Actually it’s just a tutorial from here,

I’m just trying to understand.

4

Ah, ok. With a bit more context it makes more sense.
I still stand by what I said about in-line event handlers, though.