inputvelden laten verschijnen op basis van keuze dropdown.

Status
Niet open voor verdere reacties.
T

thapriest

Gebruiker
Lid geworden
28 okt 2009
Berichten
559
Goedemiddag,

Ik ben al n tijdje aan t klungelen, en ik en javascript worden nog geen vrienden van elkaar helaas.

Ik probeer het volgende te bereiken:
D.m.v van een dropdown wil ik een getal selecteren van 1 tm 5, op basis van die keuze moet er dan dmv een onchange event evenzoveel invoevakjes tevoorschijnkomen met naam en gebroortedatum.

Echter , mij lukt het voor geen meter, iemand een goei tip of tutorial?
 
Betreft.

Weet u wat echt goed helpt?

Haal een boek over javascripting - basic heeft mij ook geholpen...
Of als u niet van lezen houd?
Klikt u Hier

:thumb:
 
Laatst bewerkt:
EDIT, ik ga er ook niets van zeggen...

Anywaytjes zoek ik dus even een kleine tutoraial(NA op google gezocht te hebben, niets gevonden.).
geen compleet kant en klaar script.
 
Laatst bewerkt:
Weet u wat echt goed helpt?

Haal een boek over javascripting - basic
Klik om te vergroten...
mmmhhh :confused: "beetje" bot en niet echt vraag gerelateerd,

maar om terug te komen op de vraag, ik denk dat jij "Dynamic Dropdown Boxes" bedoeld.
En hier is een kleine voorbeeldje


groeten vreugde
 
Dank je:)

ik had inmiddels zelf dit gevonden:
[JS]<script type="text/javascript">
var counter = 0;
var limit = 5;
function addInput(divName){
if (counter == limit) {
alert("Meer dan " + counter + " kinderen toevoegen niet mogelijk ");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<table><tr><td>Naam kind " + (counter + 1) + "</td><td> <input type='text' name='myInputs[]'></td></tr>" +"<tr><td>Geboortedatum kind " + (counter+ 1) +"</td><td><br><input type='text' name='myInputs2[]'></td></tr></table>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}

</script>[/JS]

met een <a href> laat ik nieuwe inputs met een max. tot 5 verschijnen, en dan een alert.

Alleen loop ik dus nu vast op het punt, dat ik dit in een form gebruik, en wanneer mensen dit invullen wil ik ook graag dat dit gepost wordt, alleen weet ik even niet goed hoe de waardes daarvan uit javascript te halen en in de formulier afhandeling(in PHP) krijg?

En lieer nog verander ik bovenstaande zodanig, dat ik alsnog met een dropdown kan werken, waar in de opties 1 tm 5 staan, maar eerst maar eens zien of k m dorkrijg wat betreft e verzending.
 
Laatst bewerkt:
Als je de inputvelden laat verschijnen tussen de <form> en </form> tag zou je de waardes daarvan ook in het PHP-afhandelingsscript moeten krijgen.
 
Euhm, ze verschijnen idd binnen de form tags, maar hoe pak ikk die in php op dan?
als name-attribuut hebben ze "myInputs[]" , pak ik ze dan gewoon op met die naam?
 
Ze zouden in $_POST['myInputs'] moeten staan. Anders kan je eens met
PHP: 
print_r($_POST);
kijken wat er mee wordt gestuurd naar het PHP-script.
 
Sorry voor een late reactie, ik zat in het buitenland:).
Het werkt nu goed, ik kan ze meesturen met het formulier.

Nu wilde ik nog een stapje verder, weet alleen niet of het mogelijk is, stel ik vul 3 velden in, en ergens op het formulier gaat iets mis, en dus wordt de error array gevuld, en er komt een waarschuwing te voorschijn etc.(ik check dus bijv met regex op telefoonnnumers, postcodes, etc.), hoe laat ik dan die inputs onthouden zodat een gebruiker niet weer opnieuw hoeft te typen?
 
Een input veld heeft een value attribuut. Deze kan je dan vullen met PHP.

HTML: 
<input type='text' value='<?php echo $eenwaarde; ?>' />
Mocht je (snap de vraag nu niet helemaal) met Javascript werken moet je er een stapje tussen doen:[JS]var veldNaam = "<?php echo $eenwaarde; ?>";

// en dan in je loop:

if(veldNaam != '') /* oid */
{
out += "<input type='text' value='" + veldNaam + "' />";
}else{
out += "<input type='text' />";
}
[/JS]:thumb:
 
JE PHP oplossing snap ik, daar controlleer ik de rest van mijn velden ook mee, om ze bij een evt fout weer te vullen.

Echter gebruik ik het javascript hier ergens boven om dynamisch velden te genereren, die kan tm 5 velden.

En ik wil dus graag als er iets misgaat dat die velden blijven staan in het Formulier, en dat lukt me dus no g niet:(
 
Waarom geef je het aantal input-velden niet mee met het form maar dan als een hidden-value, zodat je als er iets fout gaat je, eerst de hidden-value kan uitlezen.

Bijvoorbeeld:
PHP: 
<?php
if ($_POST["hidden-value"] > 0)
{
   // Doe hier iets, zoals het aantal velden maken
}
?>
<form>
<input type='hidden' name='hidden-value' value='0' />
</form>

groeten vreugde
 
Ja, dat was dus precies wat ik bedoelde.

1. PHP leest waardes. Een paar ervan zijn foutief ingevuld.
2. Nu wil je dat de 'goede' velden opnieuw ingevuld worden.​
HTML: 
<script>

<?php

   if(/* ingevuld */)
   {
      // sla waardes op

      if(/* een waarde verkeerd is */)
      {
         // echo alle andere waardes naar Javascript:
         echo "var veldWaardes = ['" . $veld1 . "', '" . $veld2 . "'];";
         // noot dat $veld1 en $veld2 dus OF de goede waardes zijn, OF leeg als het nog niet
         // is ingevuld of foutief was.
      }
   }

?>

// loop voor je 5 velden maken:

for(i=0; i<5; i++)
{
   output += "<input type='text' name='yyy' xxx='zzz' value='" + veldWaardes[i] + "' />";
}
</script>
:thumb:
 
Laatst bewerkt:
Hmmmzz, ik moet eerlijk bekennen dat ik nog niet helemaal snap wat je bedoelt:o

Hoe kom ik bijv aan $veld1 en $veld2?

kijk ik heb nu dit stukje javascript:
[JS]<script type="text/javascript">
var counter = 0;
var limit = 5;
function addInput(divName){




if (counter == limit) {
alert("Meer dan " + counter + " kinderen toevoegen niet mogelijk ");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<table><tr><td>Naam kind " + (counter + 1) + "</td><td> <input type='text' name='myInputs[]'></td></tr>" +"<tr><td>Geboortedatum kind " + (counter+ 1) +"</td><td><br><input type='text' name='myInputs2[]'></td></tr></table>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}

</script>[/JS]

Daarmee pak ik met een <a href > de velden door er op te klikken, tot een max. van 5 dan een alert.Wat ik nu nog niet begrijp, hoe ik die veldjes wat ik genereer met dit stukje JS, kan oppakken in php.
 
Okay, hier is het idee:


Je hebt een HTML <form> geval. Dat je er met Javascript dynamisch meer bijmaakt zal wel, we gaan voor het gemak even alleen aan het HTML form denken.

Zoals je zelf zei kan je met PHP deze waardes allemaal binnenkrijgen ($_POST). Nu, ook de dynamische Javascript velden dus.

Nu, stel iemand vult er 1 verkeerd in. Oh noes! We krijgen echter wel alle velden binnen. Zie deze pseudocode:
PHP: 
<?php

   if(/* alles is binnengekomen via $_POST */)
   {
      if(/* niet alle velden zijn goed ingevuld */)
      {
         // wat we nu dus willen is dat het gehele form terug wordt geechoed. Echter, de 'goede' waardes die zijn ingevuld moeten wel blijven staan!
      }
   }

?>

Ehm, verder kan ik niet echt gaan; kan je mischien een voorbeeld-HTML/PHP/Javascript pagina online zetten en/of de code hier posten?



:thumb:
 
Ik snap het idee, zo werk ik met alles wel, echter de veldjes oppakken, die snap ik echter niet:(

het formulier
HTML: 
<!-- Werkelijke formulier-->

<form name="formulier" method="post" action="" >
<table>



<tr><td width="15%">Naam + voornamen bruidegom:</td><td width="15%"><input type="text" name="bruidegom" id="bruidegom" value="<?php echo $bruidegom; ?>" ></td></tr>
<tr><td width="15%">Naam + voornamen bruid:</td><td><input type="text" name="bruid" id="bruid" value="<?php echo $bruid; ?>" ></td></tr>
<tr><td width="15%">Adres:</td><td><input type="text" name="adres" id="adres" value="<?php echo $adres; ?>" ></td></tr>
<tr><td width="15%">Postcode:</td><td><input type="text" name="postcode" id="postcode" value="<?php echo $postcode; ?>" ></td></tr>
<tr><td width="15%">Woonplaats:</td><td><input type="text" name="woonplaats" id="woonplaats" value="<?php echo $woonplaats; ?>" ></td></tr>
<tr><td width="15%">E-mail:</td><td><input type="text" name="email" id="email" value="<?php echo $email; ?>" ></td></tr>
<tr><td width="15%">Telefoon overdag:</td><td><input type="text" name="telefoon" id="telefoon" value="<?php echo $telefoon; ?>" ></td></tr>
<tr><td  width="15%"> Mee reizende kinderen (voeg kind toe):</td><td><div id="dynamicInput" > <a href="" onClick="addInput('dynamicInput');return false;"><p style="color:red;">Voeg kind toe(+)</p></a></td></tr>
       
     
	 </div>
	 
	 </td></tr>
<tr><td width="15%">Vertrekdatum:</td><td><input name="datumheen" type="text" value="<?php echo $datumheen; ?>" class='date demo_vista'></td></tr>
<tr><td width="15%">Verblijfsduur:</td><td><input name="verblijfsduur" type="text" value="<?php echo $verblijfsduur; ?>" class='date demo_vista' ></td></tr>
<tr><td width="15%">Op welke dag wilt u trouwen:</td><td><input type="text" name="trouwdag" id="trouwdag" value="<?php echo $trouwdag; ?>" class='date demo_vista' ></td></tr>
<tr><td width="15%">Bestemming:</td><td><select name="bestemming" onchange="showAccommodation(this.value)" ><option value="" ><?php echo $landselect; ?></option></select> </td></tr>
<tr><td width="15%">Wilt u nog een andere bestemming bezoeken:</td><td><select name="bestemming2" ><option value=''><?php echo $landselect2; ?></option> </select> </td></tr>
<tr><td width="15%">Wenst u een inzegening?:</td><td><input type="text" name="inzegening" id="inzegening" value="<?php echo $inzegening; ?>" ></td></tr>
<tr><td width="15%">Zo ja, volgens welk gebruik:</td><td><input type="text" name="gebruik" id="gebruik" value="<?php echo $gebruik; ?>" ></td></tr>
<tr><td width="15%">Reizen er familieleden/vrienden mee?:</td><td><input type="text" name="volwassenen" id="volwassenen" value="<?php echo $volwassenen; ?>" ></td></tr>
<tr><td width="15%">Aantal meereizende volwassenen:</td><td><input type="text" name="meermensen" id="meermensen" value="<?php echo $meermensen; ?>" ></td></tr>
<tr><td width="15%">Aantal meereizende kinderen:</td><td><input type="text" name="extrachild" id="extrachild" value="<?php echo $extrachild; ?>" ></td></tr>
<tr><td width="15%">Aantal meereizende babies:</td><td><input type="text" name="extrababy" id="extrababy" value="<?php echo $extrababy; ?>" ></td></tr>
<tr><td width="15%">Heeft u een voorkeur voor een luchtvaartmaatschappij?:</td><td><select name="luchtvaart" value="<?php echo $luchtvaart; ?>"><option value="geen">--Kies--</option><option value="KLM">KLM</option><option value="Martinair">Martinair</option><option value="ArkeFly">ArkeFly</option></select></td></tr>
<tr><td width="15%">Heeft u een voorkeur voor een accommodatie?:</td><td width="15%"><div id="txtHint"></div></td></tr>
<tr><td width="15%">Kamertype:</td><td><div id="kamer"></div></td></tr>
<tr><td width="15%">Welke verzorging wenst u?:</td><td><div id="verzorging1"></div></td></tr>
<tr><td width="15%">Wilt u een auto huren tijdens uw verblijf?:</td><td><select name="autohuur"value="<?php echo $autohuur; ?>"><option value="Nee">Nee</option><option value="Ja">Ja</option></select></td></tr>
<tr><td width="15%">Aanvullende wensen:</td>

<td>
<?php
$sql = "SELECT * FROM wensen ORDER by wens";
$result = mysql_query($sql) or die (mysql_error());

while ($record = mysql_fetch_array($result)) {
echo '<table><tr><td><input type="checkbox" name="aanvullendewens[]" value="'.$record['wens'].'"  '.(in_array($record['wens'], $checks)? ' checked="checked"' : '').'/>', $record['wens'],'</td></tr></table> ' ;
}


?>
</td></tr>

<tr><td width="15%">Eigen wensen:</td><td><textarea name="overigewens" id="overigewens"><?php echo $overig; ?></textarea> </td></tr>
<tr><td width="15%">Budget:</td><td><input type="text" name="budget" id="budget" value="<?php echo $budget; ?>" ></td></tr>
<tr><td width="15%">Opmerkingen/Vragen:</td><td><textarea name="opmerkingen" id="opmerkingen" value="" ><?php echo $opmerkingen; ?></textarea></td></tr>
<td><input type="submit" name="verzenden"  value="Verzenden"></td>
</table>
</form>
<!-- Einde formulier, heironder sluiten we de eerste isset af, we zijn klaar!-->
<?php } ?>

Het javascript
[JS]<script type="text/javascript">
var counter = 0;
var limit = 5;
var veldwaarde ="";





function addInput(divName){




if (counter == limit) {
alert("Meer dan " + counter + " kinderen toevoegen niet mogelijk ");
}
else {
var newdiv = document.createElement('div');

newdiv.innerHTML = "<table><tr><td>Naam kind " + (counter + 1) + "</td><td> <input type='text' name='myInputs[]'/></td></tr>" +"<tr><td>Geboortedatum kind " + (counter+ 1) +"</td><td><br><input type='text' name='myInputs2[]'></td></tr></table>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}

</script>[/JS]

de checks
PHP: 
if( (!empty($error)) or $_SERVER['REQUEST_METHOD'] != "POST" )
{

echo '<body onload="showAccommodation('.$_POST['bestemming'].')">';
echo $_POST['voorkeur'];


      // variabele opvragen en in het formulier zetten via een verkorte if-else, mocht er iets misgaan in het formulier, krijg je alle ingevulde data terug.
   $bruidegom = isset($_POST['bruidegom']) ? $_POST['bruidegom'] : '';
   $bruid = isset($_POST['bruid']) ? $_POST['bruid'] : '';
   $adres = isset($_POST['adres']) ? $_POST['adres'] : '';
   $postcode = isset($_POST['postcode']) ? $_POST['postcode'] : '';
   $woonplaats = isset($_POST['woonplaats']) ? $_POST['woonplaats'] : '';
   $email = isset($_POST['email']) ? $_POST['email'] : '';
   $telefoon = isset($_POST['telefoon']) ? $_POST['telefoon'] : '';
   $volwassenen = isset($_POST['volwassenen']) ? $_POST['volwassenen'] : '';
   $kinderen = isset($_POST['kinderen']) ? $_POST['kinderen'] : '';
   $bestemming = isset($_POST['bestemming']) ? $_POST['bestemming'] : '';
   $datumheen = isset($_POST['datumheen']) ? $_POST['datumheen'] : '';
   $trouwdag = isset($_POST['trouwdag']) ? $_POST['trouwdag'] : '';
   $inzegening = isset($_POST['inzegening']) ? $_POST['inzegening'] : '';
   $gebruik = isset($_POST['gebruik']) ? $_POST['gebruik'] : '';
   $verblijfsduur = isset($_POST['verblijfsduur']) ? $_POST['verblijfsduur'] : '';
   $bestemming2 = isset($_POST['bestemming2']) ? $_POST['bestemming2'] : '';
   $meermensen = isset($_POST['meermensen']) ? $_POST['meermensen'] : '';
   $extraadult = isset($_POST['extraadult']) ? $_POST['extraadult'] : '';
   $extrachild = isset($_POST['extrachild']) ? $_POST['extrachild'] : '';
   $extrababy = isset($_POST['extrababy']) ? $_POST['extrababy'] : '';
   $luchtvaart = isset($_POST['luchtvaart']) ? $_POST['luchtvaart'] : '';
   $voorkeur = isset($_POST['voorkeur']) ? $_POST['voorkeur'] : '';
   $kamertype = isset($_POST['kamertype']) ? $_POST['kamertype'] : '';
   $verzorging = isset($_POST['verzorging']) ? $_POST['verzorging'] : '';
   $autohuur = isset($_POST['autohuur']) ? $_POST['autohuur'] : '';
   $aanvullend = isset($_POST['aanvullendewens']) ? $_POST['aanvullendewens'] : '';
   $overig = isset($_POST['overigewens']) ? $_POST['overigewens'] : '';
   $budget = isset($_POST['budget']) ? $_POST['budget'] : '';
   $opmerkingen = isset($_POST['opmerkingen']) ? $_POST['opmerkingen'] : '';
   $kiddos = isset($_POST['myInputs']) ? $_POST['myInputs'] : '';
   $data = isset($_POST['myInputs2']) ? $_POST['myInputs2'] : '';
   
    $checks = (isset($_POST['aanvullendewens'])? $_POST['aanvullendewens'] : array());


   
   ?>

Dit is de basis, het formulier zelf is nu al zo'n 700 regels groot, die bespaar ik je er zitten nog meer checks in, bijv. met regexp kijken of t n telefoonnummer is etc..
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan