How to add another form with javascript?

JavaScript and client side scripting.

Moderator: General Moderators

markg85
Forum Commoner
Posts: 32
Joined: Sat Dec 03, 2005 6:49 pm

How to add another form with javascript?

Post by markg85 »

Hello,

unfortunally i don`t know a thing about javascript but i do want to have a small piece of javascript code..
you can see the exact piece i want to have in the mage below.
Image

i also found 2 nice javascript pieces...


1: (_ from internet.com or some site like that _)

Code: Select all

<!-- TWO STEPS TO INSTALL ADDING HTML CONTROLS:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<script type="text/javascript">
<!-- Begin
/* This script and many more are available free online at
The JavaScript Source!! <a href="http://javascript.internet.com" target="_blank">http://javascript.internet.com</a>
Created by: Husay :: <a href="http://www.communitxt.net" target="_blank">http://www.communitxt.net</a> */

var arrInput = new Array(0);
  var arrInputValue = new Array(0);

function addInput() {
  //arrInput.push(createInput(arrInput.length));
  arrInput.push(arrInput.length);
  //arrInputValue.push(arrInputValue.length);
  arrInputValue.push("");
  display();
}

function display() {
  document.getElementById('parah').innerHTML="";
  for (intI=0;intI<arrInput.length;intI++) {
    document.getElementById('parah').innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);
  }
}

function saveValue(intId,strValue) {
  arrInputValue[intId]=strValue;
}  

function createInput(id,value) {
  return "<input type='text' id='test "+ id +"' onChange='java script:saveValue("+ id +",this.value)' value='"+ value +"'><a href='java script:deleteInput("+ id +")'>"+ id +"delete this field</a><br>";
}

function deleteInput(id) {
  if (arrInput.length > 0) {
     arrInput.pop();
     arrInputValue[id];
  }
  display();
}
// End -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<p id="parah">Dynamic creation of input boxes</p>

<a href="java script:addInput()">Add more input field(s)</a><br>
<a href="java script:deleteInput()">Remove field(s)</a>

<!-- Script Size:  1.74 KB -->
2:

Code: Select all

<html>
<head>
<script type="text/javascript">
  fieldcount = 1;
  function addUpload(){
    var fieldvalues = new Array();
    var i;
    // de waarden van de bestaande velden opslaan
    for(i = 1; i <= fieldcount; i++){
      fieldvalues[i] = document.getElementById("file" + i).value;
    }
    // nieuw file field toevoegen
    // PROBLEEM: bestaande velden worden leeggemaakt
    fieldcount++;
    document.getElementById("field_holder").innerHTML += "<input type='file' name='file" + fieldcount + "' id='file" + fieldcount + "' /><br />";
    // de waarden instellen
    for(i = 1; i <= fieldcount - 1; i++){
      document.getElementById("file" + i).value = fieldvalues[i]; // <-- DIT WERKT NIET
      // je kan van een file field om een of andere rede geen waarde instellen
      // ik weet tot hiertoe geen oplossing daarvoor
    }
  }
</script>
<body>
  <form method="post" name="uploadform" action="js_form_read.php" enctype="multipart/form-data">
    <div id="field_holder">
      <input type="file" name="file1" id="file1" /><br />
    </div>
    <a href="#" onClick="addUpload();">Nog een bestand uploaden</a><br /><br />
    <input type="submit" value="Verzenden" />
  </form>
</body>
</head>
</html>
both scripts do almost what i want them to do but i prefer script 2 because it`s easyer to import in a php script (my opinion)
There are still serveral bad things in script 2
- when you add a new field the value of the existing fields will be gone
- you can`t delete a filed like you can in google...

So i was hoping that someone could help me out with this script :) please :D
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Admittedly we're treading into DOM scripting here which isn't newbie friendly for JS.... If you read enough you'll get it though :)

Code: Select all

<script type="text/javascript">
<!--

function addFileBox(elementID)
{
	el = document.getElementById(elementID); //Get the parent element Node
	var appender = document.createElement('input'); //Create a new <input /> element
	appender.name = 'theFile[]'; //Give it a <input name="theFile[]" /> attribute
	appender.type = 'file'; //Give it <input type="file" name="theFile[]" />
	el.appendChild(document.createElement('br')); //Create a <br /> element and add it to the parent node
	el.appendChild(appender); //Add our newly created <input /> element to the parent node
}

// -->
</script>
<div style="width: 500px; padding: 10px; background: #BBBBFF; border: 1px solid #CCCCCC;">
	<div id="fileContainer" style="padding: 10px; background: #F5F5F5;">
		<input type="file" name="theFile[]" />
	</div>
	<div style="padding: 10px; background: #F5F5F5;">
		<a href="javascript:addFileBox('fileContainer');">Click here to add another file</a>
	</div>
</div>
See it here: http://www.w3style.co.uk/devnet/uploader.html
(Note demo is not a functional form)

When you do a print_r() of $_FILES you'll see a multidimensional array...

Code: Select all

Array (
    [0] => Array (
        tmp_name => '/tmp/foo',
        errors => 0
    ),
    [1] => Array (
        //
    )
    etc etc....
)
markg85
Forum Commoner
Posts: 32
Joined: Sat Dec 03, 2005 6:49 pm

Post by markg85 »

Admittedly we're treading into DOM scripting here which isn't newbie friendly for JS....
i don`t understand that line... could you explain it please :)

and for the script.. AWSOME :D it`s almost exactly what i want now i only miss a delete button to remove a certain field so if someone would be kind enough to make that for me :D that would be verry nice
foobar
Forum Regular
Posts: 613
Joined: Wed Sep 28, 2005 10:08 am

Post by foobar »

markg85 wrote:
Admittedly we're treading into DOM scripting here which isn't newbie friendly for JS....
i don`t understand that line... could you explain it please :)
Are we trying to do stuff we have no clue about, are we?

http://www.w3schools.com has a good DOM tutorial. Good for beginners.
markg85
Forum Commoner
Posts: 32
Joined: Sat Dec 03, 2005 6:49 pm

Post by markg85 »

LOL i ask it here because i have no time to start learning javascript because i`m to bussy with school, my own script and OOP programming in php so i don`t really have the time to start learning all the javascript stuff just for this one thing :)

so.. could someone please add a delete function that deletes the field :)
o and i will take a look at those tutorials :) it`s verry interesting stuff anyway :D
foobar
Forum Regular
Posts: 613
Joined: Wed Sep 28, 2005 10:08 am

Post by foobar »

markg85 wrote:LOL i ask it here because i have no time to start learning javascript because i`m to bussy with school, my own script and OOP programming in php so i don`t really have the time to start learning all the javascript stuff just for this one thing :)
FYI, most of the people here are either very busy university students or professionals working as programmers. These people are doing (an equivalent of) a full-time job. So don't give me the "I'm too busy so do it for me" excuse. Sorry, pal, but that's life. :?

At least show some initiative. And I'm sure there'll be someone willing to help. Including me. :wink:
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

markg85 wrote:
Admittedly we're treading into DOM scripting here which isn't newbie friendly for JS....
i don`t understand that line... could you explain it please :)

and for the script.. AWSOME :D it`s almost exactly what i want now i only miss a delete button to remove a certain field so if someone would be kind enough to make that for me :D that would be verry nice
DOM: Document Object Model

DOM scripting was added to JavaScript a fair few years back, I haven't checked the actual date. In laymans terms it allows you to manipulate the contents of the page by creating entire new sections wherever you like, extracting the HTML from inside elements, deleting element, and fetching elements into variables. We call the elements nodes.

Take for example:

Code: Select all

<div id="divOne">
    <div id="divTwo">

    </div>
</div>
Now divOne is a node itself.... divTwo is also a node (just a way to describe part of the page). There's a few properties that DOM brought into JavaScript. Now, if we asked for document.getElementById('divTwo').parentNode; we'd have the location of divOne stored in memory. It's confusing til you wrap your head around it.

The most commong thing you'll see in DOM scripting is the use of document.getElementById(). What it does is it allows you to fetch a node from the page and do something with it. So using our two divs above we could do:

Code: Select all

var divOne = document.getElementById('divOne');
divOne.innerHTML = 'New HTML inside';
innerHTML is just the property for the HTML contained inside the node. Here we'd just see text appear inside divOne and divTwo would simply be overwritten.

You've concinced me to take some time to put a little tutorial up now :) I could explain better if I had a thread for it. There's plenty on google though.

Ammended code to delete the boxes.

Code: Select all

function addFileBox(elementID)
{
	el = document.getElementById(elementID); //Get the parent element Node
	var appenderInput = document.createElement('input'); //Create a new <input /> element
	appenderInput.name = 'theFile[]'; //Give it a <input name="theFile[]" /> attribute
	appenderInput.type = 'file'; //Give it <input type="file" name="theFile[]" />
	
	var appenderDiv = document.createElement('div');
	appenderDiv.appendChild(appenderInput);
	
	appenderDiv.innerHTML += '<a href="javascript:delFileBox(\'fileContainer\');">[ Delete ]</a>';
	
	el.appendChild(appenderDiv); //Add our newly created <input /> element to the parent node
}

function delFileBox(elementID)
{
	el = document.getElementById(elementID); //Get the parent element Node
	el.removeChild(el.lastChild);
}
Working here: http://www.w3style.co.uk/devnet/uploader2.html
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

foobar wrote:
markg85 wrote:LOL i ask it here because i have no time to start learning javascript because i`m to bussy with school, my own script and OOP programming in php so i don`t really have the time to start learning all the javascript stuff just for this one thing :)
FYI, most of the people here are either very busy university students or professionals working as programmers. These people are doing (an equivalent of) a full-time job. So don't give me the "I'm too busy so do it for me" excuse. Sorry, pal, but that's life. :?

At least show some initiative. And I'm sure there'll be someone willing to help. Including me. :wink:
The question was put politely enough and it's one of those things a lot of people find difficult to grasp, even some more experience developers. Please cool your attitude down a little.
markg85
Forum Commoner
Posts: 32
Joined: Sat Dec 03, 2005 6:49 pm

Post by markg85 »

foobar wrote:
markg85 wrote:LOL i ask it here because i have no time to start learning javascript because i`m to bussy with school, my own script and OOP programming in php so i don`t really have the time to start learning all the javascript stuff just for this one thing :)
FYI, most of the people here are either very busy university students or professionals working as programmers. These people are doing (an equivalent of) a full-time job. So don't give me the "I'm too busy so do it for me" excuse. Sorry, pal, but that's life. :?

At least show some initiative. And I'm sure there'll be someone willing to help. Including me. :wink:
initiative... well i don`t even know where to start with javascript but well here i go...
i tought i was being smart and adding a link just before the br... but it isn`t working :(

Code: Select all

el.appendChild(document.createElement('<a href=''>delete row</a><br>')); //Create a <br /> element and add it to the parent node
edit:://

LOL i didn`t need to change that...
this was enough:

Code: Select all

<input type="file" name="theFile[]" /><a href="javascript:deleterow();">Delete this line</a>
but i don`t know what to pun in the deleterow function
Last edited by markg85 on Mon Dec 05, 2005 1:52 pm, edited 1 time in total.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

See my second from last post ;)
markg85
Forum Commoner
Posts: 32
Joined: Sat Dec 03, 2005 6:49 pm

Post by markg85 »

d11wtq wrote:See my second from last post ;)
nice :D but it has a few bugs :)

1. the first form doesn`t have a delete button
2. it deletes the last form and not the one where you click on delete

but besides that: GREAD :D and i`m spitting through the code now to see what you have done to LEARN from it :D

EDIT:://
i`ve read every line about a dozen times now and i just don`t understand what your doing in the script... maybe i need to put php on hold for a few weeks and start learning javascript :D //me is searching for good (dutch) tutorials now :D

EDIT2:://
your tutorial was verry helpfull :) but i will need ALOT more to even start scripting javascript and i already found a pritty good resource....
Last edited by markg85 on Mon Dec 05, 2005 2:22 pm, edited 1 time in total.
foobar
Forum Regular
Posts: 613
Joined: Wed Sep 28, 2005 10:08 am

Post by foobar »

d11wtq wrote: The question was put politely enough and it's one of those things a lot of people find difficult to grasp, even some more experience developers. Please cool your attitude down a little.
Sorry to be going off-topic, but he _did_ just copy some code from the web and then asked someone to do it for him. I don't believe that that's a valid way to approach the problem. I hold nothing against markg85 whatsoever, but I believe that showing a bit of initiative (or independent thinking if you will), such as trying out some tutorials and posting problematic code for evaluation/debugging is the way to go. I know that my sometimes harsh replies are regarded as offensive by many, however personally, I have trouble understanding the value of straight out doing something for someone without them trying it themselves in the first place. I believe asking for help is a two-way thing. You have to give something (show that you have engaged in the problem) to receive something (receive help) in return. This is, of course, only my opinion, but I still strongly believe in it's truthfulness.

I do want to end this post on a more cheerful note, however, and so I've decided to fix d11's code:

Code: Select all

var fcount = 0;

function addFileBox(elementID)
{

   el = document.getElementById(elementID); //Get the parent element Node
   var appenderInput = document.createElement('input'); //Create a new <input /> element
   appenderInput.name = 'theFile[]'; //Give it a <input name="theFile[]" /> attribute
   appenderInput.id =  ++fcount;
   appenderInput.type = 'file'; //Give it <input type="file" name="theFile[]" id="{number}" />

   var appenderDiv = document.createElement('div');
   appenderDiv.appendChild(appenderInput);

   appenderDiv.innerHTML += '<a href="javascript:delFileBox(\'fileContainer\', '+fcount+');">[ Delete ]</a>';

   el.appendChild(appenderDiv); //Add our newly created <input /> element to the parent node
}

function delFileBox(elementID, nodeID)
{

   el = document.getElementById(elementID); //Get the parent element Node
   
   el.removeChild(el.childNodes.item(getPlace(el, nodeID)));
}

function getPlace (el, nodeID) {

  var place = 0;

  for (var i = 0; i < el.childNodes.length; i++) {
    if (el.childNodes.item(i).id == nodeID) break;
    place++;
  }
  
  return place;

}
[edit] Still doesn't work, but it's getting there.
Last edited by foobar on Mon Dec 05, 2005 2:54 pm, edited 2 times in total.
foobar
Forum Regular
Posts: 613
Joined: Wed Sep 28, 2005 10:08 am

Post by foobar »

Damn, I just found an error, will be fixed in a second... :oops:
markg85
Forum Commoner
Posts: 32
Joined: Sat Dec 03, 2005 6:49 pm

Post by markg85 »

hehe i noticed but i also would like to reply on what you just said...

i completely agree with it :) but i also think that it should be possible that you can "request" something if you just need that one part.. you don`t need to learn the entire javascript language for just one thing.. that`s why i didn`t say a bad thing in opening this thread. But it`s a different story if i open a new thread whitch is about javascript again and about a request again.. than it`s time to start learning :D

but again.. i agree with you :!: i also hate it when people only ask and never give.. i`ve had that alot on a few sites of mine.. (died about 6 months ago) i stopped with those sites because i was basicly a online support desk :( that wasn`t my idea if that site so i closed it :)
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

markg85 wrote: 1. the first form doesn`t have a delete button
2. it deletes the last form and not the one where you click on delete

your tutorial was verry helpfull :) but i will need ALOT more to even start scripting javascript and i already found a pritty good resource....
Sorry I didn't think the first one would ever need to be deleted :)

As for the thing with the last row being deleted that's my rushed scripting :P I'd used "lastChild" when what I could have used was "this.parentNode" along with the removeChild() method.

Learning the stuff you need to do that form shouldn't take more than perhaps 6 hours studying from tutorials on the web. It helps if you have a good grasp of object-oriented programming though.

Perhaps you should start with learning the basics of JS (which to be honest is dead simple) and then have a look at: http://www.howtocreate.co.uk/tutorials/ ... =0&part=25

:)

~foobar: Point noted. BTW, you might want to consider something like delFileBox(this.parentNode, this.parentNode.parentNode) with

Code: Select all

function delFileBox(_child, _parent)
{
    _parent.removeChild(_child);
}
;)
Post Reply