Suche auf lima-city
-
in: Dynamisches Formular mit Nummerierung
geschrieben von srilankatours
ja Super ... DANKE !!!
habe die Funktion ein bischen angepasst, so dass der Wert eine Zeile weiter unten eingetragen wird
... weil ich in meiner Tabelle ja noch eine Kopf-Zeile habe (Spalten-Überschrift in der ersten tr)
und den Aufruf der numTableRows nicht als Extra-Button-Klick
sondern direkt innerhalb meiner add_input und delete_input eingebaut
so dass bei jeder Aktion (add oder delete) die Nummerierung neu erstellt wird
so klappt es, Danke !!!
mein Code jetzt:
<?php // --------------------------------------- if (isset($_POST['go']) && $_POST['go'] == 'SAVE') { print "<pre>\n"; print_r($_POST); print "</pre>\n"; } else { // --------------------------------------- ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de-DE"> <head> <title>Dynamisches Formular</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> <!-- var Zeile = 1; // ----- Header-Zeile = 1 ----- // --------- add_input functuin --------- function add_input(){ var tr = document.getElementById('articles').insertRow(Zeile); Zeile += 1; // --------- TD number TEXT --------- var td0 = document.createElement('td'); td0.className = 'tdelement'; td0.innerHTML = ' '; // --------- TD title INPUT --------- var td1 = document.createElement('td'); td1.className = 'tdelement'; var input1 = document.createElement('input'); input1.type = 'text'; input1.size = '36'; input1.name = 'name[]'; td1.appendChild(input1); // --------- TD info INPUT --------- var td2 = document.createElement('td'); td2.className = 'tdelement'; var input2 = document.createElement('input'); input2.type = 'text'; input2.size = '36'; input2.name = 'info[]'; td2.appendChild(input2); // --------- TD delete BUTTON --------- var td3 = document.createElement('td'); var button=document.createElement('input'); button.type = 'button'; button.className = 'delbutton'; button.onclick=function(){delete_input(this);}; button.value = 'delete'; td3.appendChild(button); // --------- TR insert TDs --------- tr.appendChild(td0); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); numTableRows(); } // --------- delete_input function --------- function delete_input(feld){ feld.parentNode.parentNode.parentNode.removeChild(feld.parentNode.parentNode); Zeile -= 1; numTableRows(); } // --------- table row number --------- function numTableRows() { tableRows = document.getElementById("articles").getElementsByTagName("tr"); for(i = 0; i < tableRows.length; i++) { tableRows[i+1].getElementsByTagName("td")[0].innerHTML = (i+1); } } //--> </script> <style type="text/css"> <!-- .tdelement { background-color: #DEDEDE; } .delbutton { background-color: #AA3333; color:#FFFFFF; margin:2px; padding:4px; } .addbutton { background-color: #446633; color:#FFFFAA; margin:2px; padding:4px; } --> </style> </head> <body bgcolor="#FFFFFF" text="#000000"> <br /> <br /> <br /> <form method="post" action=""> <table id="tabtitle" width="378" bgcolor="#CCCCCC"> <tr> <td width="80">Title:</td> <td width="286" bgcolor="#DEDEDE"><input name="title" type="text" size="46" /></td> </tr> </table> <br /> <br /> <table id="articles" cellpadding="2" cellspacing="2" bgcolor="#CCCCCC" width="714"> <tr> <td width="38"> Nr. </td> <td width="288"> Name </td> <td width="288"> Info </td> <td width="96"> Button </td> </tr> </table> <p> <input class="addbutton" onclick="add_input();" type="button" value="Add New Item" /> </p> <p> OK ..... <input type="submit" name="go" value="SAVE" /> </p> </form> <br /> <br /> <br /> </body> </html> <?php // --------------------------------------- } // --------------------------------------- ?>
Jetzt brauche ich noch etwas, um vor dem Absenden des Formulars zu prüfen,
ob Titel eingetragen wurde und ob mind. 1 Item angelegt wurde, aber auch auf max. 20 Items begrenzen.
Also ... Formular nur senden, wenn
+ input name="title" eingetragen wurde (Titel mind. 5 Zeichen)
+ mind. 1x neues Element hinzugefügt wurde und dort auch in die 2 Felder 'name' und 'info' etwas eingetragen wurde
ok, das könnte ich auch nach Absenden per PHP prüfen,
aber schöner wäre, wenn der "SAVE" Button nur funktioniert, wenn Bedingung erfüllt ist
und evtl. auch eine Begrenzung machen, dass der User maximal 20 Items erstellen kann
wenn es 20 Items gibt, dann den Button "Add New Item" nicht mehr anzeigen
ich habe ja den Zähler "var Zeile", wenn der auf 21 ist, dann class="addbutton" auf display:none
oder so
PS: XHTML Validen Code per JS erzeugen ??
ich habe mal versucht DOCTYPE als XHTML 1.0 Transitional zu machen
aber die vom Script eingefügten (neuen) Felder sind ohne den End-Slash im input-TAG
Im Auswahl-Quellentext steht dann<input name="name[]" size="36" type="text">
aber für XHTML 1.0 Transitional sollte es ja mit /> am Ende sein, wie bekomme ich das so hin ?
dass die per JS erzeugten INPUT Felder so sind:<input name="name[]" size="36" type="text" />
also valide ? ... gibt es dazu was für document.createElement('input'); ??
Danke!
-
in: Dynamisches Formular mit Nummerierung
geschrieben von srilankatours
Hallo
ich möchte ein dynamisches Formular erstellen,
bei dem der User neue Elemente hinzufügen kann, und auch Elemente wieder löschen kann
das klappt auch, nur mit der Nummerierung klappt es nicht
... es funktioniert, solange ich nur Elemente hinzufüge,
aber sobald ich ein Element lösche, dann stimmt die Nummerierung nicht mehr
mein Code: testform1.php
<?php // --------------------------------------- if (isset($_POST['title']) && !empty($_POST['title'])) { print "<pre>\n"; print_r($_POST); print "</pre>\n"; } else { // --------------------------------------- ?> <html> <head> <title>Dynamisches Formular</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> <!-- var Zeile = 1; // ----- Header-Zeile = 1 ----- // --------- add_input functuin --------- function add_input(){ var tr = document.getElementById('articles').insertRow(Zeile); Zeile += 1; // --------- TD number TEXT --------- var znr = (Zeile-1); // ---- Zeilen-Nummer ohne Header-Zeile ---- var td0 = document.createElement('td'); td0.className = 'tdelement'; td0.innerHTML = znr; // ---- Ausgabe der Zeilen-Nummer ---- // --------- TD title INPUT --------- var td1 = document.createElement('td'); td1.className = 'tdelement'; var input1 = document.createElement('input'); input1.type = 'text'; input1.size = '36'; input1.name = 'title[]'; td1.appendChild(input1); // --------- TD info INPUT --------- var td2 = document.createElement('td'); td2.className = 'tdelement'; var input2 = document.createElement('input'); input2.type = 'text'; input2.size = '36'; input2.name = 'info[]'; td2.appendChild(input2); // --------- TD delete BUTTON --------- var td3 = document.createElement('td'); var button=document.createElement('input'); button.type = 'button'; button.className = 'delbutton'; button.onclick=function(){delete_input(this);}; button.value = 'delete'; td3.appendChild(button); // --------- TR insert TDs --------- tr.appendChild(td0); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); } // --------- delete_input function --------- function delete_input(feld){ feld.parentNode.parentNode.parentNode.removeChild(feld.parentNode.parentNode); Zeile -= 1; } //--> </script> <style type="text/css"> <!-- .tdelement { background-color: #DEDEDE; } .delbutton { background-color: #AA3333; color:#FFFFFF; margin:2px; padding:4px; } .addbutton { background-color: #446633; color:#FFFFAA; margin:2px; padding:4px; } --> </style> </head> <body bgcolor="#FFFFFF" text="#000000"> <br> <br> <br> <form method="post" action=""> <table id="gname" width="378" bgcolor="#CCCCCC"> <tr> <td width="80">Title:</td> <td width="286" bgcolor="#DEDEDE"><input name="name" type="text" size="46" /></td> </tr> </table> <br> <br> <table id="articles" cellpadding="2" cellspacing="2" bgcolor="#CCCCCC" width="714"> <tr> <td width="38"> Nr. </td> <td width="288"> Title </td> <td width="288"> Info </td> <td width="96"> Button </td> </tr> </table> <p> <input class="addbutton" onclick="add_input();" type="button" value="Add New Item" /> </p> <p> OK ..... <input type="submit" name="go" value="SAVE" /> </p> </form> <br> <br> <br> </body> </html> <?php // --------------------------------------- } // --------------------------------------- ?>
Wie kann ich per JavaScript die dynamisch erzeugten Elemente (tr innerhalb Tabelle)
nach löschen eines Elements so ändern, dass ich wieder eine richtige Nummerierung bekomme ?
dieser Teil ist so nicht brauchbar
... // --------- TD number TEXT --------- var znr = (Zeile-1); // ---- Zeilen-Nummer ohne Header-Zeile ---- var td0 = document.createElement('td'); td0.className = 'tdelement'; td0.innerHTML = znr; // ---- Ausgabe der Zeilen-Nummer ---- ...
weil wenn ich von 4 Elementen (tr Zeilen mit Feldern) die Nr. 2 lösche,
dann steht als Nr die Reihenfolge 1, 3, 4 ... weil 2 ja gelöscht wurde
und neues Element ist dann nochmal die Nr. 4 (das stimmt ja dann von der Anzahl her)
aber 3 und 4 stimmen nicht mehr, die müssten jetzt 2 und 3 sein ...
ich hätte gerne auch nach löschen eine fortlaufende Nummerierung
also in diesem BSP dass die ehemalige 3 und 4 nach löschen zu 2 und 3 wird
(bzw. alle Nummern nach der gelöschter Nr um eins kleiner machen)
damit die Nummerierung wieder stimmt ....
ich hoffe ihr könnt mein Problem hierbei verstehen, und mir dabei helfen ...
sonst einfach nochmal nach-fragen ;) PS: Tip, probiert den Code selber aus
-
in: Google-Maps API für Routen
geschrieben von srilankatours
Hallo
ich habe einen Code, der eine Google-Map (mit Route) anzeigt,
das klappt auch grundsätzlich ganz gut, aber ich habe einige Fragen,
zu denen ich auch nach 2 Stunden Googeln keine Antworten gefunden habe
hier der Code:
<!DOCTYPE html> <html> <head> <title>Google-Maps - Route Example</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <style type="text/css"> <!-- body { font-family:Arial; font-size:14px; color:#000000; } --> </style> </head> <body> <h2>Google Maps JavaScript API v3 Example: Directions Complex</h2> <p>ROUTE: <i>Berlin</i> --> <i>Dresden</i> --> <i>Leipzig</i> --> <i>Hannover</i> --> <i>Paris</i> </p> <br> <br> <div id="map" style="width: 520px; height: 410px;"></div> <div id="duration">Duration: </div> <div id="distance">Distance: </div> <script type="text/javascript"> var directionsService = new google.maps.DirectionsService(); var directionsDisplay = new google.maps.DirectionsRenderer(); var myOptions = { zoom: 6, // mapTypeId: google.maps.MapTypeId.TERRAIN // mapTypeId: google.maps.MapTypeId.ROADMAP mapTypeId: google.maps.MapTypeId.HYBRID // mapTypeId: google.maps.MapTypeId.SATELLITE } var map = new google.maps.Map(document.getElementById("map"), myOptions); directionsDisplay.setMap(map); var request = { origin: 'Berlin', destination: 'Paris', waypoints: [ { location:'Dresden', stopover:true }, { location:'Leipzig', stopover:true }, { location:'Hannover', stopover:true }, ], provideRouteAlternatives: false, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: google.maps.UnitSystem.METRIC // unitSystem: google.maps.UnitSystem.IMPERIAL }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { // Display the distance: document.getElementById('distance').innerHTML += response.routes[0].legs[0].distance.value + " meters" + " --- (" + response.routes[0].legs[0].distance.text + ")"; // Display the duration: document.getElementById('duration').innerHTML += response.routes[0].legs[0].duration.value + " seconds" + " --- (" + response.routes[0].legs[0].duration.text + ")"; directionsDisplay.setDirections(response); } }); </script> <br> <br> <br> </body> </html>
hier die Fragen:
a) Zoom Einstellung ... egal welchen Wert ich setze, der Zoom der Karte ist immer gleich
der wird anscheinend automatisch angepasst, aber was, wenn ich die Route von "weiter weg" also Zoom kleiner haben will ?!
b) Route über Stadt mit Umlaut .. wie z.B. Köln
... egal was ich mache, ob Köln oder utf8_encode('Köln') oder urlencode('Köln') oder Köln
bei nichts davon bekomme ich eine Karte .... wie mache ich meine Route über Köln (über Stadt mit Umlaut) ???
also für neuen Wegpunkt: ...
.... aber in welcher codierung?{ location:'Köln', stopover:true }
c) kann ich die Map mit der Route auch einfach als Image bekommen,
also nicht als JS (JSON) sondern als Bild jpg/png/ ... egal welches Format ?
denn die JSON Datem-Menge ist extrem ? ... für so ne einfache route ?!
habe mal die JSON Daten von respone als Debug ausgegeben
das ist Wahhhhhhnsinn ... Mega-Viel ... zuuuu viel ...
ich hoffe Ihr könnt mir helfen
Danke !
-
in: Google-Maps Route per API einbinden ?
geschrieben von srilankatours
Hallo
ich versuche gerade eine Route (mit mehreren Wegpunkten) auf eine Homepage einzubinden,
ohne API bekomme ich es hin, also direkt per iFrame von Google-Maps ... siehe Beispiel
in Sri Lanka:
von Negombo
nach Sigiriya
dann nach Matale
dann nach Nuwara Eliya
wenn ich das auf einer Webseite einbauen will,
die über Touren in Sri Lanka informiert, ist das dann "gewerblich" ?
wenn "gewerblich", dann soll man ja die Google-Maps-API benutzen,
aber ich finde keinen Beispiel-Code,
wie ich diese MAP (mit der oben genannten Route) per API in die Seite einbauen kann,
oder soll ich es doch einfach per iFrame machen ?
Einen Google-API-Key habe ich,
aber wie kann ich eine Karte mit Route mit mehreren Wegpunkten per API-Aufruf einbinden ?
brauche ich überhaupt eine API anfrage ?