0

i am trying to change an input type hidden into input type file onclick of a button. the code is working fine on mozilla firefox and internet explorer, but it is not working on Google Chrome and Safari browsers. The following is my code:

<script type="text/javascript">
function hide()
{
    $(document).ready(function()
    {
        $('#att').hide();
        $('#change').hide();
        $('#change1').hide();
        document.getElementById('fileatt').type='file';

    })
} 
<input type="text" name="att" value="<?php echo $name; ?>" id="att" disabled="disabled" size="12" style="float:left;">
<input name="fileatt" id="fileatt" type="hidden" size="12" style="float:left;">
<input type="button" name="browse" id="change" value="Browse" style="float:left;">
<input type="button" id="change1" value="Change" onclick="hide()">

The disabled text box holds a previous value taken from a database. And the button with value "Browse" is added to give it a look of input type file. on clicking the Change button, i want the text field and browse button to be hidden and the input type file to appear. Everything is working fine on Firefox and Internet Explorer. But the problem im facing is that on Chrome and Safari, the text box and browse button disappears successfully, but the input type file does not appear.

gdoron
  • 147,333
  • 58
  • 291
  • 367
php_rockzz
  • 3
  • 3

3 Answers3

0

You can't change the type of an input, so this is invalid code:

document.getElementById('fileatt').type='file';

Use two elements, hide one and show the other, toggle them.

Read more here:
change type of input field with jQuery

Community
  • 1
  • 1
gdoron
  • 147,333
  • 58
  • 291
  • 367
  • 1
    Thnk u so much gdoron.. your link was quite useful to me.. here's what i did: I used input type 'file' instead of 'hidden' for id 'fileatt'; on window load, i used jquery to hide it using .hide() function and onclick i used .show() function to show the field. Thnk u once again..!! – php_rockzz Apr 04 '12 at 10:17
0

Try something like: 

function hide()
    {
        $(document).ready(function()
        {
            $('#att').hide();
            $('#change').hide();
            $('#change1').hide();
            $('#fileatt').attr('type', 'file');                //document.getElementById('fileatt').type='file';

        })
    }
Bjørn Thomsen
  • 348
  • 2
  • 9
  • Read [my answer](http://stackoverflow.com/a/10008658/601179), you can't change an input type with jQuery or in IE at all! – gdoron Apr 04 '12 at 09:48
0

try this 

$('#fileatt').attr('type', 'file');

in place of

document.getElementById('fileatt').type='file';
Kunal Vashist
  • 2,380
  • 6
  • 30
  • 59
  • Read [my answer](http://stackoverflow.com/a/10008658/601179), you can't change an input type with jQuery or in IE at all! – gdoron Apr 04 '12 at 09:52