How do I add input type "file" in a new row?

Question

When a user adds a row in a table, it should display the input "file" feature under the "Image" column for each row so that the user can select a file for each row. But it does not display the file input within the row when I add a row.

Below is the html code:

   <table id="qandatbl" border="1">
    <tr>
        <th class="image">Image</th>
    </tr>
    </table>

Below is jquery code

function insertQuestion(form) {   

        var $tr = $("<tr></tr>");
        var $image = $("<td class='image'></td>");

        function image(){

        var $this = $(this);
        var $imagefile = $("<input type='file' name='imageFile' id='imageFile' />").attr('name',$this.attr('name'))
                         .attr('value',$this.val())

            $image.append($imagefile);

        };

        $tr.append($image);
        $('#qandatbl').append($tr);


    }

You like PHP syntax? $variable is not necessary in javascript. `variable` (without $) is enough. — Armin, Dec 27 '11 at 15:16
@Armin: It's a widely-adopted convention to prepend `$` to variable names when the name represents a jQuery object. — Lightness Races in Orbit, Dec 27 '11 at 15:18
@Armin: http://stackoverflow.com/questions/205853/why-would-a-javascript-variable-start-with-a-dollar-sign — Lightness Races in Orbit, Dec 27 '11 at 15:25
Hm okay. But this seems to be a "convention" which has been created unofficially, cause on the official jquery documentation all samples are without this convention. — Armin, Dec 27 '11 at 15:38

score 2 · Answer 1 · answered Dec 27 '11 at 15:13

2

I don't see a call to the inner function image() anywhere. More over why do you have an inner function like that? Fixing that will most likely fix your problem.

answered Dec 27 '11 at 15:13

techfoobar

65,616
14
114
135

score 1 · Answer 2 · answered Dec 27 '11 at 15:13

Something like this, but my question is, what is this? Because you currently generate a function that is not used in any later actions, I currently removed that function but can't figure out what the $(this).val() would result.

Also you pass a form param but don't use it?

 function insertQuestion(form) {   

    var $tr = $("<tr></tr>");
    var $image = $("<td class='image'></td>");


    var $imagefile = $("<input type='file' name='imageFile' id='imageFile' />").attr('name',$this.attr('name'))
                     .attr('value',$(this).val())
                     .appendTo($image);


    $tr.append($image);
    $('#qandatbl').append($tr);

}

score 0 · Accepted Answer · answered Dec 27 '11 at 15:21

Your current snippets looks confusing. Try this: http://jsfiddle.net/66qAR/

<form id="idOfTheForm" action="?" method="post"> 
<table border="1">
    <tr>
        <th class="image">Image</th>
    </tr>
</table>
</form>

And this javascript:

function insertQuestion(form) {
    var imageField = $('<input />')
        .attr({
            type: 'file',
            name: 'imageFile',
            id: 'imageFile'
        });
    $(form).find('table').append($('<tr />').append(imageField));
}
insertQuestion($('#idOfTheForm'));

How do I add input type "file" in a new row?

3 Answers3