Daten einer addRow-Tabelle auf Seite ausgeben

CreativPur

Erfahrenes Mitglied
Hallo,
Ich habe 2 für Euch kleinere Probleme..

Problem 1:
ich habe eine Formular mit folgenden Input-Feldern und Select-Feld.
Die Tabelle lässt mehrere Datensätze zu.

index.png

Es sollen Fahrstrecken eingegeben werden.. Also von - nach..
Die linke Spalte soll mit Hidden nicht angezeigt werden, da die Abfahrt-Orte immer das zuvorige Zielort ist. Ich habe versucht als, die Ziel-Ort-Daten als value in die Abfahrt-Daten zu übernehmen, funktioniert aber nicht.
Wie gesagt, handelt es sich hierbei um eine AddRow-Tabelle. Leider weiß ich nicht, wie ich es anstellen soll, dass die Zieldaten automatisch zu den Abfahrt-Daten übernommen werden.

Hier der Quelltext dazu:
Code:
<?php
                                $distance_anfahrt = 0;
                                $start_adresse_anfahrt = $_POST['start_anfahrt'];
                                $ziel_adresse_anfahrt = $_POST['ziel_anfahrt'];
                             
                                $chkbox = $_POST['chk'];
                                $distance_strecke = 0;
                                $start_adresse_strecke = $_POST['strecke_abfahrt'];
                                $ziel_adresse_strecke = $_POST['strecke_ziel'];
                                $wartezeit = $_POST['wartezeit'];
                             
                                    {
                                    echo '<form action="test1.php" method="post">
                                    <input type="hidden" name="start_anfahrt" value="34434 Natingen">
                                    <br>
                                    <label style="color:blue;">Bitte geben Sie Ihren Abholort bzw. Startort ein:</label><br>
                                    <input type="text" size="150" name="ziel_anfahrt" value="">
                                    <br />
                                    <p style="color:green; font-size:12px;">z.B. 34117 Kassel, Beethovenstr.13</p>
                                    <div>
                                    <br /><br />

                                        <table class="table table-hover">
                                            <thead>
                                                <tr >
                                                    <th class="text-center" width="20">
                                                        <label class="label">Löschen:</label>
                                                    </th>
                                                    <th class="text-left">
                                                        <label class="label">Geben Sie bitte Ihr Abfahrtort ein: Von</label>
                                                    </th>
                                                    <th class="text-left">
                                                        <label class="label">Geben Sie bitte Ihr Zielort ein: Nach</label>
                                                    </th>
                                                    <th class="text-left">
                                                        <label class="label">Wartezeit vor der Lokation:</label>
                                                    </th>
                                                 
                                                </tr>
                                            </thead>
                                            <tbody id="dataTable">
                                                    <td width="20"><input type="checkbox" name="chk[]" align="center"/></td>
                                                    <td><input class="form-control" type="text" name="strecke_abfahrt[]" value="34434 Borgentreich"/></td>
                                                    <td><input class="form-control" type="text" name="strecke_ziel[]"/></td>
                                                    <td>
                                                        <select class="form-control" name="wartezeit[]">
                                                            <option value="">Bitte wählen</option>
                                                            <option value="0">Keine Wartezeit</option>
                                                            <option value="0.25">15 Minuten</option>
                                                            <option value="0.5">30 Minuten</option>
                                                            <option value="0.75">45 Minuten</option>
                                                            <option value="1">1 Stunde</option>
                                                            <option value="2">2 Stunden</option>
                                                            <option value="3">3 Stunden</option>
                                                            <option value="4">4 Stunden</option>
                                                            <option value="5">5 Stunden</option>
                                                            <option value="6">6 Stunden</option>
                                                            <option value="7">7 Stunden</option>
                                                            <option value="8">8 Stunden</option>
                                                        </select>
                                                    </td>
         
                                            </tbody>
                                        </table>
 
                                        <br />
                                        <input type="button" value="x" class="btn-danger btn-xs" onclick="deleteRow(`dataTable`)" style="float:left;" />
                                        <input type="button" value="Weitere Station" onclick="addRow(`dataTable`)" style="float:right;" class="btn btn-info" /> 

                                        <div  align="center">
                                                <hr />
                                                <input type="submit" value="Weiter" class="btn btn-success">
                                                <input type="button" value="Fenster schließen" onClick="window.close()" class="btn btn-danger">
                                        </div>
                                        </form>';
                                    }
                                ?>

Und natürlich das Script:

Javascript:
<script language="javascript">
        function addRow(tableID) {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var colCount = table.rows[0].cells.length;
            for(var i=0; i<colCount; i++) {
                var newcell = row.insertCell(i);
                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }
            }
        }
        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    if(rowCount <= 1) {
                        alert("Sie müssen mindestens ein Ziel eingeben.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }
            }
            }catch(e) {
                alert(e);
            }
        }
</script>


Jetzt zu meinem 2. Problem..

Auf der Ausgabe-Seite werden die jeweiligen Abfahrt-Orte mit den Ziel-Orten abgeglichen und die Entfernung wird in Kilometern errechnet.
Die Daten werden zwar per Echo ausgegeben, aber leider bekomme ich Sie nicht in die Berechnung für die Kilometer-Ausgabe.
Ich habe versucht, diese Daten in Inputfeldern anzeigen zu lassen, aber leider wird mir da nur der Letzte Eintrag ausgegeben.

Wie bekomme ich die Daten in ein Format, mit dem ich die Km errechnen kann ?
Außerdem benötige ich eine Addition der gesamten Wartezeit in Stunden.

Wenn ich Daten manuell in Inputfeldern gebe, so wie bei der Anfahrt-Berechnung, werden die Km auch ausgegeben. Aber ich kenne den Weg (Zauberformel) bei AddRow-Tabellen nicht.


ausgabe.png


Wäre super nett, wenn Ihr mir behilflich sein könntet..

Auch hier selbstverständlich der Quelltext.

Code:
<?php include_once 'head.php' ?>

<script>
function calc()
{
  var km_anfahrt = document.getElementById('km_anfahrt').value;
  console.log(km_anfahrt);

  var km_strecke = document.getElementById('km_strecke').value;
  console.log(km_strecke);

  var wartezeit_std = document.getElementById('wartezeit_std').value;
  console.log(wartezeit_std);

  var addition = document.getElementById('addition').value;
  console.log(addition);


  var summe_km_strecke = eval(km_strecke)
  console.log(summe_km_strecke);
  summe_km_strecke = summe_km_strecke.toFixed(2);
  document.getElementById('sum_km_strecke').innerHTML = summe_km_strecke;
  document.getElementById('sum_km_strecke2').innerHTML = summe_km_strecke;

  var summe_anfahrt_preis = eval(km_anfahrt * 2.22)
  console.log(summe_anfahrt_preis);
  summe_anfahrt_preis = summe_anfahrt_preis.toFixed(2);
  document.getElementById('sum_anfahrt_preis').innerHTML = summe_anfahrt_preis;

  var summe_strecke_preis = eval(km_strecke * 2.22)
  console.log(summe_strecke_preis);
  summe_strecke_preis = summe_strecke_preis.toFixed(2);
  document.getElementById('sum_strecke_preis').innerHTML = summe_strecke_preis;

  var summe_wartezeit_std = eval(wartezeit_std)
  console.log(summe_wartezeit_std);
  summe_wartezeit_std = summe_wartezeit_std.toFixed(2);
  document.getElementById('sum_wartezeit_std').innerHTML = summe_wartezeit_std;
  document.getElementById('sum_wartezeit_std2').innerHTML = summe_wartezeit_std;

  var summe_wartezeit_preis = eval(wartezeit_std * 35)
  console.log(summe_wartezeit_preis);
  summe_wartezeit_preis = summe_wartezeit_preis.toFixed(2);
  document.getElementById('sum_wartezeit_preis').innerHTML = summe_wartezeit_preis;

  var summe_gesamt = eval(summe_anfahrt_preis + addition + summe_strecke_preis + addition + summe_wartezeit_preis)
  console.log(summe_gesamt);
  summe_gesamt = summe_gesamt.toFixed(2);
  document.getElementById('sum_gesamt').innerHTML = summe_gesamt;

}
</script> 
 
<h3>Ausgabe-Seite:</h3>

<br /><br />

<div class="container" align="center">
        <div class="textblock">
                <h3 style="color: #009;"> Kalkulation Ihrer Fahrt zu Ihren privaten Events mit Zwischenstationen</h3>
                <hr />
                <?php
                        $distance_anfahrt = $_POST['distance_anfahrt'];
                        $start_adresse_anfahrt = $_POST['start_anfahrt'];
                        $ziel_adresse_anfahrt = $_POST['ziel_anfahrt'];
                             
                        if($start_adresse_anfahrt!='' && $ziel_adresse_anfahrt!=''){
                        $url="http://maps.googleapis.com/maps/api/distancematrix/xml?origins=".$start_adresse_anfahrt."+DE&destinations=".$ziel_adresse_anfahrt."+DE&mode=driving&language=de-DE&sensor=false";
                        if($xml=simplexml_load_file($url)){
                        if($xml->status=='OK'){
                        $distance_anfahrt = $xml->row->element->distance->text;
                        $distance_anfahrt = preg_replace('/\skm/', '', $distance_anfahrt);
                        $distance_anfahrt = preg_replace('/\./', '', $distance_anfahrt);
                        $distance_anfahrt = (float) $distance_anfahrt;
                                }
                            }
                        }
                             
                        $chkbox = $_POST['chk'];
                        $distance_strecke = $_POST['distance_strecke'];
                        $start_adresse_strecke = $_POST['strecke_abfahrt'];
                        $ziel_adresse_strecke = $_POST['strecke_ziel'];
                        $wartezeit = $_POST['wartezeit'];
                        if($start_adresse_strecke!='' && $ziel_adresse_strecke!=''){
                        $url="http://maps.googleapis.com/maps/api/distancematrix/xml?origins=".$start_adresse_strecke."+DE&destinations=".$ziel_adresse_strecke."+DE&mode=driving&language=de-DE&sensor=false";
                        if($xml=simplexml_load_file($url)){
                        if($xml->status=='OK'){
                        $distance_strecke = $xml->row->element->distance->text;
                        $distance_strecke = preg_replace('/\skm/', '', $distance_strecke);
                        $distance_strecke = preg_replace('/\./', '', $distance_strecke);
                        $distance_strecke = (float) $distance_strecke;
                                }
                            }
                        }
                ?>
                     
                     
                <div style="color:#000; font-size:11px;" align="left">
                        <?php echo 'Die Entfernung zwischen 34434 Natingen ( Standort von Cheffeur delux ) und '.$ziel_adresse_anfahrt . ' ( Ihrem Abholort ) beträgt: ' .$distance_anfahrt . ' km '; ?>
                        <hr />
                        <?php echo 'Die Entfernung zwischen '.$start_adresse_strecke[$a] . ' und ' .$ziel_adresse_strecke[$a]. ' beträgt: ' .$distance_strecke . ' km '; ?>
                        <hr />
                             
                        <?php
                                foreach($ziel_adresse_strecke   as $a => $b)
                                echo "$chkbox[$a] Ihre Route von $start_adresse_strecke[$a]  nach $ziel_adresse_strecke[$a]:   <br />Wartezeit in $ziel_adresse_strecke[$a] : $wartezeit[$a] Stunde/n <br />";
                                      
                                echo "<br /><br />Strecke / Km: <br />";
                                echo "$chkbox[$a] Die Route zwischen $start_adresse_strecke[$a]  und $ziel_adresse_strecke[$a] betragen  $distance_strecke  Kilometer <br />";
                                      
                                echo "<br /><br />Wartezeiten: <br />";
                                    foreach($wartezeit   as $a => $b)
                                echo "$wartezeit[$a]  <br /> ";
                                     
                                echo "<br />";
                                     
                                foreach($ziel_adresse_strecke   as $a => $b)
                                    echo "Strecke: $start_adresse_strecke[$a]  nach $ziel_adresse_strecke[$a] <br />";
                             
                        ?>

                        <br /><br />
                        Berechnung Anfahrt Kilometer:
                        <br />
                            <input type='text' id='km_anfahrt' size="5" value="<?php echo $distance_anfahrt ?>"><input type='text' size="1" value="*"><input type='text' size="1" value="2.22">
                        <br />
                        Berechnung Strecke Kilometer:
                        <br />
                            <input type='text' id='km_strecke' size="5" value="<?php echo $distance_strecke ?>"><input type='text' size="1" value="*"><input type='text' size="1" value="2.22">
                        <br />                                     
                        Berechnung Wartezeit:
                        <br />
                            <input type='text' id='wartezeit_std' size="5" value="<?php echo $wartezeit[$a] ?>"><input type='text' size="1" value="*"><input type='text' size="1" value="35">
                        <br />
                        Strecke von bis:
                        <br />                                     
                            <input type='text' id='strecke_abfahrt' size="15" value="<?php echo $start_adresse_strecke[$a] ?>">
                            <input type='text' id='strecke_ziel' size="15" value="<?php echo $ziel_adresse_strecke[$a] ?>">
                        <br /><br />
                     
                            <input type='text' id='addition' size="1" value="+">
                     
                        <br /><br />
                        <hr />
                     
                        <div id="errechnen_button" align="center">
                                <input type="button" name="errechnen" value="Kosten für private Events-Fahrt berechnen" class="btn btn-default"
                                onClick="einblenden('errechnen'); return false, calc();">
                                <hr />
                        </div>
                     
                </div>
                <div class="errechnen" id="errechnen" style="display:none;">
                        <div class="row">
                                <div class="col-md-6 col-lg-6 col-sm-6 col-xs-6" >
                                        <h5><u>Ihre Fahrt ergibt folgende Gesamt-Kilometer:</u></h5>
                                        <span style="color:green; font-size:24px;" id="sum_km_strecke"></span>&nbsp;&nbsp;<span style="font-size:14px; color:#565b57;"> km</span>
                                        <hr />
                                        <br />
                                </div>
                                <div class="col-md-6 col-lg-6 col-sm-6 col-xs-6" >
                                        <h5><u>Ihre Wartezeiten </u></h5>
                                        haben Sie mit insgesamt&nbsp;&nbsp; <span style="color:green; font-size:24px;" id="sum_wartezeit_std"></span>&nbsp;&nbsp;
                                        <span style="font-size:14px; color:#565b57;"> Stunden</span> eingeplant.
                                        <hr />
                                        <br />
                                </div>
                      
                                     
                         <div class="col-md-3 col-lg-3 col-sm-3 col-xs-3" >
                                        <label style="color:#565b57">Anfahrtkosten <?php echo 'für '.$distance_anfahrt; ?> km</label>
                                        <hr style="margin-top:-1px; border-color:green;" />
                                        <span style="font-size:12px; color: #0a0aa3;">von <strong style="color:#FC6;">Chauffeur delux</strong> <?php echo 'nach
                                        <br />'.$ziel_adresse_anfahrt; ?>
                                        </span>
                                        <br />
                                        <hr style=" border-color:green;" />
                                        <span style="color:green; font-size:24px;" id="sum_anfahrt_preis">
                                        </span>&nbsp;&nbsp;
                                        <span style="font-size:14px; color:#565b57;"> €</span><br />
                        </div>
                                                     
                        <div class="col-md-3 col-lg-3 col-sm-3 col-xs-3" >
                                <label style="color:#565b57">Gesamte Kilometer</label>
                                <hr style="margin-top:-1px; border-color:green;" />
                                <span style="font-size:12px; color: #0a0aa3;" id="sum_km_strecke2"></span><span style="font-size:12px; color: #0a0aa3;"> Kilometer</span>
                                <br /><br />
                                <hr style=" border-color:green;" />
                                <span style="color:green; font-size:24px;" id="sum_strecke_preis">
                                </span>&nbsp;&nbsp;
                                <span style="font-size:14px; color:#565b57;"> €</span><br />
                        </div>
                                                     
                        <div class="col-md-3 col-lg-3 col-sm-3 col-xs-3" >
                                <label style="color:#565b57">Gesamte Wartezeit</label>
                                <hr style="margin-top:-1px; border-color:green;" />
                                <span style="font-size:12px; color: #0a0aa3;" id="sum_wartezeit_std2"></span><span style="font-size:12px; color: #0a0aa3;"> Stunden</span>
                                <br /><br />
                                <hr style=" border-color:green;" />
                                <span style="color:green; font-size:24px;" id="sum_wartezeit_preis">
                                </span>&nbsp;&nbsp;
                                <span style="font-size:14px; color:#565b57;"> €</span><br />
                        </div>
                                                     
                        <div class="col-md-3 col-lg-3 col-sm-3 col-xs-3">
                                <label style="color:#565b57">Kosten Gesamt</label>
                                <hr style="margin-top:-1px; border-color:green;" /><br />
                                <span style="font-size:12px; color: #0a0aa3;">inkl. 19% MwSt.</span>
                                <hr style=" border-color:green;" />
                                <span style="color:green; font-size:24px;" id="sum_gesamt">
                                </span>&nbsp;&nbsp;
                                <span style="font-size:14px; color:#565b57;"> €</span><br />
                       </div>
                </div>
        </div>
</div>


<script type="text/javascript" language="JavaScript">
function einblenden(div) {
with(document.getElementById(div).style){
if(display=="none") { display="inline"; }
else{ display="none"; }
} }
</script>
<script>
function goback() {
    history.go(-1);
}
</script>
 
Zuletzt bearbeitet:
Zurück