Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #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
Reply With Quote
  #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)
Reply With Quote
  #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
Reply With Quote
  #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)
Reply With Quote
  #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
Reply With Quote
  #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)
Reply With Quote
  #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
Reply With Quote
  #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
Reply With Quote
  #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)
Reply With Quote
  #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
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 11:42 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.