[javascript] veld aan form toevoegen.

donderdag 24 december 2009 12:07

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Hallo,

ik heb een probleem waar ik maar niet uit kom.
Ik heb op mijn site een aanmeld formulier waar personen zich kunnen aanmelden voor een cursus.
Door op een knop te klikken kunnen ze meer velden aanmaken voor meerdere personen.

Het voorbeeld heb ik hier staan:
http://maxcim.nl/test/test.php

Als je nu op "persoon toevoegen" klikt verschijnt er maar 1 veld.
Maar ik heb 3 velden nodig voor de naam, geboortedata & geboorteplaats.

Het lukt mij maar niet om het erin te krijgen zodat ook de gegevens van de velden doorgegeven worden aan het bestand wat vervolgens de gegevens maild.

Hieronder het script.
Iemand die mij verder kan helpen?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script type="text/javascript">
function addField()
{
var mainOb = document.getElementById('mainDiv');
var valOb = document.getElementById('val');
var num = (document.getElementById("val").value -1)+ 2;
valOb.value = num;
var newDivName = "my"+num+"Div";
var newDiv = document.createElement('div');
newDiv.setAttribute("id",newDivName);
newDiv.innerHTML = "<input type='text' name='"+newDivName+"'>&nbsp;<a href='#' onclick='removeField(\""+newDivName+"\"); return false;'>Verwijder persoon</a>";

mainOb.appendChild(newDiv);
}

function removeField(divNam)
{
var o = document.getElementById('mainDiv');
var oldDiv = document.getElementById(divNam);
o.removeChild(oldDiv);
}
</script>
</head>
<body>
<form>
<input type="hidden" value="0" id="val" />
<p><a href="#" onClick="addField();  return false;" >Persoon toevoegen</a></p>
<div id="mainDiv"> </div>
</form>
</body>
</html>

Bedankt.

donderdag 24 december 2009 12:38

Acties:

0 Henk 'm!

hgp

Je moet je form even een Action en Method geven. En natuurlijk een submit button

.

HTML:

1	<form action="mail.php" method="post">

Stel je hebt mail.php als action kan je in mail.php de variablen ophalen door zoiets te gebruiken.

PHP:

1
2
3

<?php
echo $_POST["nameVanVeldInForm"];
?>

Meerdere velden voor geboorte datum e.d. kan je toch gewoon toevoegen bij regel 16 in jouw stukje code?

Als ik me niet vergis kan je de name van de input waar je de naam invult veranderen in bijvoorbeeld name="personen[]" zodat je de personen als array kan gebruiken in php. Dan krijg je dus $_POST["personen"][0], $_POST["personen"][1] ...

[ Voor 3% gewijzigd door hgp op 24-12-2009 12:42 ]

donderdag 24 december 2009 14:58

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Ik zou er inderdaad ook een Array van maken, vind ik persoonlijk netter. En uiteraard de action="" en method="" toevoegen, zoals hgp ook al zei.

Zelf zou ik denk ik eerder voor een jQuery scriptje gaan, maar met dit script moet het inderdaad ook lukken, op regel 16 inderdaad; wel even opletten dat je de naam/id van de overige velden (datum, plaats) dus ook aanpast.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

vrijdag 25 december 2009 11:51

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Oke ik ben nu zover:
http://maxcim.nl/test/test.php

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script type="text/javascript">
function addField()
{
var mainOb = document.getElementById('mainDiv');
var valOb = document.getElementById('val');
var num = (document.getElementById("val").value -1)+ 2;
valOb.value = num;
var newDivName = "my"+num+"Div";
var newDiv = document.createElement('div');
newDiv.setAttribute("id",newDivName);
newDiv.innerHTML = "<table><tr><td>Naam:</td><td><input type='text' name='"+newDivName+"'></td></tr><tr><td> Geboorteplaats: </td><td><input type='text' name='"+newDivName+"'></td></tr><tr><td> Geboortedatum: </td><td><input type='text' name='"+newDivName+"'></td></tr></table> &nbsp;<a href='#' onclick='removeField(\""+newDivName+"\"); return false;'>Verwijder persoon</a>";
mainOb.appendChild(newDiv);
}

function removeField(divNam)
{
var o = document.getElementById('mainDiv');
var oldDiv = document.getElementById(divNam);
o.removeChild(oldDiv);
}
</script>
</head>
<body>
<form action="zenden.php" method="post">
<table>
<tr><td></td>
<td><div id="mainDiv"> </div></td></tr>
<tr><td><input type="hidden" value="0" id="val" />
<p><a href="#" onClick="addField();  return false;" >Persoon toevoegen</a></p></td>
<td></td></tr></table>
</form>
</body>
</html>

Dit doet dus eigenlijk precies wat ik wil hebben.
Ik heb het form in een tabelletje gezet zodat de knop "Persoon toevoegen" onderaan blijft.

Wat ik nu nog moet weten is welke naam de velden doorsturen naar zenden.php zodat ik de data daarin kan krijgen.
Ik ben nog niet zo heel bekend met javascript dus ik kan er niet precies uithalen welke namen de velden krijgen.

Alvast bedankt.

[ Voor 186% gewijzigd door Verwijderd op 25-12-2009 11:57 ]

vrijdag 25 december 2009 11:55

Acties:

0 Henk 'm!

Xander

Je geeft de drie velden nu dezelfde naam, allemaal "my"+num+"Div".

Dat gaat niet werken...

PC specs!---Pulse mee voor GoT!
[22:49:37] <@Remy> ik wil een opblaasbare dSLR :+

vrijdag 25 december 2009 12:01

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Xander schreef op vrijdag 25 december 2009 @ 11:55:
Je geeft de drie velden nu dezelfde naam, allemaal "my"+num+"Div". Dat gaat niet werken...

Kan ik van dit:

JavaScript:

1	var newDivName = "my"+num+"Div";

bijvoorbeeld dit maken dan?

JavaScript:

1
2
3

var newDivNameNaam = "my"+num+"Div"; 
var newDivNamePlaats = "my"+num+"Div"; 
var newDivNameDatum = "my"+num+"Div";

En was is dan de preciese naam die het veld krijgt?
Wat wordt hier dus precies aangemaakt:

JavaScript:

1
2
3

var num = (document.getElementById("val").value -1)+ 2;
valOb.value = num;
var newDivName = "my"+num+"Div";

[ Voor 21% gewijzigd door Verwijderd op 25-12-2009 12:03 ]

vrijdag 25 december 2009 13:23

Acties:

0 Henk 'm!

Xander

Verwijderd schreef op vrijdag 25 december 2009 @ 12:01:
[...]

Kan ik van dit:
JavaScript:
1
var newDivName = "my"+num+"Div"; 
bijvoorbeeld dit maken dan?
JavaScript:
1
2
3
var newDivNameNaam = "my"+num+"Div"; 
var newDivNamePlaats = "my"+num+"Div"; 
var newDivNameDatum = "my"+num+"Div"; 

Sure. Alleen vul je die 3 variabelen dan nog steeds met exact dezelfde waarde.

En wat doet dat 'div' eigenlijk in die variabelenaam? Voor de werking maakt het weinig uit, maar volgens mij wilde je input-velden een naam geven, geen div's...

En wat is dan de preciese naam die het veld krijgt?
Wat wordt hier dus precies aangemaakt:
JavaScript:
1
2
3
var num = (document.getElementById("val").value -1)+ 2;
valOb.value = num;
var newDivName = "my"+num+"Div"; 

"my" plus het opvolgnummertje dat je dat je bepaalt plus "Div".

Bijvoorbeeld "my1Div", "my2Div", "my3Div" etc...

edit:

Lees trouwens ook de laatste alinea van hgp's post eens door.

[ Voor 3% gewijzigd door Xander op 25-12-2009 13:27 ]

PC specs!---Pulse mee voor GoT!
[22:49:37] <@Remy> ik wil een opblaasbare dSLR :+

zaterdag 26 december 2009 23:03

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Oke na lang op google te hebben gezocht heb ik het nu grotendeels opgelost.
Ik heb een nieuw script gevonden wat veel fijner werkt.

Ik het hier werkend: http://maxcim.nl/test/test.php

Het originele script staat hier: http://blog.tangorangers....with-dynamic-post-method/

En dit is hoe ik het nu werkend heb:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script type="text/javascript">
var counter = 0;
function add_phone() {
    counter++;
    var newFields = document.getElementById('add_phone').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name
        if (theName)
                newField[i].name = theName + counter;
        }
        var insertHere = document.getElementById('add_phone');
        insertHere.parentNode.insertBefore(newFields,insertHere);
}
</script>
</head>
<body>
<form name="add_a_phone" action="send_aanmelden.php" method="post" enctype="multipart/form-data">

<div id="phone">
    Naam:<br><input type="text" name="naam_0" value="" /><br>
    Geboorteplaats:<br><input type="text" name="plaats_0" value="" /><br>
        Geboortedatum:<br><input type="text" name="datum_0" value="" /><br><br>
</div>
<div id="add_phone" style="display: none;">
    Naam:<br><input type="text" name="naam_" value="" /><br>
    Geboorteplaats:<br><input type="text" name="plaats_" value="" /><br>
        Geboortedatum:<br><input type="text" name="datum_" value="" /><br><br>
</div>
<input type="button" id="add_phone()" onclick="add_phone()" value="Give me more fields!" /><br>
<input type="submit" name="submit" value="submit" />

</form>
</body>
</html>

Het eniste probleem wat ik nu nog heb is dat dit wel werkt:

HTML:

<div id="phone">
Naam:<br><input type="text" name="naam_0" value="" /><br>
Geboorteplaats:<br><input type="text" name="plaats_0" value="" /><br>
Geboortedatum:<br><input type="text" name="datum_0" value="" /><br><br>
</div>
<div id="add_phone" style="display: none;">
Naam:<br><input type="text" name="naam_" value="" /><br>
Geboorteplaats:<br><input type="text" name="plaats_" value="" /><br>
Geboortedatum:<br><input type="text" name="datum_" value="" /><br><br>
</div>

Maar dit niet:

HTML:

<div id="phone">
<table>
<tr><td>Naam:</td><td> <input type="text" name="naam_0" value="" /></td></tr>
<tr><td>Geboorteplaats:</td><td>  <input type="text" name="plaats_0" value="" /></td></tr>
<tr><td>Geboortedatum:</td><td><input type="text" name="datum_0" value="" /></td></tr>
</table>
</div> 
<div id="add_phone" style="display: none;">
<table>
<tr><td>Naam:</td><td> <input type="text" name="naam_" value="" /></td></tr>
<tr><td>Geboorteplaats:</td><td>  <input type="text" name="plaats_" value="" /></td></tr>
<tr><td>Geboortedatum:</td><td><input type="text" name="datum_" value="" /></td></tr>
</table>
</div>

Als ik het in een tabel zet wordt alleen de data van de eerste div:
"<div id="phone">"
doorgegeven maar niet de data van de velden die je met de knop kunt aanmaken en in de tweede div:
"<div id="add_phone" style="display: none;">"
staan.

Iemand een idee waarom dit is?

Verder werkt het perfect.

zaterdag 26 december 2009 23:21

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Je kopieert enkel de child nodes, niet alle onderliggende elementen. Je zal dus ook alle onderliggende elementen moeten kopieren. Zorg trouwens dat je een debug tool zoals Firebug hebt, dat maakt het stukken makkelijker.

[ Voor 26% gewijzigd door MueR op 26-12-2009 23:22 ]

Anyone who gets in between me and my morning coffee should be insecure.

zaterdag 26 december 2009 23:33

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

MueR schreef op zaterdag 26 december 2009 @ 23:21:
Je kopieert enkel de child nodes, niet alle onderliggende elementen. Je zal dus ook alle onderliggende elementen moeten kopieren. Zorg trouwens dat je een debug tool zoals Firebug hebt, dat maakt het stukken makkelijker.

Sorry maar ik begrijp niet echt wat je bedoelt

Het probleem is dus dat het formulier in het tweede divje goed werkt, maar als ik het in een simpel tabelletje zet geeft het geen data meer door aan "send_aanmelden.php"

Ik heb een beetje liggen zoeken op google maar ik weet niet precies waar ik op moet zoeken dus vind eigenlijk niks hierover.

Toch bedankt voor de reactie

zondag 27 december 2009 00:37

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Dus zul je moeten debuggen. Wat verstuur je precies, wat krijg je terug. Hoe ziet je formulier er uit op het moment van versturen. Momenteel ben je hier code aan het neergooien en zeggen, "dit werkt, dit werkt niet, wat nu?". Je zult met wat meer informatie moeten komen, zoals wat je probeert om je probleem op te lossen. Anders heeft dit topic weinig kans.

Anyone who gets in between me and my morning coffee should be insecure.

Onderwerpen