Mit Dynamic Form Fields - Add & Remove Daten weiter transportieren

CreativPur

Erfahrenes Mitglied
Hallo,

ich habe ein Formular mit einer Weiterleitung auf einer Ausgabeseite.

Das ganze beruht ohne Datenbank, da ich hierfür keine benötige.

Das Formular besteht aus nur zwei Eingabefeldern und einem Select-Feld.

Das Selectfeld hat allerdings die Eigenschaft, sich zu klonen.

Quelltext:

Code:
<?php
                                $distance_anfahrt = 0;
                                $start_adresse_anfahrt = $_POST['start_anfahrt'];
                                $ziel_adresse_anfahrt = $_POST['ziel_anfahrt'];
                              
                                $distance_stadion1 = 0;
                                $start_adresse_stadion1 = $_POST['ziel_anfahrt'];
                                $ziel_adresse_stadion1 = $_POST['ziel_stadion1'];
                                $wartezeit_stadion1 = $_POST['wartezeit_stadion1'];
                                    {
                                    echo '<form action="stadionen.php" method="post" name="f01" onsubmit="return pruefen01();">
                                    <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>
  
                                    <table>
                                        <thead>
                                            <tr>
                                                <th><label style="color:blue; font-size:12px;">Geben Sie bitte einen Zielort ein:</label></th>
                                                <th><label style="color:blue; font-size:12px;">Wartezeit vor der Lakation:</label></th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tfoot>
                                            <tr>
                                              
                                                <td></td>
                                                <td></td>
                                            </tr>
                                        </tfoot>
                                        <tbody>
                                            <tr>
                                                <td><input class="form-control" name="name0" type="text" size="120" placeholder="Z.B. Ziel 1: 34114 Warburg, Bahnhofstr. 36" /></td>
                                                <td>
                                                    <select class="form-control" name="sel0">
                                                            <option value="0">Bitte wählen</option>
                                                            <option value="0.25">1/4 Stunde</option>
                                                            <option value="0.5">1/2 Stunde</option>
                                                            <option value="0.75">3/4 Stunde</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>
                                                    </select>
                                                </td>
                                                <td>
                                                    <button class="btn btn-success btn-add" type="button">
                                                        <i class="glyphicon glyphicon-plus gs"></i>
                                                    </button>
                                               </td>
                                            </tr>
                                        </tbody>
                                    </table>
  
                                    </div>
                                    <br />
                                    <br>
                                    <hr />
                                    <input type="submit" value="Weiter" class="btn btn-success">
                                    <input type="button" value="Fenster schließen" onClick="window.close()" class="btn btn-danger">
                                  
                                    </form>';
                                    }
                                ?>


Script:

Code:
$(function()
{
    $(document).on('click', '.btn-add', function(e)
    {
        e.preventDefault();

        var controlForm = $(this).closest('table'),
            currentEntry = $(this).parents('tr:first'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);

        newEntry.find('input').val('');
        controlForm.find('tr:not(:last) .btn-add')
            .removeClass('btn-add').addClass('btn-remove')
            .removeClass('btn-success').addClass('btn-danger')
            .html('<span class="glyphicon glyphicon-minus gs"></span>');
    }).on('click', '.btn-remove', function(e)
    {
        $(this).parents('tr:first').remove();

        e.preventDefault();
        return false;
    });
});

wenn ich nur eine "name0" und "sel0" eingebe, wird das ganze wird auch errechnet und auf der nächsten Seite ausgegeben..
Wenn ich aber mehrere angebe, wird nur die Letzte Eintragung errechnet und ausgegeben.

Was muss ich tun, damit alle Eintragungen errechnet und ausgegeben werden ?

Hier ist noch der Code für die Berechnung:

Code:
function calc()
{
  var km_anfahrt = document.getElementById('km_anfahrt').value;
  console.log(km_anfahrt);

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

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

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



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

  var summe_km_gesamt = eval(name0)
  console.log(summe_km_gesamt);
  document.getElementById('sum_km_gesamt').innerHTML = summe_km_gesamt;
  document.getElementById('sum_km_gesamt2').innerHTML = summe_km_gesamt;
  document.getElementById('summe_km_gesamt').value = summe_km_gesamt;


  var summe_wartezeit_gesamt = eval(sel0)
  console.log(summe_wartezeit_gesamt);
  summe_wartezeit_gesamt = summe_wartezeit_gesamt.toFixed(2);
  document.getElementById('sum_wartezeit_gesamt').innerHTML = summe_wartezeit_gesamt;
  document.getElementById('sum_wartezeit_gesamt2').innerHTML = summe_wartezeit_gesamt;
  document.getElementById('summe_wartezeit_gesamt').value = summe_wartezeit_gesamt;


  var summe_km_euro_gesamt = eval(summe_km_gesamt * 2.22)
  console.log(summe_km_euro_gesamt);
  summe_km_euro_gesamt = summe_km_euro_gesamt.toFixed(2);
  document.getElementById('sum_km_euro_gesamt').innerHTML = summe_km_euro_gesamt;


  var summe_wartezeit_euro_gesamt = eval(summe_wartezeit_gesamt * 35)
  console.log(summe_wartezeit_euro_gesamt);
  summe_wartezeit_euro_gesamt = summe_wartezeit_euro_gesamt.toFixed(2);
  document.getElementById('sum_wartezeit_euro_gesamt').innerHTML = summe_wartezeit_euro_gesamt;


  var summe_euro_gesamt = eval(summe_km_euro_gesamt + addition + summe_wartezeit_euro_gesamt + addition + summe_anfahrt_euro_gesamt)
  console.log(summe_euro_gesamt);
  summe_euro_gesamt = summe_euro_gesamt.toFixed(2);
  document.getElementById('sum_euro_gesamt').innerHTML = summe_euro_gesamt;
  document.getElementById('summe_euro_gesamt').value = summe_euro_gesamt;


}


Zum Schluss noch die Ausgabeseite, von der ich dann die Mail versende..

Code:
<body class="hintergrund">

<form class="form-horizontal" action="/emails/events/formmailer.php" target="_blank" method="post">

        <div class="container" align="center">
                <div class="textblock">
                        <h3 style="color: #009;"> Kalkulation Ihrer Fahrt zu Ihren privaten Events mit Zwischenstadionen</h3>
                        <hr />
                       
                        <?php
                                $distance_anfahrt = $_POST['distance_anfahrt'];
                                $start_adresse_anfahrt = $_POST['start_anfahrt'];
                                $ziel_adresse_anfahrt = $_POST['ziel_anfahrt'];
                               
                               
                                $summe_wartezeit_gesamt = $_POST['summe_wartezeit_gesamt'];
                               
                
                                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;
                                    }
                                }
                                }
                               
                               
                               
                                $distance_stadion1 = $_POST['distance_stadion1'];
                                $start_adresse_stadion1 = $_POST['ziel_anfahrt'];
                                $ziel_adresse_stadion1 = $_POST['name0'];
                                $wartezeit_stadion1 = $_POST['sel0'];
                
                                if($start_adresse_stadion1!='' && $ziel_adresse_stadion1!=''){
                                $url="http://maps.googleapis.com/maps/api/distancematrix/xml?origins=".$start_adresse_stadion1."+DE&destinations=".$ziel_adresse_stadion1."+DE&mode=driving&language=de-DE&sensor=false";
                                if($xml=simplexml_load_file($url)){
                                if($xml->status=='OK'){
                                    $distance_stadion1 = $xml->row->element->distance->text;
                                    $distance_stadion1 = preg_replace('/\skm/', '', $distance_stadion1);
                                    $distance_stadion1 = preg_replace('/\./', '', $distance_stadion1);
                                    $distance_stadion1 = (float) $distance_stadion1;
                                    }
                                }
                                }
                               
                               
                        ?>
                        <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" >
                                <div class="row">
                                        <div class="col-md-8 col-lg-8 col-sm-8 col-xs-8" >
                                                <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_stadion1 . ' und '.$ziel_adresse_stadion1 . ' beträgt: '
                                                        .$distance_stadion1 . ' km '; ?>
                                                       
                                                        <hr />
                                                 </div>
                                        </div>
                                        <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" >
                                                <div style="color:#000; font-size:11px;" align="left">
                                                        <br />
                                                        <hr />
                                                        <?php echo 'Wartezeit in  ' .$ziel_adresse_stadion1 . ' : ' .$wartezeit_stadion1. ' &nbsp;Stunde/n' ;?>
                                                       
                                                        <hr />
                                                </div>
                                        </div>           
                                </div>
                        </div>
                                             
                                <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'); einblenden('button_formular_reservieren');  einblenden('errechnen_button'); return false, calc();">
                                </div>
                               
                               
                                <div class="errechnen" id="errechnen" style="display:none;">
                                       
                                       
                                        <div class="hidden">
                                        <input type='text' id='km_anfahrt' size="5" value="<?php echo $distance_anfahrt ?>"><input type='text' id='addition' size="1" value="+">
                                        <input type='text' id='name0' size="5" value="<?php echo $distance_stadion1 ?>"><input type='text' size="1" value="+">
                                       
                                        <br />
                                        <input type='text' id='sel0' size="5" value="<?php echo $wartezeit_stadion1 ?>">
                                       
                                        </div>
                               
                               
                               
                                        <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" >
                                                <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_gesamt2"></span>&nbsp;&nbsp;<span style="font-size:14px; color:#565b57;"> km</span><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_gesamt2"></span>&nbsp;&nbsp;
                                                                <span style="font-size:14px; color:#565b57;"> Stunden</span> eingeplant.
                                                        </div>
                                               
                                                </div>
                                                <hr /><br />
                                        </div>
                                       
                                       
                                        <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" >
                                                <div class="row">
                                                        <div class="col-md-3 col-lg-3 col-sm-3 col-xs-3" >
                                                                <div>
                                                                        <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 />'.$start_adresse_stadion1; ?>
                                                                        </span>
                                                                        <br />
                                                                        <hr style=" border-color:green;" />
                                                                        <span style="color:green; font-size:24px;" id="sum_anfahrt_euro_gesamt">
                                                                        </span>&nbsp;&nbsp;
                                                                        <span style="font-size:14px; color:#565b57;"> €</span><br />
                                                                </div>
                                                        </div>
                                                       
                                                        <div class="col-md-3 col-lg-3 col-sm-3 col-xs-3" >
                                                                <div>
                                                                        <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_gesamt"></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_km_euro_gesamt">
                                                                        </span>&nbsp;&nbsp;
                                                                        <span style="font-size:14px; color:#565b57;"> €</span><br />
                                                                </div>
                                                        </div>
                                                       
                                                       
                                                       
                                                       
                                                        <div class="col-md-3 col-lg-3 col-sm-3 col-xs-3" >
                                                                <div>
                                                                        <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_gesamt"></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_euro_gesamt">
                                                                        </span>&nbsp;&nbsp;
                                                                        <span style="font-size:14px; color:#565b57;"> €</span><br />
                                                                </div>
                                                        </div>
                                                       
                                                       
                                                       
                                                       
                                                        <div class="col-md-3 col-lg-3 col-sm-3 col-xs-3">
                                                                <div>
                                                                        <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_euro_gesamt">
                                                                        </span>&nbsp;&nbsp;
                                                                        <span style="font-size:14px; color:#565b57;"> €</span><br />
                                                                </div>
                                                       </div>
                                                     
                                                </div>
                                                <hr />
                                               
                                               
                                               
                                        </div>
                                        </div>
                                       
                                       
                                      
                                              
       
        <textarea cols="120" rows="5" class="hidden" name="Sehr geehrter Kunde" >
       
        Bitte überweisen Sie den kalulierten Betrag bis spätestens 6 Wochen vor den Buchungstermin.
                                                               
        Erst dann wird Ihre Registrierung anerkannt. Bis dahin werden Sie nur vorgemerkt.
       
        Sollten sich vorgemerkte Termine überschneiden und Sie den Betrag
        noch nicht überwiesen haben, werden Sie telefonisch benachrichtigt.
                                                               
        Sollte Ihr Betrag 6 Wochen vor dem Buchungstermin noch nicht verbucht sein,
        wird Ihre Reservierung automatisch gelöscht.
                                                               
                                                               
                                                               
        Mit freundlichem Gruß
        Ihr Chauffeur Delux
                               
                               
        ___________________________________________________________________________________________________________
       
        </textarea>
       
        <textarea cols="120" rows="5" class="hidden" name="Ihre eingegebenen Daten">
       
        </textarea>
        <input type="text" class="hidden" name="Anfahrt" value="Die Anfahrt von Chauffeur Delux <?php echo 'nach '.$ziel_adresse_anfahrt; ?> beträgt <?php echo $distance_anfahrt ?> km.">
       
       
        <input type='text' id='km_stadion1' class="hidden" name="Entfernung Stadion 1 in Km" value="<?php echo $distance_stadion1 ?>">
       
        <input type="text" class="hidden" name="Route beträgt in Km"  id="summe_km_gesamt">
       
        <input type='text' id='wartezeit_stadion1' class="hidden" name="Wartezeit vor Stadion 1" value="<?php echo $wartezeit_stadion1 ?>">
       
        <input type="text" class="hidden" name="Ihre Wartezeiten in Stunden" id="summe_wartezeit_gesamt">
       
        <input type="text" class="hidden" name="Gesamtpreis in Euro" id="summe_euro_gesamt">                      
                                <br /><br />
                               
                                <div id="formular" style="display:none">
                                                <br /><br />
                                                 <?php include_once '../../emails/events/formular.php' ?>
                               
                                </div>
                               
                                                        <div id="button_formular_reservieren" style="display:none;">
                                                                <input name="button_formular_schließen" type="button" value="Dieses Angebot reservieren" class="btn btn-success"
                                                                onClick="einblenden('formular'); einblenden('button_formular_reservieren2'); einblenden('button_formular_reservieren'); return false;"/>
                                                               
                                                               
                                                                <hr />
                                                               
                                                                 
                                                                <a href="javascript:goback()">
                                                                <input value="Route ändern" class="btn btn-warning">
                                                                </a>
                                                                &nbsp;&nbsp;&nbsp;
                                                               
                                                               
                                                                <a href="index.php">
                                                                <input value="Neue Eingabe" class="btn btn-info">
                                                                </a>
                                                                &nbsp;&nbsp;&nbsp;
                                                               
                                                                <input type="button" value="Fenster schließen" onClick="window.close()" class="btn btn-default">
                                                                <hr />
                                                        </div>
                                                       
                                                       
                                                        <div id="button_formular_reservieren2" style="display:none;">
                                                                <input type="submit" value="Reservierung senden" class="btn btn-success" />
                                                               
                                                                <hr />
                                                               
                                                                 
                                                                <a href="javascript:goback()">
                                                                <input value="Route ändern" class="btn btn-warning">
                                                                </a>
                                                                &nbsp;&nbsp;&nbsp;
                                                               
                                                               
                                                                <a href="index.php">
                                                                <input value="Neue Eingabe" class="btn btn-info">
                                                                </a>
                                                                &nbsp;&nbsp;&nbsp;
                                                               
                                                                <input type="button" value="Fenster schließen" onClick="window.close()" class="btn btn-default">
                                                                <hr />
                                                        </div>
                                                       
                                                      
                              
        <textarea cols="120" rows="5" class="hidden" name="Bankverbindung">
       
        ___________________________________________________________________________________________
       
        Kasseler Sparkasse
        Kontoinhaber: Chauffeur Delux
        IBAN: DE78520503530011817211
        BIC: HELADEF1KAS
        Vewendungszweck: Ihr Vorname und Nachname
       
        ___________________________________________________________________________________________                       
                               
        </textarea>      
                               
                               
                               
                              
                               
                               
                               
</form>                             
                                       
                                       
                                       
                                        <br />
                                </div>
                        </div>
                       
                               
                </div>               
        </div>
</body>                       


<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>
 
Zurück