formulier

redskin · 9 dec 2008

Hallo,

Ik ben een formuliertje aan het maken en verder weet ik niet hoe het moet.
Image 1, als begin formulier

Image 2, verder als ik op [+] aanklik

Image 3, nu kan ik meerdere personen toevoegen

enzovoort.
Weet iemand iets?
Is het mogelijk met php of javascript? hoe het het zo'n script?

Alvast bedankt.

Glest · 9 dec 2008

Het is mogelijk zowel met PHP als met javascript, ookal zou ik er voor PHP een knopje van maken wat het formulier verstuurd zodat alle data behouden kan worden.

Wat je het best kan doen is dit eerst in PHP maken en later met Javascript er een script bijschrijven wat het knopje onderschept en direct een regel toevoegd. Dat scheelt bandwidth en laadtijd voor de server en gebruiker, maar ondersteund ook gebruikers zonder javascript.

Met PHP:
Tja, je kunt het beste een array maken van de inputs en die uitschrijven in de HTML. Vervolgens als het knopje ingedrukt is er nog een lege regel bij schrhijven.

Met Javascript:
Zo te zien zitten je inputs in een tabel. Stel je hebt deze tabel:

HTML:

<table id="table_formcontainer">
  <tr>
    <td>Naam</td>
    <td>Leeftijd</td>
    <td>Vervoer</td>
  </tr>
</table>

dan kun je een script als volgt maken:

PHP:

function add_formrow()
{
  if (!this.table_formcontainer)
    this.table_formcontainer = document.getElementById("table_formcontainer");

  if (!this.table_formcontainer)
    return;

  var new_row = table_formcontainer.insertRow(-1);
  var new_cell1 = new_row.insertCell(0);
  var new_cell2 = new_row.insertCell(1);
  var new_cell3 = new_row.insertCell(2);

  var new_input1 = document.createElement("input");
  new_input1.type = "text";
  new_cell1.appendChild(new_input1);

  var new_input2 = document.createElement("input");
  new_input2.type = "text";
  new_cell2.appendChild(new_input2);

  var new_input3 = document.createElement("input");
  new_input3.type = "text";
  new_cell3.appendChild(new_input3);
}

redskin · 10 dec 2008

Bedankt voor de tips.
Heb zo gezet en doet het prima.
PHP

PHP:

<?php
// velden
$regel  = array('naam', 'leeftijd', 'vervoer');
$vrvoer = array('geen', 'fiets', 'brommer', 'openbare vervoer');
?>

en Javascript

PHP:

<script>
function add_formrow()
{
  if (!this.table_formcontainer)
    this.table_formcontainer = document.getElementById("table_formcontainer");

  if (!this.table_formcontainer)
    return;

  var new_row = table_formcontainer.insertRow(-1);
  var new_cell1 = new_row.insertCell(0);
  var new_cell2 = new_row.insertCell(1);
  var new_cell3 = new_row.insertCell(2);

  var new_input1 = document.createElement("input");
  new_input1.type = "text";
  new_cell1.appendChild(new_input1);

  var new_input2 = document.createElement("input");
  new_input2.type = "text";
  new_cell2.appendChild(new_input2);

  var new_input3 = document.createElement("input");
  new_input3.type = "text";
  new_cell3.appendChild(new_input3);
}  
</script>

Op de 3de veld heb ik een dropdown menu met vervoer
heb zo geprobeerd

PHP:

  var new_input3 = document.createElement("select");
  new_input3.type = "text";
  new_cell3.appendChild(new_input3);

er komen veld 1 en 2, de 3de niet.
weetje misschien hoe het komt?

Glest · 10 dec 2008

Dat komt doordat het niet geldig is select_object.type op text te zetten. Je kunt dat deel gewoon weg laten:

PHP:

  var new_input3 = document.createElement("select");
  new_cell3.appendChild(new_input3);

Overigens moet je nog wel alle andere atributen goed zetten van je inputs, maar ik weet natuurlijk niet welke dat zijn. En je moet ook nog alle opties toevoegen die je wilt. Hoe je dat precies kan doen staat o.a. hier:

PHP:

  var new_input3 = document.createElement("select");
  new_input3.name="vervoer[]";
  var options = ["Geen", "Fiets", "Brommer", "Openbaar vervoer"];
  for (var i = 0; i < optins.length; i++)
  {
    var option = document.createElement("option");
    option.value = options[i];
    option.text= options[i];
    try
    {
      new_input3.add(option, null);
    }
    catch  // Internet Explorer houdt zich niet aan de standaard en heeft dit helaas nodig
    {
      new_input3.add(option);
    }
  }
  new_cell3.appendChild(new_input3);

redskin · 10 dec 2008

Hoi,

PHP:

var options = ["Geen", "Fiets", "Brommer", "Openbaar vervoer"];
  for (var i = 0; i < options.length; i++)
  {

Heb geprobeerd, maar helaas doet het niets.
bekijken

Glest · 10 dec 2008

ah foutje, "catch" moet je veranderen in "catch (error)"

redskin · 11 dec 2008

Ja hij doet het, :thumb: super

is het mogelijk om deze data

PHP:

var options = ["Geen", "Fiets", "Brommer", "Openbaar vervoer"];

te vervangen met de data uit mysql database?

Glest · 11 dec 2008

tuurlijk, dan moet je er gewoon voor zorgen dat je PHP script de goede javascript echo-ed

redskin · 18 dec 2008

Hoi,
heb geprobeerd maar wil niet lukken.
database

PHP:

<?php
require "../con/db.php";

$query= "SELECT * FROM vervoer ORDER BY type ASC";
$res = mysql_query($query) or die(mysql_error()); 
while($row = mysql_fetch_row($res)){
$datavervoer = $row[0];
}

en javascript

PHP:

var new_input3 = document.createElement("select");
   new_input3.name="vervoer[]";
   var options = ['<?php echo $datavervoer?>'] ;
//het was var options = ["Geen", "Fiets", "Brommer", "Openbaar vervoer"];
   for (var i = 0; i < options.length; i++)
   {

de dropdown menu vertoon enkel 'Geen'.
dus ik mis nog andere data zoals Auto, Brommer, Fiets, Openbaar vervoer.
enig idee?
alvast bedankt.

Glest · 18 dec 2008

varander dit:

PHP:

while($row = mysql_fetch_row($res)){
$datavervoer = $row[0]; 
}

In dit:

Code:

$datavervoer = "";
while ($row = mysql_fetch_row($res))
{
  if ($datavervoer)
    $datavervoer = ", " . $datavervoer;
  $datavervoer [COLOR="Red"][B].[/B][/COLOR] =  [COLOR="Red"]'"' [/COLOR]. $row[0] . [COLOR="Red"]'"'[/COLOR]; 
}

'"' is enkel-quote dubbel-quote enkel-quote. Het zet dus $row[0] tussen aanhalingstekens.

redskin · 18 dec 2008

Hoi,

Hij geeft alles op een lijn.

.............."Geen""Auto""Brommer""Fiets""Openbaar vervoer"

enig idee?

Glest · 18 dec 2008

Dat zou niet moeten gebeuren, kun exact het script laten zien zoals je het nu hebt? Een klein typfoutje kan dramatische gevolgen hebben.

redskin · 19 dec 2008

Tja dat heb ik wel gemerkt,
hier is de code

PHP:

<?php
require "../con/db.php";

$query= "SELECT * FROM vervoer ORDER BY type ASC";
$res = mysql_query($query) or die(mysql_error()); 
$datavervoer = "";
while ($row = mysql_fetch_row($res)){
if ($datavervoer)
$datavervoer = ",".$datavervoer;
$datavervoer .=  '"'.$row[0].'"';
$datavervoer .= ","; 
echo $datavervoer;
}

?> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Meld online aan</title>
<link href="main.css" type="text/css" rel="stylesheet">
</head>

<script>
function add_formrow(){
  if (!this.table_formcontainer)
    this.table_formcontainer = document.getElementById("table_formcontainer");

  if (!this.table_formcontainer)
    return;

  var new_row = table_formcontainer.insertRow(-1);
  var new_cell1 = new_row.insertCell(0);
  var new_cell2 = new_row.insertCell(1);
  var new_cell3 = new_row.insertCell(2);

  var new_input1 = document.createElement("input");
  new_input1.type = "text";
  new_cell1.appendChild(new_input1);
  
  var new_input2 = document.createElement("input");
  new_input2.type = "text";
  new_cell2.appendChild(new_input2);

   var new_input3 = document.createElement("select");
   new_input3.name="vervoer[]";
   var options = ['<?php echo $datavervoer?>'] ;
   for (var i = 0; i < options.length; i++)
   {
    var option = document.createElement("option");
    option.value = options[i];
    option.text= options[i];
    try
    {
      new_input3.add(option, null);
    }
    catch(error)  // Internet Explorer houdt zich niet aan de standaard en heeft dit helaas nodig
    {
      new_input3.add(option);
    }
  }
  new_cell3.appendChild(new_input3);  
  }
</script>

<body>
<div id="credit"><b>T e s t</b></div>
<br>

<form method="post" action="" name="data">
<fieldset> <legend>
<font color="blue"><b>Aanmeld formulier</b></font></legend><br>
<table id="table_formcontainer">     
	 <tr>
	      <td width="10">Naam</td> <td>Leeftijd<td>Vervoer<td>&nbsp;</td> </td>		   
	 </tr>
	 
</table>
<table>	 
	 <tr>
	      	<td width="500" align="right">[<a href="#" onclick='add_formrow();'>+</a>]</td>	  
	 </tr>
     <tr>
            <td width="10"><br><input type="submit" name="submit" value=" V e r z e n d e n "> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td></td>
    </tr>
</table>
</form></fieldset>


<br>
</body>
</html>

alvast bedankt.

Glest · 19 dec 2008

Hmm, dit moet niet zo:

PHP:

while ($row = mysql_fetch_row($res))
{
  if ($datavervoer)
    $datavervoer = ", ".$datavervoer;
  $datavervoer .=  '"'.$row[0].'"';
  $datavervoer .= ","; 
  echo $datavervoer;
}

De eerste twee lijnen in het while-block zorgen al voor de komma. Niet alle browsers accepteren dit als array: ["aap", "noot", "mies",]. Sommige browers klagen over de laatste komma. Daarom moet je alleen een komma toevoegen vóórdat je een transportmidel toevoegt aan $datavervoer als er al iets stond. De laatste komma van het script moet dus zoiezo weg. De echo zal wel voor debug doeleinde zijn?

Maargoed, dit zou moeten werken:

PHP:

while ($row = mysql_fetch_row($res))
{
  if ($datavervoer)
    $datavervoer = ",".$datavervoer;
  $datavervoer .=  '"'.$row[0].'"';
  //echo $datavervoer;  // voor debugging neem ik aan?
}

$datavervoer moet nu iets zijn als dit:

"Geen", "Fiets", "OV"

Maar het orginele script zou iets als dit moeten geven. Terwijl het dus uberhaupt geen komma's bevatte?

"Geen",,"Fiets",,"OV",

redskin · 19 dec 2008

Hoi Glest,
dit is het resultaat

Ik heb je aanwijzing gevolgd en af en toe wat anders testen,

het citaat geeft geen komma aan
"Geen""Fiets""OV" enz.

Glest · 19 dec 2008

kun je de HTML broncode laten zien? Dat helpt meestal meer

Oh en ik zie wel één foutje. In je PHP code staat dit:

PHP:

['<?php echo $datavervoer?>']

De quotes tussen de vierkante haakjes moeten weg:

PHP:

[<?php echo $datavervoer; ?>]

redskin · 19 dec 2008

Als ik de quotes weg haal

PHP:

[<?php echo $datavervoer; ?>]

dan doet de formulier helemaal niks, (hij maak geen nieuwe row open)

Glest · 19 dec 2008

Dat is opzich best logisch aangezien [......."Geen""Auto""Brommer""Fiets"] geen geldig javascript is. Daar loopt hij dus op vast. Maar kun je een link geven naar je pagina? En een dump schema van je SQL tabel `vervoer`? Liefst ook met rijen en niet alleen de structuur als het kan.

redskin · 19 dec 2008

Sorry, moest effe uploaden.

Dit is de link,
met quotes
http://jawaweb.com

zd quotes
http://www.jawaweb.com/indexA.php

MYSQL tabel
--
-- Table structure for table `vervoer`
--

CREATE TABLE `vervoer` (
`id` int(10) NOT NULL auto_increment,
`type` varchar(10) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

--
-- Dumping data for table `vervoer`
--

INSERT INTO `vervoer` (`id`, `type`) VALUES
('1', 'Geen'),
('2', 'Auto'),
('3', 'Brommer'),
('4', 'Fiets'),
('5', 'Openbaar vervoer');

-- --------------------------------------------------------

Glest · 19 dec 2008

doh, wat ik zei:

PHP:

while ($row = mysql_fetch_row($res))
{
  if ($datavervoer)
    $datavervoer = ",".$datavervoer;
  $datavervoer .=  '"'.$row[0].'"';
}

Zet steets komma's vooraan $datavervoer. Ze moeten natuurlijk achteraan:

PHP:

while ($row = mysql_fetch_row($res))
{
  if ($datavervoer)
    $datavervoer .= ",";
  $datavervoer .=  '"'.$row[0].'"';
}

En dan moeten wel de quotes weg heirzo:

PHP:

[<?php echo $datavervoer; ?>]

formulier

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Wij waarderen jouw privacy