Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old January 7th, 2005, 06:48 AM
Authorized User
 
Join Date: Jan 2005
Location: bucuresti, , Romania.
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via Yahoo to Roshu
Default Fields in a dynamic table?


Hi,
I have a script(below) that lets me upload an infint number of files to the server. I added my self a text field to the function and everythig it's working ok.
My problem is that i want to put the fields on the screen one under another, or better in a table, as i want to add more fields. How do i do that?

Code:
<HTML>
<HEAD>
<SCRIPT>
var f = 0;
function addInput ()
{
if (document.all || document.getElementById)
{
    var table = document.all ? document.all.formElems : document.getElementById('formElems');
    var row = table.insertRow(++f);
    if (document.all)
    {
     var cell = row.insertCell(0);
     cell.innerHTML ='<INPUT TYPE="file" NAME="fileName' + f + '"'+ '>';
     cell = row.insertCell(1);
     cell.innerHTML = '<INPUT TYPE="text" VALUE=" "' + ' NAME="textName' + f + '"' +'">';
     cell = row.insertCell(2);
     cell.innerHTML = '<INPUT TYPE="button" VALUE="select another file"' + ' ID="addButton' + f + '"' +' ONCLICK="addInput();">';
     document.all['addButton' + (f - 1)].outerHTML = '';
    }
    else
    {
     var cell = row.insertCell(0);
     var input = document.createElement('INPUT');
     input.setAttribute('type', 'button');
     input.id = 'addButton' + f;
     input.value = 'select another file';
     input.onclick = function () { addInput(); };
     cell.appendChild(input);
    
     cell = row.insertCell(1);
     input = document.createElement('INPUT');
     input.setAttribute('type', 'file');
     input.name = 'fileName' + f;
     input.onchange = function () { addInput(); };
     cell.appendChild(input);

     cell = row.insertCell(2);
     input = document.createElement('INPUT');
     input.setAttribute('type', 'text');
     input.name = 'textName' + f;
     input.onchange = function () { addInput(); };
     cell.appendChild(input);

     var oldButton = document.getElementById('addButton' + (f - 1));
     oldButton.parentNode.removeChild(oldButton);
    }
}
}
</SCRIPT>
</HEAD>
<BODY>
    <FORM NAME="formName" METHOD="post" ENCTYPE="multipart/form-data" ACTION="script.php">
        <TABLE ID="formElems">
            <TR>
                <TD>
                    <INPUT TYPE="file" NAME="fileName0">
                </TD>
            </TR>
            <TR>
                <TD>
                    Depth <INPUT ID="add" TYPE="text" VALUE=" " >
                </TD>
                <TD>
                    <INPUT ID="addButton0" TYPE="button" VALUE="select another file" ONCLICK="addInput()">
                </TD>
            </TR>
            <TR>
                <TD>
                    <INPUT TYPE="submit">
                </TD>
            </TR>
        </TABLE>
    </FORM>
</BODY>
</HTML>


Roshu
__________________
Roshu
  #2 (permalink)  
Old January 7th, 2005, 08:25 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Doesn't your script create a new row for each file input? What do you wish to happen?

--

Joe (Microsoft MVP - XML)
  #3 (permalink)  
Old January 7th, 2005, 08:38 AM
Authorized User
 
Join Date: Jan 2005
Location: bucuresti, , Romania.
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via Yahoo to Roshu
Default

 Hi Joe, yes it does, but i want all the 3 filds: file-browse, text-emmpty, "select another.."-button, to be on diferent rows, one under another, and when i click "select another.."-button to get a new instance with the 3 fields under the first 3 fileds...
    something like this:
                  field1 -browse
                  field1 -empty
                  field1 -button

                  field2 -browse
                  field2 -empty
                  field2 -button

Roshu
  #4 (permalink)  
Old January 7th, 2005, 08:55 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

So you need to create a row for each cell:
Code:
var row = table.insertRow(++f);
    if (document.all) 
    {
      var cell = row.insertCell(0);
      cell.innerHTML ='<INPUT TYPE="file" NAME="fileName' + f + '"'+ '>';
      row = table.insertRow(); //ADDED
      cell = row.insertCell();  //CHANGED
      cell.innerHTML = '<INPUT TYPE="text" VALUE=" "' + ' NAME="textName' + f + '"' +'">';
      row = table.insertRow(); //ADDED

      cell = row.insertCell();  //CHANGED
      cell.innerHTML = '<INPUT TYPE="button" VALUE="select another file"' + ' ID="addButton' + f + '"' +' ONCLICK="addInput();">';
      document.all['addButton' + (f - 1)].outerHTML = '';
    }
    else 
    {
      var cell = row.insertCell(0);
      var input = document.createElement('INPUT');
      input.setAttribute('type', 'button');
      input.id = 'addButton' + f;
      input.value = 'select another file';
      input.onclick = function () { addInput(); };
      cell.appendChild(input);

      row = table.insertRow(); //ADDED
      cell = row.insertCell();  //CHANGED
      input = document.createElement('INPUT');
      input.setAttribute('type', 'file');
      input.name = 'fileName' + f;
      input.onchange = function () { addInput(); };
      cell.appendChild(input);

      row = table.insertRow(); //ADDED
      cell = row.insertCell();  //CHANGED
      input = document.createElement('INPUT');
      input.setAttribute('type', 'text');
      input.name = 'textName' + f;
      input.onchange = function () { addInput(); };
      cell.appendChild(input);

      var oldButton = document.getElementById('addButton' + (f - 1));
      oldButton.parentNode.removeChild(oldButton);
--

Joe (Microsoft MVP - XML)
  #5 (permalink)  
Old January 7th, 2005, 09:29 AM
Authorized User
 
Join Date: Jan 2005
Location: bucuresti, , Romania.
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via Yahoo to Roshu
Default

Thanks Joe, it's looks good now, but there is still one problem, the submit button it's getting between the 'browse-field-row' and 'text-field-row', so if i click several times on 'select another..'-button, i will get in vertical order: the 'browse-fild-rows', the submit button, and the 'text-field-rows'..... i tryed to solve this on my own but couldn't do it.
  Waiting for your answer...

Roshu
  #6 (permalink)  
Old January 7th, 2005, 10:02 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Change all
Code:
table.insertRow(
to
Code:
table.insertRow(table.rows.length - 2);
This will insert each row just before the last one.


--

Joe (Microsoft MVP - XML)
  #7 (permalink)  
Old January 7th, 2005, 10:17 AM
Authorized User
 
Join Date: Jan 2005
Location: bucuresti, , Romania.
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via Yahoo to Roshu
Default

Thank you very much Joe, it's all ok now!
But I will probably need your help again soon.... so, all best, 'till then! :)

Roshu
  #8 (permalink)  
Old January 10th, 2005, 05:59 AM
Authorized User
 
Join Date: Jan 2005
Location: bucuresti, , Romania.
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via Yahoo to Roshu
Default

Back again! So, in the html form i added an input type hidden with the value=f. It's
working as it should, but in the submit input i added "onclick=function checks()".
The function is here :
    function checks()
    {
      var ie5=document.all&&document.getElementById;
      for (i=0;i<=document.formName.f.value;i++)
      {
        if (document.formName.fileName+i.value=='')
        {
            alert('Please select a file!'); return false;
        }
        if (document.formName.txtName1.value=='')
        {
            alert('Please write something!'); return false;
        }
      }
    }
The problem is that the function does notthing, in the above form,
 but if i rename manually the field 'document.formName.fileName+i.value' replacing
'+i' with 0, 1 or any number as long as that no. of file exists, the
function works ok and tells me if i did or did not select a file. How can i make this
to work?


Roshu
  #9 (permalink)  
Old January 10th, 2005, 06:14 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Not quite sure what you are trying to achieve but...
1) Don't put the validation function in the onclick of the button, put it in the form tag as onsubmit=...
2) You must return true if all is well.
3) To refer to the elements change
Code:
document.formName.fileName+i.value
to
Code:
document.formName[fileName+i].value
You might want to dispense with the f field and just use a loop:
Code:
var colInputs = document.getElementsByTagName("input")
for (var i = 0; i < colInputs.length; i++)
{
  var oInput = colInputs[i];
  if (oInput.type == "file")
  {
    if (oInput.value.length == 0)
    {
      alert("...");
      return false;
    }

  }
}
return true;

--

Joe (Microsoft MVP - XML)
  #10 (permalink)  
Old January 10th, 2005, 06:26 AM
Authorized User
 
Join Date: Jan 2005
Location: bucuresti, , Romania.
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via Yahoo to Roshu
Default

With the function checks, i'm trying to vallidate the existing fields.
I did as you said in the all 3 of the above sentences, but now i'm getting
the error: " 'fileName' is undifined "....

Roshu




Similar Threads
Thread Thread Starter Forum Replies Last Post
help writing dynamic form data to dynamic table ublend SQL Server ASP 1 June 1st, 2007 08:09 AM
help writing dynamic form data to dynamic table ublend Classic ASP Professional 1 June 1st, 2007 08:08 AM
centering dynamic text fields with a dot spacer JeremyL Flash (all versions) 1 August 24th, 2005 08:23 AM
Pictures in Dynamic text fields kocken85 Flash (all versions) 1 February 11th, 2005 10:58 AM
Adding dynamic fields ivnavin Crystal Reports 0 December 17th, 2004 03:35 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.