[FRAGE] Wie speicher ich Informationen aus einem Formular in einem JSON string?

choppski · 27. Okt. 2014

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);
 });

miniA4kuser · 27. Okt. 2014

Moin...
Für längere Codepassagen eignet sich besser

Code:

 statt [INLINE], kannst du das bitte in deinem ersten Beitrag ändern?

[INLINE]var formular = $$('form')[0];[/INLINE] 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... ;)

choppski · 27. Okt. 2014

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

miniA4kuser · 27. Okt. 2014

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);
});

choppski · 27. Okt. 2014

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.

miniA4kuser · 27. Okt. 2014

choppski schrieb:
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...

choppski · 27. Okt. 2014

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.

miniA4kuser · 27. Okt. 2014

choppski schrieb:
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

choppski schrieb:
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...

choppski · 27. Okt. 2014

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

miniA4kuser · 27. Okt. 2014

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.

choppski · 27. Okt. 2014

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

miniA4kuser · 27. Okt. 2014

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"}

choppski · 27. Okt. 2014

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^^

miniA4kuser · 27. Okt. 2014

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

choppski · 27. Okt. 2014

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.

miniA4kuser · 27. Okt. 2014

choppski schrieb:
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:

Dann übergibst du aber keinen JSON-String, sondern ein Objekt. Dass passt dann eigentlich nicht zu deiner MooTools-Klasse Request.JSON, denn wie die Beschreibung dort sagt: Wrapped Request with automated receiving of JavaScript Objects in JSON Format.

choppski · 27. Okt. 2014

Ja, gut kriege aber beispielsweise {"forename":"alice","surname":"foo324","phone":"234235","email":"alice@example.com"} zurückgegeben. bzw. wird in meinem contacts ordner so eine datei gespeichert,. und das war so halbwegs das ziel dieser aufgabe, erstmal. mein ausbilder meinte auch das reicht ihm so fürs erste

miniA4kuser · 27. Okt. 2014

Was ist denn das für ein Ausbilder und was bildet dieser denn genau aus?

choppski · 27. Okt. 2014

Ein Ausbilder für Anwendungsentwicklung

und ein sehr netter, junger ausbilder. da ich wie gesagt erst seit ca. 3 wochen mit javascript arbeite, will er mir das für die anfänge noch nicht allzu schwer machen

choppski · 28. Okt. 2014

Achja übrigens

bei interesse, so sieht mein JavaScript mitlerweile aus =)
Ich habe jetzt einen constructer hinzugefügt, wo meine save und post funktion integriert ist. Und es funktioniert,...er speichert die kontakte und gibt sie auch wieder,...also mein problem ist hiermit gelöst, jetzt habe ich eine ganz andere aufgabe

Code:

  1 window.addEvent('load', function() {
  2   var form = $$('form')[0];
  3   form.addEvent('submit', sub);
  4 });
  5 function Contact(filename, data) {
  6         this.initialize = function (filename, data) {
  7                 this.filename = filename;
  8                 this.setFromObject(data);
  9         };
 10         this.get = function (callback) {
 11                 var req = new Request.JSON({
 12                         url: '/contacts/' + this.filename,
 13                         onSuccess: callback
 14                 });     
 15                 req.get();
 16         };
 17         this.save = function (callback) {
 18                 var req = new Request.JSON({
 19                         url: '/contacts/' + this.filename,
 20                         onSuccess: callback
 21                 });     
 22                 req.post({
 23                         forename:this.forename,
 24                         surname:this.surname,
 25                         phone:this.phone,
 26                         email:this.email
 27                  });
 28         };  
 29         this.setFromObject = function (data) {
 30                 this.forename=data.forename;
 31                 this.surname=data.surname;
 32                 this.phone=data.phone;
 33                 this.email=data.email;
 34         };
 35         
 36         this.initialize(filename,data);
 37           
 38 };      
 39 
 40 function sub() {
 41         var hash = Math.round(Math.random()*1000);
 42         var formular = $$('form')[0];
 43         var formObjects = {
 44                 forename: formular.forename.value,
 45                 surname: formular.surname.value,
 46                 phone: formular.phone.value,
 47                 email: formular.email.value,
 48         };      
 49         var contact = new Contact(hash,formObjects);
 50         contact.save(function(asd){
 51                 console.log(asd);
 52         });     
 53 };

[FRAGE] Wie speicher ich Informationen aus einem Formular in einem JSON string?

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

New member