CODEWITHSUNDEEP
javascriptjqueryhtml
user2818066
user2818066

Reputation: 640

element reference by id in jQuery?

I have some problem in referring to element in jQuery. I have some codes to evoke some action on other input entry by clicking another entry. It works fine to display the file name in the following codes. However if I put the input entry inside a form tag, then the file name you select cannot be properly displayed. Could some experts explain how to make it work?

The following codes works fine: 

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>


<style type='text/css'>
    input[type=file] {
    display:none
}
</style>

<script type='text/javascript'>
$(window).load(function(){
$(function () {
    $('#btn_myFileInput').data('default', $('label[for=btn_myFileInput]').text()).click(function () {
        $('#myFileInput').click()
    });
    $('#myFileInput').on('change', function () {
        var files = this.files;
        if (!files.length) {
            $('label[for=btn_myFileInput]').text($('#btn_myFileInput').data('default'));
            return;
        }
        $('label[for=btn_myFileInput]').empty();
        for (var i = 0, l = files.length; i < l; i++) {
            $('label[for=btn_myFileInput]').append(files[i].name + '\n');
        }
    });
});
});

</script>
</head>   
<body>

<button id="btn_myFileInput">Choose file...</button>
<label for="btn_myFileInput">No file choosen or whatever...</label>
<input type="file" id="myFileInput" multiple/>

</body>
</html>

However, I don't know how to refer to the element correctly if the button is put inside a form tag. The following code will not show the selected file correctly: 

<form action="" method="post" >
<fieldset >

<button id="btn_myFileInput">Choose file...</button>
<label for="btn_myFileInput">No file choosen or whatever...</label>
<input type="file" id="myFileInput" multiple/>

</fieldset>
</form>

How to fix this problem please?

Upvotes: 0

Views: 216

Answers (1)

Magnus Engdal
Magnus Engdal

Reputation: 5604

You don't need both $(window).load() and $(function () {});, since in your case they do the same thing. You could also add return false to the button click event, which probably will solve you problem.

http://jsfiddle.net/VzV7H/

JS

$(function () {
    $('#btn_myFileInput').data('default', $('label[for=btn_myFileInput]').text()).click(function () {
        $('#myFileInput').click();
        return false;
    });

    $('#myFileInput').on('change', function () {
        var files = this.files;
        console.log(files);
        if (!files.length) {
            $('label[for=btn_myFileInput]').text($('#btn_myFileInput').data('default'));
            return;
        }
        $('label[for=btn_myFileInput]').empty();
        for (var i = 0, l = files.length; i < l; i++) {
            $('label[for=btn_myFileInput]').append(files[i].name + '\n');
        }
    });
});

HTML

<form action="" method="post">
    <fieldset>
        <button id="btn_myFileInput">Choose file...</button>
        <label for="btn_myFileInput">No file choosen or whatever...</label>
        <input type="file" id="myFileInput" multiple>
    </fieldset>
</form>

Update

As @cernunnos pointed out in the comments, clicking an invisible <input type="file"> from a <button> is likely to cause problems when using Internet Explorer.

How to make IE8/9 submit input type="file" when javascript triggered dialog open

Upvotes: 1

Related Questions