Hallo Freunde,
ich hänge hier schon etwas länger in meinem Javascript fest.
Zuallererst einmal meine mittel die ich nutze:
-Javascript,Mootools (aber nur core),JSON,Go,HTML,CSS
Ich habe eine HTML Seite erstellt, die ein Formular beinhaltet. In dieses Formular soll der forename, surname, phone und email eingetragen werden. wenn ich auf meinen submit butten klicke, dann speichert er diesen kontakt auch in eine separate json file, die hier auf meinem rechner generiert wird. dann habe ich bezüglich der kontakte auch der rechten seite in meinem fenster eine liste in der alle kontakte stehen. diese ist anklickbar und wenn ich einen kontakt anklicke, dann schreibt er die informationen zu dem zugehörigen kontakt ins formular, sodass sie veränderbar sind. und da beginnt mein problem: ich kann die kontakte zwar in mein formular zurückgeben, kann diese aber nicht verändern. bei veränderung speichert er entweder einfach gleich einen neuen kontakt, oder gibt dem kontakt einen ganz merkwürdigen filename. Allerdings möchte ich erreichen, dass wenn ich auf meinen submit button klicke und einen kontakt im formular geladen habe, dass dieser kontakt unter demselben filename gespeichert wird, und nur die veränderungen übernommen werden ohne, dass ein neuer kontakt erstellt wird. und zum anderen möchte ich wenn ich auf den reset button drücke, dass dann sobald das formular leer ist ein neuer kontakt erstellt werden kann, mit einem neu generierten filename..
mein HTML code
Ich hoffe ihr könnt damit was anfangen und mir schnell weiterhelfen, bei fragen zu meinem script, stellt sie ruhig, ich beantworte sie dann gerne
ich hänge hier schon etwas länger in meinem Javascript fest.
Zuallererst einmal meine mittel die ich nutze:
-Javascript,Mootools (aber nur core),JSON,Go,HTML,CSS
Ich habe eine HTML Seite erstellt, die ein Formular beinhaltet. In dieses Formular soll der forename, surname, phone und email eingetragen werden. wenn ich auf meinen submit butten klicke, dann speichert er diesen kontakt auch in eine separate json file, die hier auf meinem rechner generiert wird. dann habe ich bezüglich der kontakte auch der rechten seite in meinem fenster eine liste in der alle kontakte stehen. diese ist anklickbar und wenn ich einen kontakt anklicke, dann schreibt er die informationen zu dem zugehörigen kontakt ins formular, sodass sie veränderbar sind. und da beginnt mein problem: ich kann die kontakte zwar in mein formular zurückgeben, kann diese aber nicht verändern. bei veränderung speichert er entweder einfach gleich einen neuen kontakt, oder gibt dem kontakt einen ganz merkwürdigen filename. Allerdings möchte ich erreichen, dass wenn ich auf meinen submit button klicke und einen kontakt im formular geladen habe, dass dieser kontakt unter demselben filename gespeichert wird, und nur die veränderungen übernommen werden ohne, dass ein neuer kontakt erstellt wird. und zum anderen möchte ich wenn ich auf den reset button drücke, dass dann sobald das formular leer ist ein neuer kontakt erstellt werden kann, mit einem neu generierten filename..
mein HTML code
HTML:
<!-- -->
<!DOCTYPE html>
<html>
<head>
<title>Aufgabe Fizon</title>
<!--eingeschlossene CSS und JS files inclusive mootools -->
<link href="style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="mootools-core-1.5.1.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body >
<div id="divi">
<div id="div0">
<h1>
Eine kleine Datenbank
</h1>
</div>
<div id="div1">
<form name="formular" method="post" onsubmit="return false;" >
<p>
<h3>
Kontakterstellung
</h3>
<h5>
Geben Sie hier bitte die Kontakdaten ein!
</h5>
</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'/>
<input type="reset" value="Reset" id='reset'>
</p>
</form>
</div>
<div id="div2">
<h3>
Vorhandene Kontakte
</h3>
<ul id="list" >
</ul>
</div>
</div>
</body>
</html>
Code:
window.addEvent('load', function() {
var form = $$('form')[0];
var ul = $('list');
new Interface(ul,form);
});
function Contact(filename, data) {
this.initialize = function () {
this.filename = filename;
this.setFromObject(data);
};
this.get = function (callback) {
var req = new Request.JSON({
url: '/contacts/' + this.filename,
onSuccess: callback
});
req.get();
};
this.save = function (callback) {
if(!this.filename){
(Math.round(Math.random()*10000) + " " + contact.forename)
};
var req = new Request.JSON({
url: '/contacts/' + this.filename,
onSuccess: callback
});
req.post({
forename:this.forename,
surname:this.surname,
phone:this.phone,
email:this.email
});
};
this.setFromObject = function (data) {
this.forename=data.forename;
this.surname=data.surname;
this.phone=data.phone;
this.email=data.email;
};
this.initialize();
};
Contact.getContacts = function (callback) {
var request = new Request.JSON({
url:'/contacts/',
method: 'get',
onSuccess: function(contacts){
var myArray = [];
Object.each(contacts, function(formObjects, filename){
var contact = new Contact(filename, formObjects);
myArray.push(contact);
});
callback(myArray);
}
});
request.get();
};
function Interface(ul,form){
this.initialize = function (){
this.ul = ul;
this.form = form;
this.updateList();
form.addEvent('submit',this.onSubmit);
};
this.updateList = function (){
var myBound = this.updateListWithContacts.bind(this);
Contact.getContacts(myBound);
};
this.updateListWithContacts = function (contacts) {
Array.each(contacts, (function(contact) {
var li = new Element('li',{
html: (contact.forename+' '+contact.surname),
events: {
click: function(){
this.setFromContact(contact);
}.bind(this)
}
});
this.ul.grab(li);
}.bind(this)));
};
this.setFromContact = function (contact){
this.form.forename.value = contact.forename;
this.form.surname.value = contact.surname;
this.form.phone.value = contact.phone;
this.form.email.value = contact.email;
};
this.onSubmit = function(contact){
this.currentContact = {
forename : form.forename.value,
surname : form.surname.value,
phone : form.phone.value,
email : form.email.value,
};
var currentContact = new Contact(filename,this.currentContact);
currentContact.save(function(bla){
alert(forename.value + " " + surname.value + ' erfolgreich gespeichert');
console.log(bla);
});
};
this.initialize();
};Ich hoffe ihr könnt damit was anfangen und mir schnell weiterhelfen, bei fragen zu meinem script, stellt sie ruhig, ich beantworte sie dann gerne
