Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 20
  1. #1
    choppski ist offline Jungspund
    registriert
    22-10-2014
    Ort
    Lübeck
    Beiträge
    16

    Wie speicher ich Informationen aus einem Formular in einem JSON string?

    Hey leute, ich habe eine HTML seite mit einem Formular. Ich verwende JavaScript und Mootools. habe einen Server auf dem ich die JSON files speichern kann und soll über HTML form post die Informationen aus dem Formular im Json string speichern
    Code:
    <form method="post" >
      
                                      <p>
                                      <h3>    Dateneingabe</h3>
                                      </p>
                                      <p>Forename:</p>
                                      <P>
                                              <label for "Forename"></label>
                                              <input id="forename" type="text" name="forename" >
                                      </P>
      
                                      <p>Surname:</p>
                                      <p>
                                              <label for "Surname"></label>
                                              <input id="surname" type="text" name="surname" >
                                      </p>
                                      <p>Phone:</p>
                                     </p>
                                             <label for "Phone"></label>
                                              <input id="phone" type="tel" name="phone">
                                      </p>
                                    <p>Email:</p>
                                    <p>
                                          <label for "email"></label>
                                            <input id="email" type="email" name="email">
                                    </p>
                                   <p>
                                               <input type="hidden" name="filename" id="filename">
                                      <p>
                                            <input type="submit" value="Submit" id='submit' onclick="sub();"/>
                                              <input type="reset" value="Reset" id='reset'>                                               </p>
    da soll ich auf einer seite informationen eingeben, die dann im JSON string gespeichert werden sollen.
    mein javascript sieht bis jetzt so aus. mein problem ist, dass ich die sachen holen kann, aber er die informationen wie im formular eingetragen nicht speichert. mir wurde gesagt ich müsse da erstmal ein onload event einfügen, da ich zur zeit einen fehler zurück kriege : formular is undefined
    es soll wohl daran liegen, dass mein javascript als erstes lädt, also wie kann ich das verhindern? =)
    danke schonmal

    Code:
    var get = function(filename, callback) {
             var req = new Request.JSON({
                     url: '/contacts/' + filename,
                     onSuccess: callback
             });
             req.get();
     };
     
     var save = function(filename,contact,callback) {
             var req = new Request.JSON({
                     url: '/contacts/' + filename,
                     onSuccess: callback
             });
             console.log('---', contact);
             req.post(contact);
     };
     
     var hash = Math.random();
             
     var formular = $$('form')[0];
     console.log(formular);
     
     save(hash*100,{forename:formular.forename.value ,surname:formular.surname.value,phone:formular.phone.value,email:form    ular.email.value },function(contact){          console.log(contact); 26 });     
     
     get('bob',function(contact){
             console.log(contact);
     });
    Geändert von choppski (27-10-2014 um 11:27 Uhr)

  2. #2
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Wie speicher ich Informationen aus einem Formular in einem JSON string?

    Moin...
    Für längere Codepassagen eignet sich besser [CODE] statt [INLINE], kannst du das bitte in deinem ersten Beitrag ändern?

    var formular = $$('form')[0]; sieht stark nach einem JavaScript-Framework aus. Wenn du solch eines verwendest, dann gib auch bitte an, welches dies ist. Wir haben hier zwar ein paar Kristallkugeln, aber die müssten erst mal wieder gereinigt werden...
    Hoffe ich konnte helfen

  3. #3
    choppski ist offline Jungspund
    registriert
    22-10-2014
    Ort
    Lübeck
    Beiträge
    16

    AW: Wie speicher ich Informationen aus einem Formular in einem JSON string?

    OKay habe ich geändert naja wie gesagt, weiß nur nicht, wie ich das genau machen soll, wie gesagt, ich soll die informationen aus dem formular im JSON string speichern. Weiß nur absolut nicht wie,....bin auch schon seit tagen am verzweifeln, bzw, was heißt verzweifeln, bin nur seit tagen schon dabei. Bin quasi blutige anfängerin, gerade erst meine Ausbildung angefangen

  4. #4
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Wie speicher ich Informationen aus einem Formular in einem JSON string?

    Okay MooTools also....

    Dein Formular hasste ja schon var formular = $$('form')[0];

    Nun konvertierst du dein Formular in ein Objekt (Feldname: Inhalt) var formObjects=formular.toQueryString().parseQueryString();

    Und dieses konvertierst du dann in einen JSON-String var formularJson=JSON.encode(formObjects);

    Und ab gehts zu deiner Funktion...
    Code:
    save(hash*100, formularJson, function (contact) {
        console.log(contact);
    });
    Hoffe ich konnte helfen

  5. #5
    choppski ist offline Jungspund
    registriert
    22-10-2014
    Ort
    Lübeck
    Beiträge
    16

    AW: Wie speicher ich Informationen aus einem Formular in einem JSON string?

    Da steht immer noch formular is undefined. Habe das versucht wie du meintest, funktioniert auch nicht, habe generell schon sehr viele Möglichkeiten getestet. und Naja, mein ausbilder meinte zu mir, dass es daran liegt, dass mein Javascript vorher geladen wird, und ich nicht auf mein formular zugreifen kann, deswegen soll ich wohl ein onload event hinzufügen, habe das allerdings auch schon getestet und das funktioniert auch nicht, oder ich habe es falsch gemacht. keine ahnung.

  6. #6
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Wie speicher ich Informationen aus einem Formular in einem JSON string?

    Zitat Zitat von choppski Beitrag anzeigen
    deswegen soll ich wohl ein onload event hinzufügen, habe das allerdings auch schon getestet und das funktioniert auch nicht, oder ich habe es falsch gemacht.
    In deinem Beispiel steht aber nichts von irgendeinem onload, daher wird dir hier auch niemand sagen können ob und was du evtl. falsch gemacht hast.
    Aber MooTools bringt doch schon etwas für diesen Zweck mit: MooTools...Window Event: domready
    Das sieht dann so aus:
    Code:
    window.addEvent('domready', function () {
        alert('The DOM is ready!');
    });
    Statt dem alert('The DOM is ready!'); muss dann natürlich dein Ablauf für das Formular hinein...
    Hoffe ich konnte helfen

  7. #7
    choppski ist offline Jungspund
    registriert
    22-10-2014
    Ort
    Lübeck
    Beiträge
    16

    AW: Wie speicher ich Informationen aus einem Formular in einem JSON string?

    hatte im text geschrieben. dass ich ein onload event einfügen soll, bzw. die ausbilder das zu mir meinten, aber ich teste jetzt erstmal addEvent.

  8. #8
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Wie speicher ich Informationen aus einem Formular in einem JSON string?

    Zitat Zitat von choppski Beitrag anzeigen
    hatte im text geschrieben. dass ich ein onload event einfügen soll, bzw. die ausbilder das zu mir meinten, aber ich teste jetzt erstmal addEvent.
    Dann solltest du das auch so schreiben und nicht
    Zitat Zitat von choppski Beitrag anzeigen
    habe das allerdings auch schon getestet und das funktioniert auch nicht, oder ich habe es falsch gemacht. keine ahnung.
    Das liest sich nämlich anders.

    Viel Erfolg beim Testen mit addEvent, aber bei weiteren Fragen bitte mit aktuellem Code fragen...
    Hoffe ich konnte helfen

  9. #9
    choppski ist offline Jungspund
    registriert
    22-10-2014
    Ort
    Lübeck
    Beiträge
    16

    AW: Wie speicher ich Informationen aus einem Formular in einem JSON string?

    Ja ist okay, komme auch wirklich absolut nicht weiter.
    Wie schon beschrieben, ich soll die daten aus dem Formular in einem JSON string speichern können, benutze dazu HTML, Javascript und Mootools, achja und später auch abrufen und ändern können, was allerdings jetzt noch nicht so wichtig ist. Nun hat erstmal die Speicherung oberste Priorität. MEin Ausbilder hatte zu mir gesagt, dass , da mein formular undefined ist, ich erstmal ein onload event brauche, damit mein index html und form geladen ist, bevor ich das form anhand der id abrufe. Ich weiß nur absolut nicht wie ich das machen soll, bzw. verhindere dass formular undefinded ist. Wie kann ich das denn verhindern? bzw. wie stelle ich das an dass meine kontakte mit den eigenen kontaktdaten gespeichert werden. danke schonmal

    Also mein HTML code sieht so aus:
    Code:
      1 <!DOCTYPE html>
      2 <html>
      3         <head>
      4                 <title>Aufgabe Fizon</title>
      5                 <link href="style.css" type="text/css" rel="stylesheet">
      6                 <script type="text/javascript" src="mootools-core-1.5.1.js"></script>
      7                 <script type="text/javascript" src="script.js"></script>
      8                 
      9         </head>
     10         <body>  <div id="divi">
     11                 <div id="div0">
     12                         <h1>Eine kleine Datenbank</h1>
     13                 </div>
     14 
     15 
     16                 <div id="div1">
     17                 <form  name="formular" method="post" >
     18 
     19                                 <p>
     20                                 <h3>    Dateneingabe</h3>
     21                                 </p>
     22                                 <p>Forename:</p>
     23                                 <P>
     24                                         <label for "Forename"></label>
     25                                         <input id="forename" type="text" name="forename" >
     26                                 </P>
     27 
     28                                 <p>Surname:</p>
     29                                 <p>
     30                                         <label for "Surname"></label>
     31                                         <input id="surname" type="text" name="surname" >
     32                                 </p>
     33                                 <p>Phone:</p>
     34                                 </p>
     35                                         <label for "Phone"></label>
     36                                         <input id="phone" type="tel" name="phone">
     37                                 </p>
     38                                 <p>Email:</p>
     39                                 <p>
     40                                         <label for "email"></label>
     41                                         <input id="email" type="email" name="email">
     42                                 </p>
     43                                 <p>
     44                                          <input type="hidden" name="filename" id="filename">
     45                                 <p>
     46                                         <input type="submit" value="Submit" id='submit' onclick="sub();"/>
     47                                         <input type="reset" value="Reset" id='reset'>                                           </p>
     48 
     49 
     50 
     51                 </form>
     52                         </div>
     53                         <div id="div2">
     54 
     55 
     56                         <ul id="list" name:"list" >
     57                         
     58 
     59                                 </ul>
     60                         </div>
     61                 </div>
     62         </body>
     63 </html>
    und mein Javascript so:

    Code:
      1  var get = function(filename, callback) {
      2         var req = new Request.JSON({
      3                 url: '/contacts/' + filename,
      4                 onSuccess: callback 
      5         });     
      6         req.get();
      7 };      
      8 
      9 var save = function(filename,contact,callback) {
     10         var req = new Request.JSON({
     11                 url: '/contacts/' + filename,
     12                 onSuccess: callback 
     13         });     
     14         console.log('---', contact);
     15         req.post(contact); 
     16 };      
     17 var hash = Math.random();
     18    var formular = $$('form')[0];
     19 window.addEvent('form', function(){
     20         onload='form' 
     21 }); 
     22  
     23 save(hash*100,{forename:formular.forename.value, surname:formular.surname.value,  phone:formular.phone.value, email:formular.email.value },function(contact){
     24         console.log(contact); 
     25 }); 
     26  
     27 get('bob',function(contact){
     28         console.log(contact);
     29 });
     30

  10. #10
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Wie speicher ich Informationen aus einem Formular in einem JSON string?

    Also fangen wir mal an:

    Mit <input type="submit" value="Submit" id='submit' onclick="sub();"/> soll bei einen Klick auf den Submitbutton die Funktion sub() aufgerufen werden. Diese ist aber nirgendwo definiert.

    Damit dein Formular jedoch nicht bei einen Klick auf den Submitbutton abgeschickt wird, und somit die Seite neu geladen wird, musst du dies verhindern onsubmit="return false;". Da das Formular ja nicht normal desendet werden soll benötigst du auch kein method="post" und da das Formular nicht über dessen Namen angesprochen wird benötigst du auch kein name="formular":
    <form name="formular" method="post" onsubmit="return false;" >

    Dann würde ich, statt eine Variable get zu definieren und dieser dann eine Funktion zuzuweisen, gleich eine Funktion mit dem Namen get definieren:
    Code:
    function get(filename, callback) {
        var req = new Request.JSON({
            url: '/contacts/' + filename,
            onSuccess: callback
        });
        req.get();
    };
    Das gleiche gilt auch für save:
    Code:
    function save(filename, contact, callback) {
        var req = new Request.JSON({
            url: '/contacts/' + filename,
            onSuccess: callback
        });
        console.log('save', contact);
        req.post(contact);
    };
    Hierzu ist zu sagen, das url: '/contacts/' + filename nicht funktionieren kann, das die Variable filename einen unbekannten Dateinamen enthalten wird, da dieser von der Variable hash übergeben wird, welche wiederum aus einer Zufallszahl generiert wird.


    Dann muss noch die fehlende funktion sub() definiert werden. Diese wird dann aufgerufen, wenn der Submitbutton geklickt wird, also nachdem die Seite (das schließt dein Formular mit ein) geladen wurde und der Benutzer eine Aktion getätigt hat. Also nichts automatisch von selbst:
    Code:
    function sub() {
        var hash = Math.random() * 100;
        var formular = $$('form')[0];
        var formObjects = formular.toQueryString().parseQueryString();
        var formularJson = JSON.encode(formObjects);
    
        save(hash, formularJson, function (contact) {
            console.log(contact);
        });
    }
    Zu beachten ist jedoch, das du die String-Klasse aus MooTools-More benötigst, wenn du die Funktion (String-Methode) .parseQueryString() verwenden möchtest.
    Wenn du MooTools-More nicht verwenden kannst/willst/darfst, so musst du deinen JSON-String halt selbst zusammenbauen. Du musst aber darauf achten, dass dieser auch valide gegenüber dem JSON-Format sein muss. Heißt die "Schlüssel" und die dazugehörigen "Werte" müssen in Anführungszeichen " stehen um als String (Zeichenkette) markiert zu sein!
    Das wäre so möglich:
    Code:
    function sub() {
    	var hash = Math.random() * 100;
    	var formular = $$('form')[0];
    	var formObjects = {
    		forename: formular.forename.value,
    		surname: formular.surname.value,
    		phone: formular.phone.value,
    		email: formular.email.value,
    		filename: formular.filename.value
    	};
    	var formularJson = JSON.encode(formObjects);
    
    	save(hash, formularJson, function (contact) {
    		console.log(contact);
    	});
    }

    PS: Die Funktion
    Code:
    get('bob',function(contact){
        console.log(contact);
    });
    würde ich jetzt erst einmal außen vor lassen und nur den Teil was das Speichern angeht fertigstellen.
    Hoffe ich konnte helfen

  11. #11
    choppski ist offline Jungspund
    registriert
    22-10-2014
    Ort
    Lübeck
    Beiträge
    16

    AW: Wie speicher ich Informationen aus einem Formular in einem JSON string?

    vielen dank dir auf jedenfall schonmal, kriege nur leider immer noch keine werte
    bekomme stattdessen {"forename":"","surname":"","phone":"","email":""} zurück. ich probiere einfach weiter rum. danke dir schonmal, ich hoffe ich komme auf eine lösung

  12. #12
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Wie speicher ich Informationen aus einem Formular in einem JSON string?

    Das ist ja auch richtig so, wenn das Formular leer ist. Wenn es ausgefüllt ist, dann sollte das wie folgt aussehen:
    {"forename":"Max","surname":"Mustermann","phone":"+490123456789","email":"max.mustermann@example.com "}
    Hoffe ich konnte helfen

  13. #13
    choppski ist offline Jungspund
    registriert
    22-10-2014
    Ort
    Lübeck
    Beiträge
    16

    AW: Wie speicher ich Informationen aus einem Formular in einem JSON string?

    ja das ist ja auch schon klar, hatte das form aber ausgefüllt, nur übergibt er die daten leider noch nicht und ich weiß leider nicht wie ich das anstellen soll
    , dazu ist aber auch zu sagen, dass ich erst seit ca. 2 -3 wochen mit javascript arbeite, sprich auch noch wirklich keine ahnung habe. muss mir das halt fast komplett selbst erarbeiten und ist schwieriger als ich gedacht habe.
    hmm, mein ziel ist es ja, die daten, die ich eingebe, wie z.b forename dass da denn auch forename in der JSON file steht und der wert übergeben wurde. das mit der leeren JSON file habe ich schon vor 3 wochen gehabt^^

  14. #14
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Wie speicher ich Informationen aus einem Formular in einem JSON string?

    Okay... und wie sieht denn jetzt dein JavaScript (die Datei script.js) nach meinen Anregungen aus Beitrag #10 aus?
    Hoffe ich konnte helfen

  15. #15
    choppski ist offline Jungspund
    registriert
    22-10-2014
    Ort
    Lübeck
    Beiträge
    16

    AW: Wie speicher ich Informationen aus einem Formular in einem JSON string?

    Ich habe jetzt eine lösung, er speichert mir die kontakte
    habe an und für sich meine funktionen nur verändert, und dein JSON encode rausgenommen, weil ich das in dem fall nicht gebrauchen kann:
    mein Javascript sieht so aus:

    Code:
      1 window.addEvent('load', function() {
      2   var form = $$('form')[0];
      3   form.addEvent('submit', sub);
      4 }); 
      5         
      6 function get(filename, callback) {
      7     var req = new Request.JSON({ 
      8         url: '/contacts/' + filename,
      9         onSuccess: callback 
     10     }); 
     11     req.get();
     12 };  
     13 
     14 function save(filename, contact, callback) {
     15     var req = new Request.JSON({ 
     16         url: '/contacts/' + filename,
     17         onSuccess: callback 
     18     }); 
     19     console.log('save', contact);
     20     req.post(contact);
     21 };  
     22 
     23 function sub() {
     24         var hash = Math.round() * 1000;
     25         var formular = $$('form')[0];
     26         var formObjects = {
     27                 forename: formular.forename.value,
     28                 surname: formular.surname.value,
     29                 phone: formular.phone.value,
     30                 email: formular.email.value,
     31         };      
     32         save(hash, formObjects, function (contact) {
     33                 console.log(contact);
     34         });     
     35 };
    - - - Aktualisiert - - -

    und wie gesagt, nun funktioniert das auch, danke für deine Anregungen und auch hilfe =)
    als nächstes wird der filename in angriff genommen und dann wird mein script weiter bearbeitet,...achja., habe oben das add event hinzugefügt, da ich in meinem html keine javascript befehle haben darf, deswegen ist oben nun window.addevent. wie gesagt vielen vielen dank, der rest sollte nicht mehr so schwer sein, werde aber eine weitere frage posten, wenn ich nochmal probleme haben sollte.

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. Variable einem String anhängen
    Von tabstop im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 11-12-2006, 16:52
  2. Einem Formular in einem anderen Frame einen Wert zuweisen
    Von malabarista im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 16-08-2006, 16:31
  3. Informationen auf einem Bild mit Java anzeigen?
    Von ahliman im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 19-02-2006, 22:17
  4. Führende Blanks in einem string
    Von geotos im Forum JavaScript
    Antworten: 10
    Letzter Beitrag: 10-01-2005, 20:40
  5. Zeichen zaehlen in einem String
    Von julia023 im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 19-02-2001, 08:51

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •