JQuery function does not operate

Question

I have the following HTML Structure

<div style="float: left; padding-top: 10px;">
            <a id="changeProfilePicture" class="linkOne" style="font-family: 'Ubuntu', sans-serif; color: #FA5882;" href="javascript:void">Change Profile Picture</a>
        </div>
        <div style="clear: both;"></div>
        <div style="display: none;" id="changeProfile">
            <div id="fSpace"></div>
            <form id="upload_form" enctype="multipart/form-data" method="post">
                <button id="openOpen">Select File</button>
                <input type="file" name="file1" id="file1"><br>
                <input type="button" value="Upload File" onclick="uploadFile()">
                <div id="fSpace"></div>
                <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
                <div id="fSpace"></div>
                <div id="status"></div>
            </form>
        </div>

So when I click on the div changeProfilePicture the div changeProfile slides down. I also have another jQuery function to click the file1 div when click the button openOpen, But when I click that button the function to toggle the changeProfile div occurs. My Jquery as follows

$(document).ready(function(){
            $("#changeProfilePicture").click(function(){
                $("#changeProfile").slideToggle("slow");
            });
            $("#openOpen").click(function(){
                $("#file1").click();
            });
        });

JSFiddle http://jsfiddle.net/L7dLN/1/

Any idea how to overcome this ? Thanks in advance.

@epascarello The function to click on the file1 does not operate. The #changeProfilepicture div disappears when I click on the #openOpen — Shamal Sandeep, Aug 06 '14 at 01:38
try specific the button type="button" on #openOpen, if you did not put a type, the default behavior might become submit which will do a post back when u click — Se0ng11, Aug 06 '14 at 02:51

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

Actually, you need just this:

$("#openOpen").click(function(event){
                event.preventDefault();

                $("#file1").click();
            });

Default action/behavior for button in form is submit, that was problem... More: what's the standard behavior when < button > tag click? will it submit the form?

edited May 23 '17 at 12:20

Community

1
1

answered Aug 06 '14 at 01:59

sinisake

11,240
2
19
27

JQuery function does not operate

1 Answers1