Jump to content

create textbox dynamically

yklxmas

By yklxmas
in JavaScript

Recommended Posts

yklxmas Newbie

yklxmas

Posted
Posted

Hello,I've sucessfully managed to find out how to create file textbox dynamically. However, another problem came along. Let's say I have selected a file then click on the button which calls the script to create a new file textbox on the fly. The problem I'm facing is that as soon as a new one is created, it will also erase the value in the file textbox(es). So I will have to re-select those files again. Please help me solve this problem. Many thanks in advance. Here is the code:<html><head><script language="JavaScript"> function generateTextbox(){ var d = document.getElementById("text"); var numtext = document.getElementById("numtxt").value; numtext = parseFloat(numtext); numtext = numtext + 1; d.innerHTML+="<input type='file' name='uploadFile"+numtext+"'><br>"; document.myform.numtxt.value = numtext; }</script></head><body><form name="myform" enctype="multipart/form-data" action="js_textbox.php" method="post"><input type="button" onClick="generateTextbox()" value="More files"><div id="text"><input type="file" name="uploadFile1" id="uploadFile1" value="1"><br></div><input type="submit" name="submit" value="Upload"><input type="hidden" name="numtxt" id="numtxt" value="1"> </form></body></html>

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted

Rather than changing the innerHTML of your element and causing the browser to re-render that portion of the page like this:

d.innerHTML+="<input type='file' name='uploadFile"+numtext+"'><br>";

You might try using the DOM like this:

var input = document.createElement("input");input.type = "file";input.id = "uploadFile" + numtext;d.appendChild(input);d.appendChild(document.createElement("br"));

Link to comment
Share on other sites
yklxmas Newbie

yklxmas

Posted
  • Author
Posted

Thanks! It now works. And another problem came along. It seems the PHP script to retrieve values of these file textboxes cannot file them. I'm getting error message like below:Notice: Undefined index: uploadFile2 in \\Ilf-srv5\YuKuang\Website\php\js_textbox.php on line 26My php code: $numtext = $_POST['numtxt']; echo "<br>"; $i=1; $stop = $numtext + 1; $filename = null; while($i < $stop){ $filename = $_FILES['uploadFile'. $i]['name']; if(strlen($filename)<>0){ $filename = stripslashes($filename); echo $i . ": "; echo $filename; echo "<br>"; } $i++; }I know this is a javascript area but since I started the post here...Many thanks again in advance

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted
Thanks! It now works. And another problem came along.
Hmm, I don't play much with PHP, but perhaps the issue is here: In your original code, you built the file input like so, setting a name for the input:
d.innerHTML+="<input type='file' name='uploadFile"+numtext+"'><br>";

In the code I provided, I only specified an ID rather than a name. Try changing the code I provided to look like this instead:

var input = document.createElement("input");input.type = "file";input.id = "uploadFile" + numtext;// set the name tooinput.name = input.id;d.appendChild(input);d.appendChild(document.createElement("br"));

Link to comment
Share on other sites
yklxmas Newbie

yklxmas

Posted
  • Author
Posted

Thanks! It worked. Now it's retrieving all the parameters correctly.I'm just wondering if you guys could help me a bit again. Now I would like to create a link next to every file textbox to be clicked in order to remove them. Basically it's like in gmail. For every attachment, you get "Remove attachment" link and you click it to remove an attachment.I've tried it myself but it doesn't seem to work. Please have a look the following code.<script language="JavaScript"> function generateTextbox(){ var d = document.getElementById("text"); var numtext = document.getElementById("numtxt").value; numtext = parseFloat(numtext); numtext = numtext + 1; var input = document.createElement("input"); input.type = "file"; input.id = "uploadFile" + numtext; input.name = input.id; d.appendChild(input); var remove = document.createElement("a"); remove.innerHTML = "  <a href='#' onclick='removefile("+numtext+");'>Remove</a>"; d.appendChild(remove); d.appendChild(document.createElement("br")); document.myform.numtxt.value = numtext; } function removefile(numtext){ var fileId = "uploadFile"+numtext; var d = document.getElementById(element); d.removeChild(d); }</script>Many thanks.

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted
Thanks! It worked. Now it's retrieving all the parameters correctly.I'm just wondering if you guys could help me a bit again.
Hey, no problem.If you want to add some functionality to remove the file input, you'll also have to consider removing the "<br />"s and the remove links themselves. I think the best way to do this is to encapsulate the entire row in a div with a particular id. So, you'd change your generateTextbox funciton to look something like this:
// first, create the divvar div = document.createElement("div");// and come up with an id - we'll use this latervar divID = "div" + numtext;div.id = divID;// next, create the inputvar input = document.createElement("input");input.type = "file";input.id = "uploadFile" + numtext;input.name = input.id;// append it to the divdiv.appendChild(input);// next, create the remove buttonvar remove = document.createElement("a");remove.href = "#";// here's where we use that div id again.remove.onclick = function() { removefile(divID); }remove.appendChild(document.createTextNode("Remove"));// append it to the divdiv.appendChild(remove);// finally, append the div to our main containerd.appendChild(div);

Then, the remove function can be as simple as this:

function removefile(divID){	var d = document.getElementById("text");	d.removeChild(document.getElementById(divID));}

Check out the XML DOM tutorial. You can learn all of this stuff there: http://www.w3schools.com/dom/default.asp

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...