Using jQuery to create a number of input fields, based on value entered

Question

I have a form in which I ask the user how many file inputs they need, and I'd like to generate the suitable number of file browsing inputs dynamically based on the answer.

Here is my attempt:

$("#howmany").change(function() 
{
    var htmlString = "";
    var len = $(this).val();
        for (var i = 0; i <= len; i++) 
        {
            htmlString += "
                    <tr>
                    <td>
                    <input name="ufile[]" type="file" id="ufile[]" size="50" />
                    </td>
                    </tr>
                    ";                      
        }
        $("#dynamic_upload").html(htmlString);
}

HTML

<input id="howmany" />

<table id="dynamic_upload"> 
</table>

The idea being that repeating "units" of inputs will be generated based on the number entered.

But it isn't working, any idea where I'm going wrong?

EDIT: More clarity on "it isn't working" (apologies). When I include this code, after entering the number into the field "howmany" there is no visable reaction. No error messages appear, although - is there an error log somewhere I don't know how to read? (new to this)

What isnt working ? Whats the error?

Ravi Y
– Ravi Y

2012-11-29 07:42:20 +00:00
Commented Nov 29, 2012 at 7:42 — Ravi Y
– Ravi Y, Commented Nov 29, 2012 at 7:42

MrCode · Accepted Answer · 2012-11-29 07:42:51Z

2

It's not possible to create a string like that. Try:

        htmlString += "<tr>";
        htmlString += "<td>";
        htmlString += '<input name="ufile[]" type="file" id="ufile[]" size="50" />';
        htmlString += "</td>";
        htmlString += "</tr>";

Also remember you need to use single quotes around the string if it contains double quotes, or escape them.

You are also missing ); from the end of the function:

    $("#dynamic_upload").html(htmlString);
} <--- this should be  });

answered Nov 29, 2012 at 7:42

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bruno Over a year ago

in this case is better to use '\' to break the line

Gideon Over a year ago

Thanks very much - as you can tell I am new to javascript, didn't realise about no new lines... and thanks for catching that syntax error at the end. Accepting your answer (when required time has passed) as it provides a complete solution.

Explosion Pills · Accepted Answer · 2012-11-29 07:41:56Z

1

You can't have newlines in JavaScript strings. Moreover, you are using double-quotes within the string (i.e. for the <input> attributes). Possible rewrite:

htmlString += '<tr><td><input name="ufile[]" type="file" id="ufile[]" size="50"></td></tr>';

In the future, please give a more descriptive problem than "it isn't working" -- for example, do you get any error messages?

answered Nov 29, 2012 at 7:41

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Collectives™ on Stack Overflow

Using jQuery to create a number of input fields, based on value entered

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related