kostenloser Webspace werbefrei: lima-city

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 = '&nbsp;'; 
		
	
	// --------- 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">&nbsp; Nr. </td>
  <td width="288">&nbsp;&nbsp; Name </td>
  <td width="288">&nbsp;&nbsp; Info </td>
  <td width="96">&nbsp;&nbsp; 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">&nbsp;&nbsp; Nr. </td>
  <td width="288">&nbsp;&nbsp; Title </td>
  <td width="288">&nbsp;&nbsp; Info </td>
  <td width="96">&nbsp;&nbsp; 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&#246;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: ... 
    { location:'Köln', stopover:true }
    .... aber in welcher codierung?

    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 ?

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!