login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Hulp met form

Offline Kite874 - 13/06/2006 08:35 (laatste wijziging 13/06/2006 08:36)
Avatar van Kite874Nieuw lid Hallo ik ben bezig met een simpele pagina voor de website van mijn werk ik kom er niet helemaal uit. Het is de bedoeling dat er een generator gemaakt word. Er moeten 7 invoer velden komen waarbij de ingevoerde invormatie verwerkt word in de code. De invoervelden zijn:
1. Foto van de gebruiker(3 letters van de naam + .jpg extensie)
2. Naam
3. Naamcode (3 letters)
4. Functie
5. Toestel (3 cijfers)
6. E-mail
7. Mobiel nummer

Het is dus de bedoeling dat je de informatie invoert en dat er een pagina gemaakt word.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <title>BK organigram</title>
  4. <link href="organigram-bestanden/org.css" rel="stylesheet" type="text/css">
  5. </head>
  6. <body>
  7. <img src=adv.jpg>
  8. <table border="0" width="300">
  9. <tr>
  10. <td width="0.5" align="left" valign="middle">
  11. Naam:
  12. </td>
  13. <td width="0.5" align="left" valign="middle">
  14. Adriaan Verduijn<br>(De heer ing. A.W. Verduijn)
  15. </td>
  16. </tr>
  17. <tr>
  18. <td width="0.5" align="left" valign="middle">
  19. Naamcode:
  20. </td>
  21. <td width="0.5" align="left" valign="middle">
  22. ADV
  23. </td>
  24. </tr>
  25. <tr>
  26. <td width="0.5" align="left" valign="middle">
  27. Functie:
  28. </td>
  29. <td width="0.5" align="left" valign="middle">
  30. Senior Adviseur
  31. </td>
  32. </tr>
  33. <tr>
  34. <td width="0.5" align="left" valign="middle">
  35. Toestel:
  36. </td>
  37. <td width="0.5" align="left" valign="middle">
  38. 155
  39. </td>
  40. </tr>
  41. <tr>
  42. <td width="0.5" align="left" valign="middle">
  43. E-mail:
  44. </td>
  45. <td width="0.5" align="left" valign="middle">
  46. <a href="mailto:****.****@bkingenieurs.nl">****.****@bkingenieurs.nl</a>
  47. </td>
  48. </tr>
  49. <tr>
  50. <td width="0.5" align="left" valign="middle">
  51. Mobiel:
  52. </td>
  53. <td width="0.5" align="left" valign="middle">
  54. **-**** ****
  55. </td>
  56. </tr>
  57. </table>
  58. </body>
  59. </html>

Dit is de code die uiteindelijk gegenereerd moet worden het gaat alleen maar om een generator

Een voorbeeld van een pagina:
http://www.freewebs.com/blodywarior/

Mischien dat iemand mij opweg kan helpen. Het moet in Javascript php word niet ondersteund door de server:S

12 antwoorden

Gesponsorde links
Offline BramBo - 13/06/2006 10:16
Avatar van BramBo JS gevorderde Hey Kite,

Ten eerste de afbeelding, deze is al aanwezig neem ik aan ? als dit niet het geval is zal het onmogelijk worden de afbeelding weer tegeven aangezien er geen mogelijkheid bestaat om met alleen javascript de afbeelding te ontvangen en verwerken.

Wat betreft de rest Kan je het als volgt maken. Bij het versturen van het formulier word er naar een javascript functie gerefereerd in plaats van een gewone form submit.

Verder kan ik je aanbevelen om met DIVs te werken dit zal de structuur drastisch vereenvoudigen. Bijvoorbeeld :
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id='form'>
  2.  <form>
  3.   <fieldset>Naam : <input name='naam' /></fieldset>
  4.   ......
  5.  </form>
  6. </div>
  7. <div id='profile'>
  8.  <span>Naam: </span> bla...
  9.   ......
  10. </div>


Voor het verwerken van het formulier zou ik in eerste instantie de CSS opmaken van de 2 DIVS. dus `profile` word bij initalisatie verborgen terwijl form weer gegeven word:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div#form {
  2.   display : block;
  3.   visibility : visibile;
  4.  }
  5.  
  6. div#profile {
  7.   display : none;
  8.   visibility : hidden;
  9.  }


Voor het formulier verwerken lijkt het me ten eerste wijs om een validate te gebruiken, hier ga ik geen voorbeeld van geven deze lijken me overal te vinden.

dus : (de link om het formulier te versturen is dus : href='Javascript:Form_Check();'
php code - Bekijk de code zonder highlighting - Klap code in 
  1. function Form_Check() {
  2.   /* Check document.forms[0].element[0] != 'la' etc.. */
  3.   /* na een aantal checks die goed gekeurd zijn : */
  4.  
  5.   Create_Profile;
  6.  }
  7.  
  8.  function Create_Profile() {
  9.  
  10.     var naam       = document.forms[0].elements[0];
  11.     var naamcode = docuement.forms[0].elements[1];
  12.    /* etc.. */
  13.  
  14.    var profile = document.getElementByID('profile').innerHTML;
  15.    profile    +=  "<span>Naam: </span>"+naam+"<br />";
  16.    profile    +=  "<span>code: </span>"+naamcode+"<br />";
  17. /* etc. */
  18.  
  19. /* nu alleen nog weer gaven switchen en naar bestand schrijven */
  20.   document.getElementByID('form').style.visibility = 'hidden';     
  21.   document.getElementByID('form').style.display = 'none';
  22.   document.getElementByID('profile').style.visibility = 'visibile';
  23.   document.getElementByID('profile').style.display = 'block';
  24.  
  25.   Write_File(profile, naamcode);
  26.  }
  27.  
  28. /* jaja... Helaas ActiveX nodig voor deze functionaliteit */
  29.  function Write_File(in, naamcode) 
  30.   {
  31.    var fso = new ActiveXObject("Scripting.FileSystemObject");
  32.    var s = fso.CreateTextFile("X:\\'+naamcode+'.html", true);
  33.  
  34.    s.WriteLine(in);
  35.    s.Close();
  36.   }


Voor het ActiveXobject heb je Internet explorer nodig. Ook is het zo dat sinds SP 2 veel beveiligd is. Dit zal er in resulteren dat je een bericht krijgt dat je 'n onveilig script wil uitvoeren en of IE hiermee door wil gaan (gelukkig maar). Dit zal wel lastig zijn denk ik voor de eindgebruikers, maar helaas is er geen andere manier om met javascript bestanden te schrijven aangezien het clientside is..

Om de bestanden weg te schrijven dienen de gebruikers een netwerkschijf te hebben dus stel je wil alles in \\server\web_troep opslaan dan dienen de gebruikers een netwerk schijf te hebben op zijn minst naar \\server.
Offline Kite874 - 13/06/2006 10:42 (laatste wijziging 13/06/2006 10:45)
Avatar van Kite874 Nieuw lid de afbeelding staat op de server dus als je een code invoert dan moet hij daarnaartoe gelinkt worden. Ik denk ook dat je mij verkeerd begrepen heb want ik moet een soort generator hebben die de broncode aanpast aan de nieuw ingevoerde waarde. Ik bedoel zoals op javascript.com staat
Offline BramBo - 13/06/2006 10:55
Avatar van BramBo JS gevorderde Juist, je wil een formulier in laten vullen en deze dan weergeven ?
De code zoals ik hem gepost heeft zal na het submitten van het formulier het profiel weergeven zowel als een bestand aanmaken met de html code.

Als je de complete bron wil herschrijven gebruik je maar 1 div, dus inplaats van in de profile DIV te schrijven schrijf je alles weg in het de Form div. Echter geef dit qua visualisatie geen verschil...
Offline Kite874 - 13/06/2006 11:01 (laatste wijziging 13/06/2006 11:08)
Avatar van Kite874 Nieuw lid wat eigenlijk mijn idee was om zoiets te maken als hier staat:
http://www.ricocheting.com/js/slide.html

gewoon de data in de invoervelden invoeren op generat klikken en dat de code dan onderaan komt. Dit kopier ik zelf dan in een textfile en sla het op als "pieter post.htm"

Ik ben trouwens bezig met wat je me had uitgelegd maar ik kom er niet helemaal uit.
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <link href="org.css" rel="stylesheet" type="text/css">
  4. <script language="javascript">
  5.  function Form_Check();
  6.  {
  7.   /* Check document.forms[0].element[0] != 'la' etc.. */
  8.   /* na een aantal checks die goed gekeurd zijn : */
  9.  
  10.   Create_Profile;
  11.  }
  12.  
  13.  function Create_Profile() {
  14.  
  15.     var naam       = document.forms[0].elements[0];
  16.  
  17.    var profile = document.getElementByID('profile').innerHTML;
  18.    profile    +=  "<span>Naam: </span>"+naam+"<br />";
  19.  
  20.   document.getElementByID('form').style.visibility = 'hidden';     
  21.   document.getElementByID('form').style.display = 'none';
  22.   document.getElementByID('profile').style.visibility = 'visibile';
  23.   document.getElementByID('profile').style.display = 'block';
  24.  
  25.   Write_File(profile, naam);
  26.  }
  27.  
  28.  function Write_File(in, naam) 
  29.   {
  30.    var fso = new ActiveXObject("Scripting.FileSystemObject");
  31.    var s = fso.CreateTextFile("X:'+naam+'.html", true);
  32.  
  33.    s.WriteLine(in);
  34.    s.Close();
  35.   }
  36. </script>
  37. </head>
  38. <body>
  39. <div id='form'>
  40.  <form>
  41.   <fieldset>Naam : <input name='naam' /></fieldset>
  42.  </form>
  43. </div>
  44. <div id='profile'>
  45.  <span>Naam: </span>
  46. </div>
  47. <a href='Javascript:Form_Check();'>klik hier</a>
  48. </body>
  49. </html>

mschien dat jij ziet wat ik fout doe?
denk dat het ook handig is om even voor 1 veld te beginnen en het later uit te breiden. voor mij wat makkelijker mijn kennis van html en javascript is nog niet al te best
Offline BramBo - 13/06/2006 11:24 (laatste wijziging 13/06/2006 11:27)
Avatar van BramBo JS gevorderde Om alles in een textarea te parsen maak je even een textarea aan met een ID dus bijvoorbeeld id='txt'
Verder dien je de functies dan gedeeltelijk aan te passen naar :
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type='text/javascript'>
  2.  
  3.  function Form_Check()
  4.  {
  5.   Create_Profile();
  6.  }
  7.  
  8.  function Create_Profile() {
  9.  
  10.    var naam    	 = document.forms[0].elements[1].value;
  11.    var txt 	 = document.getElementById('txt');
  12.    txt.value	 = "<html><head><title>"+naam+"</title></head><body>";
  13.    txt.value   	+=  "<span>Naam: </span>"+naam+"<br />";
  14.  
  15.  }
  16. </script>
Offline Kite874 - 13/06/2006 11:53
Avatar van Kite874 Nieuw lid thnx je bent mijn held tot nu toe werkt het maar hoe zet je nou een tweede input erbij:$
Offline BramBo - 13/06/2006 12:06
Avatar van BramBo JS gevorderde haha, graag gedaan hoor.

Om een input element er aan toe tevoegen is relatief simpel, gewoon
php code - Bekijk de code zonder highlighting - Klap code in 
  1. var naamcode       = document.forms[0].elements[2].value;

toevoegen (let wel dat dit het tweede element moet zijn binnen het form. geindiceerd door elements[2]).
Dit kent dus de waarde van het tweede element in het formulier toe aan de variabele naamcode.

daarnaast voeg je je hem toe aan de textarea. dus
php code - Bekijk de code zonder highlighting - Klap code in 
  1. txt.value     +=  "<span>Naamcode: </span>"+naamcode+"<br />";


txt refereert naar de textarea, deze is aangesproken doormiddel van de opgegeven id(getElementById) en .value is dus de huidige string die in de textarea zit.
Offline Kite874 - 13/06/2006 13:36 (laatste wijziging 13/06/2006 13:36)
Avatar van Kite874 Nieuw lid Bedankt voor je hulp, alleen wat je zei met elements kreeg ik niet werkend ik heb het opgelost door voor elke input een nieuwe form te maken en dan document.forms[0] telkens met 1 op te hogen.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <link href="org.css" rel="stylesheet" type="text/css">
  4. <script type='text/javascript'>
  5.  
  6.  function Form_Check()
  7.  {
  8.   Create_Profile();
  9.  }
  10.  
  11.  function Create_Profile() {
  12.  
  13.    var foto       = document.forms[0].elements[1].value;
  14.    var txt    = document.getElementById('txt');
  15.    txt.value   = ""+foto+"";
  16.    var naam       = document.forms[1].elements[1].value;
  17.    txt.value     +=  ""+naam+"";
  18.    var naamcode       = document.forms[2].elements[1].value;
  19.    txt.value     +=  ""+naamcode+"";
  20.    var functie       = document.forms[3].elements[1].value;
  21.    txt.value     +=  ""+functie+"";
  22.    var toestel       = document.forms[4].elements[1].value;
  23.    txt.value     +=  ""+toestel+"";
  24.    var email       = document.forms[5].elements[1].value;
  25.    txt.value     +=  ""+email+"";
  26.    var mobiel       = document.forms[6].elements[1].value;
  27.    txt.value     +=  ""+mobiel+"";
  28.  }
  29.  
  30. </script>
  31. </head>
  32. <body>
  33. <div id='foto' style='width:420;'>
  34.  <form>
  35.   <fieldset>Foto: <input name='foto' /></fieldset>
  36.  </form>
  37.  <form>
  38.   <fieldset>naam: <input name='naam' /></fieldset>
  39.  </form>
  40.  <form>
  41.   <fieldset>naamcode:<input name='naamcode' /></fieldset>
  42.  </form>
  43.  <form>
  44.   <fieldset>Functie: <input name='functie' /></fieldset>
  45.  </form>
  46.  <form>
  47.   <fieldset>Toestel: <input name='toestel' /></fieldset>
  48.  </form>
  49.  <form>
  50.   <fieldset>E-mail: <input name='email' /></fieldset>
  51.  </form>
  52.  <form>
  53.   <fieldset>Mobiel: <input name='mobiel' /></fieldset>
  54.  </form>
  55. <textarea id='txt' rows='10' cols='50'></textarea>
  56. </div>
  57. <a href='Javascript:Form_Check();'>klik hier</a>
  58. </body>
  59. </html>

dit is de uiteindelijke code geworden
Offline BramBo - 13/06/2006 14:22
Avatar van BramBo JS gevorderde Doe het dan opdeze manier, onder 't mom van netheid.
php code - Bekijk de code zonder highlighting - Klap code in 
  1. var naamcode       = document.forms[0].naamcode.value;
  2. var functie       = document.forms[0].functie.value;
Offline Kite874 - 13/06/2006 14:26
Avatar van Kite874 Nieuw lid ok .elements ertussenuithalen

dan nog 1 vraagje, er zijn ook mensen die geen mobiel hebben maar dan komt er toch een appart dingetje voor mobiel. Had je meschien nog een tip voor mij?
Offline BramBo - 13/06/2006 14:52
Avatar van BramBo JS gevorderde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. if(mobiel != '') txt.value     +=  ""+mobiel+"";


^^
Offline Kite874 - 13/06/2006 15:38 (laatste wijziging 13/06/2006 16:30)
Avatar van Kite874 Nieuw lid hoe bedoelt men simpel:p

edit:
hij is dan eindelijk klaar hierbij eff de uiteindelijke code 

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <link href="org.css" rel="stylesheet" type="text/css">
  4. <script type='text/javascript'>
  5.  
  6.  function Form_Check()
  7.  {
  8.   Create_Profile();
  9.  }
  10.  
  11.  function Create_Profile() {
  12.  
  13.    var foto       = document.forms[0].foto.value;
  14.    var txt    = document.getElementById('txt');
  15.    txt.value   = "<html><head><title>BK organigram</title><link href=\"organigram-bestanden/org.css\" rel=\"stylesheet\" type=\"text/css\"></head><body>";
  16. if(foto != '')   txt.value     +=  "<img src=http://nt-server/profithrm/"+foto+".jpg>";
  17.    txt.value   += "<table border=\"0\" width=\"300\">";
  18.    var naam       = document.forms[1].naam.value;
  19. if(naam != '')   txt.value     +=  "<tr><td width=\"0.5\" align=\"left\" valign=\"middle\">Naam:</td><td width=\"0.5\" align=\"left\" valign=\"middle\">"+naam+"</td></tr>";
  20.    var naamcode       = document.forms[2].naamcode.value;
  21. if(naamcode != '')   txt.value     +=  "<tr><td width=\"0.5\" align=\"left\" valign=\"middle\">Naamcode:</td><td width=\"0.5\" align=\"left\" valign=\"middle\">"+naamcode+"</td></tr>";
  22.    var functie       = document.forms[3].functie.value;
  23. if(functie != '')   txt.value     +=  "<tr><td width=\"0.5\" align=\"left\" valign=\"middle\">Functie:</td><td width=\"0.5\" align=\"left\" valign=\"middle\">"+functie+"</td></tr>";
  24.    var toestel       = document.forms[4].toestel.value;
  25. if(toestel != '')   txt.value     +=  "<tr><td width=\"0.5\" align=\"left\" valign=\"middle\">Toestel:</td><td width=\"0.5\" align=\"left\" valign=\"middle\">"+toestel+"</td></tr>";
  26.    var email       = document.forms[5].email.value;
  27. if(email != '')   txt.value     +=  "<tr><td width=\"0.5\" align=\"left\" valign=\"middle\">E-mail:</td><td width=\"0.5\" align=\"left\" valign=\"middle\"><a href=\"mailto:"+email+"\">"+email+"</a></td></tr>";
  28.    var mobiel       = document.forms[6].mobiel.value;
  29. if(mobiel != '')   txt.value     +=  "<tr><td width=\"0.5\" align=\"left\" valign=\"middle\">Mobiel:</td><td width=\"0.5\" align=\"left\" valign=\"middle\">"+mobiel+"</td></tr>";
  30.    txt.value   += "</table><FORM><INPUT type=\"button\" value=\"Klik hier om terug te gaan\" onClick=\"history.back()\"></FORM></body></html>";
  31.  }
  32.  
  33. </script>
  34. </head>
  35. <body>
  36. <center><div id='foto' style='width:420;'>
  37.  <form>
  38.   <fieldset>Foto: <input name='foto' /></fieldset>
  39.  </form>
  40.  <form>
  41.   <fieldset>naam: <input name='naam' /></fieldset>
  42.  </form>
  43.  <form>
  44.   <fieldset>naamcode:<input name='naamcode' /></fieldset>
  45.  </form>
  46.  <form>
  47.   <fieldset>Functie: <input name='functie' /></fieldset>
  48.  </form>
  49.  <form>
  50.   <fieldset>Toestel: <input name='toestel' /></fieldset>
  51.  </form>
  52.  <form>
  53.   <fieldset>E-mail: <input name='email' /></fieldset>
  54.  </form>
  55.  <form>
  56.   <fieldset>Mobiel: <input name='mobiel' /></fieldset>
  57.  </form>
  58. <a href='Javascript:Form_Check();'>klik hier</a><p>
  59. <textarea id='txt' rows='10' cols='50'></textarea>
  60. </div>
  61. </center>
  62. </body>
  63. </html>

en nogmaals hartstikke bedankt voor je hulp
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.307s