Add more text fields dynamically MVC View

Question

I am attempting to do what is posted here, but in my case I had to modify it a bit as the MVC view has multiple form tags when rendered. I need "file" boxes that can be called the same name as the existing file input. I may also need to add new names and descriptions for each new box but havnt gotten that far yet.

My View:

<div id="dialog1" title="Upload Multiple Files">
<% using (Html.BeginForm("MyAction", "MyController", new { path = Model.FullPath }, FormMethod.Post, new { enctype = "multipart/form-data", id = "uploadsfrm" }))
   {%>
<p>
    <input type="file" id="file1" name="fileUpload" size="23" />
</p>   
<p>
    Title</p>
<input type="text" id="Text1" name="txtNiceName" style="width: 100%;"/>
<p>
    Description</p>
<input type="text" id="Text2" name="txtDescription" style="width: 100%;"/>

<INPUT type="button" value="Add" onclick="addbox('file')"/>
<span id="addBoxes">&nbsp;</span>
<p>
    <input type="submit" value="Upload file" /></p>  
  <% } %>
 </div>

the script:

 function addbox(type) {

    var element = $("#uploadsfrm").createElement("input");
    element.setAttribute("type", type);
    element.setAttribute("value", type);
    element.setAttribute("name", type);

    var foo = $("#uploadsfrm").getElementById("addBoxes");

    foo.appendChild(element);

}

The error I'm getting in Firebug when I click the add button says: "TypeError: $(...).createElement is not a function"

Can someone please explain? Thanks in advance.

Answer 1

You are using jQuery.

jQuery does not include a .createElement() function. Thats why you get this Error.

If you want to create an new Element with jQuery you just Need to execute the $ function, with an element tag as parameter.

var element = $("<input>")`//in this example, we create a new input.

If you want to append this element to another you just need to execute the .append() function like:

$("#uploadsfrm").append(elememt);

You can also define your Attributes with the $ function.

Example:

function create(){
   //new Input stored in element
   var element = $("<input>",{
       //your Attributes
       name:"theInputName",
       placeholder: "yourPlaceholder"       
   });
   //appending your New input
   $("#yourAppendID").append(element);
}