Question

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.

Answer 1

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