CODEWITHSUNDEEP
javascriptjquerydom
mark brookes
mark brookes

Reputation: 13

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

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);


    }

Upvotes: 1

Views: 2099

Answers (3)

Armin
Armin

Reputation: 15958

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'));

Upvotes: 0

Niels
Niels

Reputation: 49929

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);

}

Upvotes: 1

techfoobar
techfoobar

Reputation: 66673

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.

Upvotes: 2

Related Questions