1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Insert mehrere Zeilen mit einer Dynamic Tabelle

Dieses Thema im Forum "PHP" wurde erstellt von CreativPur, 9. August 2017.

  1. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Oh ja, da habe ich noch etwas vergessen, die Buttons müssen natürlich durch eine Klasse adressiert werden, wenn es mehrere sind:
    Code (Text):
    1.                     <a class="add_row btn btn-default pull-right btn-xs">Add Row</a>
    2.                     <button type="submit" class="btn btn-info pull-left btn-xs">speichern</button>
    3.                 </div>
    4.             </div>
    5.         </div>
    6.     </form>
    7.     <script>
    8.         $(document).ready(function () {
    9.             $(".add_row").on("click", function () {
    10.                 // Dynamic Rows Code
    11.                 // Get last row id and set new id
    12.                 var tbl = $(this).prev("table");
    13.                 var lastid = tbl.data("last-id");
    14.                 lastid++;
    15.                 tbl.data("last-id", lastid);
    16.                 var newtr = tbl.find("tbody tr").eq(0).clone();
    17.                 newtr.find("input, textarea").val("");
    18.                 newtr.attr("id", "addr" + lastid);
    19.                 // add the new row
    20.                 tbl.find("tbody").append(newtr);
    21.                 newtr.find("button.row-remove").on("click", function () {
    22.                     $(this).closest("tr").remove();
    23.                 });
    24.             }).trigger("click");
    25.             // Sortable Code
    26.         });
    27.     </script>
     
  2. CreativPur

    CreativPur Erfahrenes Mitglied

    Alles klappt bisher super...
    Nur die Radiobutton werden jetzt für die Spalten übernommen..
    Wie muss ich das Script erweitern ?

    Mein Versuch ist leider gescheitert..
    Code (Javascript):
    1. $(document).ready(function () {
    2.             $(".add_row").on("click", function () {
    3.                 // Dynamic Rows Code
    4.                 // Get last row id and set new id
    5.                 var tbl = $(this).prev("table");
    6.                 var lastid = tbl.data("last-id");
    7.                 lastid++;
    8.                 tbl.data("last-id", lastid);
    9.                 var newtr = tbl.find("tbody tr").eq(0).clone();
    10.                 newtr.find("input, textarea, radio").val("");
    11.                 newtr.attr("id", "addr" + lastid);
    12.                 // add the new row
    13.                 tbl.find("tbody").append(newtr);
    14.                 newtr.find("button.row-remove").on("click", function () {
    15.                     $(this).closest("tr").remove();
    16.                 });
    17.             }).trigger("click");
    18.             // Sortable Code
    19.         });
     
  3. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Verstehe nicht, wo sind da Radiobuttons? Oder meinst Du die Buttons für das Löschen?
     
  4. CreativPur

    CreativPur Erfahrenes Mitglied

    Nein...
    Ich habe mich in Dein Script hineingekniet und war voller Hoffnung, das ich es auch wo anders einsetzten kann..
    Es ist eine neue dynamische Tabelle wo ich halt auch Radiobuttons beinhalte.
     
  5. CreativPur

    CreativPur Erfahrenes Mitglied

    Wenn ich nur eine Zeile schreibe funktioniert es auch wunderbar..
     
  6. CreativPur

    CreativPur Erfahrenes Mitglied

    Mein neues Formular..

    HTML:
    1. <form action="?fremdsprache" method="post">
    2.         <input type="hidden" name='userid' class="form-control" value="<?php echo $userid ?>" />
    3.             <div class="panel panel-success">
    4.                 <div class="panel-heading">
    5.                     <div class="row">
    6.                         <h4 class="text-center pull-left">Bewerten Sie Ihre Fremdsprache</h4>
    7.                     </div>
    8.                 </div>
    9.                     <table class="table table-bordered table-hover table-sortable" id="tab_logic" data-last-id="0">
    10.                         <thead>
    11.                             <tr>
    12.                                 <th class="text-center">
    13.                                     Sprache
    14.                                 </th>
    15.                                 <th class="text-center">
    16.                                     Verstehen
    17.                                 </th>
    18.                                 <th class="text-center">
    19.                                     Sprechen
    20.                                 </th>
    21.                                 <th class="text-center">
    22.                                     Schreiben
    23.                                 </th>
    24.                                 <th class="text-center">
    25.                                     Lesen
    26.                                 </th>
    27.                                 <th colspan="2" class="text-center">
    28.                                     Bemerkung
    29.                                 </th>
    30.                             </tr>
    31.                         </thead>
    32.                         <tbody>
    33.                             <tr id='addr0' data-id="0">
    34.                                 <td data-name="sprache_name">
    35.                                     <input type="text" name="sprachproben_bewertung_sprache[]" class="form-control inputfeld" placeholder="z.B. Englisch" style="font-size:12px;" />  
    36.                                 </td>
    37.                                 <td data-name="sprache_verstehen">
    38.                                     <div class="radio">
    39.                                       <label>
    40.                                         <input type="radio" name="sprachproben_bewertung_verstehen[]" value="Sprache verstehen: sehr gut">
    41.                                         sehr gut
    42.                                       </label>
    43.                                     </div>
    44.                                     <div class="radio">
    45.                                       <label>
    46.                                         <input type="radio" name="sprachproben_bewertung_verstehen[]" value="Sprache verstehen: gut">
    47.                                         gut
    48.                                       </label>
    49.                                     </div>
    50.                                     <div class="radio">
    51.                                       <label>
    52.                                         <input type="radio" name="sprachproben_bewertung_verstehen[]" value="Sprache verstehen: befriedigend">
    53.                                         befriedigend
    54.                                       </label>
    55.                                     </div>
    56.                                     <div class="radio">
    57.                                       <label>
    58.                                         <input type="radio" name="sprachproben_bewertung_verstehen[]" value="Sprache verstehen: ausreichend">
    59.                                         ausreichend
    60.                                       </label>
    61.                                     </div>
    62.                                 </td>
    63.                                 <td data-name="sprache_sprechen">
    64.                                     <div class="radio">
    65.                                       <label>
    66.                                         <input type="radio" name="sprachproben_bewertung_sprechen[]" value="Sprache sprechen: sehr gut">
    67.                                         sehr gut
    68.                                       </label>
    69.                                     </div>
    70.                                     <div class="radio">
    71.                                       <label>
    72.                                         <input type="radio" name="sprachproben_bewertung_sprechen[]" value="Sprache sprechen: gut">
    73.                                         gut
    74.                                       </label>
    75.                                     </div>
    76.                                     <div class="radio">
    77.                                       <label>
    78.                                         <input type="radio" name="sprachproben_bewertung_sprechen[]" value="Sprache sprechen: befriedigend">
    79.                                         befriedigend
    80.                                       </label>
    81.                                     </div>
    82.                                     <div class="radio">
    83.                                       <label>
    84.                                         <input type="radio" name="sprachproben_bewertung_sprechen[]" value="Sprache sprechen: ausreichend">
    85.                                         ausreichend
    86.                                       </label>
    87.                                     </div>
    88.                                 </td>
    89.                                 <td data-name="sprache_schreiben">
    90.                                     <div class="radio">
    91.                                       <label>
    92.                                         <input type="radio" name="sprachproben_bewertung_schreiben[]" value="Sprache schreiben: sehr gut">
    93.                                         sehr gut
    94.                                       </label>
    95.                                     </div>
    96.                                     <div class="radio">
    97.                                       <label>
    98.                                         <input type="radio" name="sprachproben_bewertung_schreiben[]" value="Sprache schreiben: gut">
    99.                                         gut
    100.                                       </label>
    101.                                     </div>
    102.                                     <div class="radio">
    103.                                       <label>
    104.                                         <input type="radio" name="sprachproben_bewertung_schreiben[]" value="Sprache schreiben: befriedigend">
    105.                                         befriedigend
    106.                                       </label>
    107.                                     </div>
    108.                                     <div class="radio">
    109.                                       <label>
    110.                                         <input type="radio" name="sprachproben_bewertung_schreiben[]" value="Sprache schreiben: ausreichend">
    111.                                         ausreichend
    112.                                       </label>
    113.                                     </div>
    114.                                 </td>
    115.                                 <td data-name="sprache_lesen">
    116.                                     <div class="radio">
    117.                                       <label>
    118.                                         <input type="radio" name="sprachproben_bewertung_lesen[]" value="Sprache lesen: sehr gut">
    119.                                         sehr gut
    120.                                       </label>
    121.                                     </div>
    122.                                     <div class="radio">
    123.                                       <label>
    124.                                         <input type="radio" name="sprachproben_bewertung_lesen[]" value="Sprache lesen: gut">
    125.                                         gut
    126.                                       </label>
    127.                                     </div>
    128.                                     <div class="radio">
    129.                                       <label>
    130.                                         <input type="radio" name="sprachproben_bewertung_lesen[]" value="Sprache lesen: befriedigend">
    131.                                         befriedigend
    132.                                       </label>
    133.                                     </div>
    134.                                     <div class="radio">
    135.                                       <label>
    136.                                         <input type="radio" name="sprachproben_bewertung_lesen[]" value="Sprache lesen: ausreichend">
    137.                                         ausreichend
    138.                                       </label>
    139.                                     </div>
    140.                                 </td>
    141.                                 <td data-name="sprache_bemerkung">
    142.                                     <textarea name="sprachproben_bewertung_bemerkung[]" class="form-control inputfeld"></textarea>
    143.                                 </td>
    144.                                 <td data-name="del">
    145.                                     <button class="btn btn-danger glyphicon glyphicon-remove row-remove btn-xs loeschen"></button>
    146.                                 </td>
    147.                             </tr>
    148.                         </tbody>
    149.                     </table>
    150.                     <a class="add_row btn btn-success pull-right btn-xs" style="margin-top:7px;">Weitere Fremdsprache bewerten</a>
    151.                     <button type="submit" class="btn btn-info btn-xs" style="float:left; margin-top:7px;">Bewertung der Fremdsprache/n speichern</button>
    152.                     <div class="panel-footer">
    153.                     </div>
    154.               </div>
    155.     </form>


    Das INSERT....

    PHP:
    1. if(isset($_GET['fremdsprache'])) {
    2.      $error = false;
    3.      $userid = $_POST['userid'];
    4.      for ($i = 0; $i < count($_POST['sprachproben_bewertung_sprache']); $i++) {
    5.           $sprachproben_bewertung_sprache = $_POST['sprachproben_bewertung_sprache'][$i];
    6.           $sprachproben_bewertung_verstehen = $_POST['sprachproben_bewertung_verstehen'][$i];
    7.           $sprachproben_bewertung_sprechen = $_POST['sprachproben_bewertung_sprechen'][$i];
    8.           $sprachproben_bewertung_schreiben = $_POST['sprachproben_bewertung_schreiben'][$i];
    9.           $sprachproben_bewertung_lesen = $_POST['sprachproben_bewertung_lesen'][$i];
    10.           $sprachproben_bewertung_bemerkung = $_POST['sprachproben_bewertung_bemerkung'][$i];
    11.          
    12.           $statement = $pdo->prepare("INSERT INTO users_sprachproben_bewertung (userid,sprachproben_bewertung_sprache,sprachproben_bewertung_verstehen,sprachproben_bewertung_sprechen,sprachproben_bewertung_schreiben,sprachproben_bewertung_lesen,sprachproben_bewertung_bemerkung) VALUES (:userid,:sprachproben_bewertung_sprache,:sprachproben_bewertung_verstehen,:sprachproben_bewertung_sprechen,:sprachproben_bewertung_schreiben,:sprachproben_bewertung_lesen,:sprachproben_bewertung_bemerkung)");
    13.           $statement->execute(array('userid' => $userid, 'sprachproben_bewertung_sprache' => $sprachproben_bewertung_sprache, 'sprachproben_bewertung_verstehen' => $sprachproben_bewertung_verstehen, 'sprachproben_bewertung_sprechen' => $sprachproben_bewertung_sprechen, 'sprachproben_bewertung_schreiben' => $sprachproben_bewertung_schreiben, 'sprachproben_bewertung_lesen' => $sprachproben_bewertung_lesen, 'sprachproben_bewertung_bemerkung' => $sprachproben_bewertung_bemerkung));
    14.       }
    15.     }
     
  7. Sempervivum

    Sempervivum Erfahrenes Mitglied

  8. CreativPur

    CreativPur Erfahrenes Mitglied

    Ohjeee...
    Das sind für mich echt böhmische Dörfer...
    Zumal mein ENGLISCH verdammt miserabel ist..
     
  9. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Na, das war mal eine harte Nuss: jQuery nimmt beim Klonen das value-Attribut nicht mit. Ich musste es selbst kopieren. Diese Testseite funktioniert:
    Code (Text):
    1. <!doctype html>
    2. <html>
    3. <head>
    4.     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    5.     <script src="//code.jquery.com/jquery-3.2.1.js"></script>
    6.     <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    7. </head>
    8. <body>
    9.     <form action="testpost.php" method="post">
    10.         <input type="hidden" name='userid' class="form-control" value="<?php echo $userid ?>" />
    11.         <div class="panel panel-success">
    12.             <div class="panel-heading">
    13.                 <div class="row">
    14.                     <h4 class="text-center pull-left">Bewerten Sie Ihre Fremdsprache</h4>
    15.                 </div>
    16.             </div>
    17.             <table class="table table-bordered table-hover table-sortable" id="tab_logic" data-last-id="0">
    18.                 <thead>
    19.                     <tr>
    20.                         <th class="text-center">
    21.                             Sprache
    22.                         </th>
    23.                         <th class="text-center">
    24.                             Verstehen
    25.                         </th>
    26.                         <th class="text-center">
    27.                             Sprechen
    28.                         </th>
    29.                         <th class="text-center">
    30.                             Schreiben
    31.                         </th>
    32.                         <th class="text-center">
    33.                             Lesen
    34.                         </th>
    35.                         <th colspan="2" class="text-center">
    36.                             Bemerkung
    37.                         </th>
    38.                     </tr>
    39.                 </thead>
    40.                 <tbody>
    41.                     <tr id='addr0' data-id="0">
    42.                         <td data-name="sprache_name">
    43.                             <input type="text" name="sprachproben_bewertung_sprache[]" class="form-control inputfeld" placeholder="z.B. Englisch" style="font-size:12px;" />
    44.                         </td>
    45.                         <td data-name="sprache_verstehen">
    46.                             <div class="radio">
    47.                                 <label>
    48.                                     <input type="radio" name="sprachproben_bewertung_verstehen[0]" value="Sprache verstehen: sehr gut">
    49.                                     sehr gut
    50.                                 </label>
    51.                             </div>
    52.                             <div class="radio">
    53.                                 <label>
    54.                                     <input type="radio" name="sprachproben_bewertung_verstehen[0]" value="Sprache verstehen: gut">
    55.                                     gut
    56.                                 </label>
    57.                             </div>
    58.                             <div class="radio">
    59.                                 <label>
    60.                                     <input type="radio" name="sprachproben_bewertung_verstehen[0]" value="Sprache verstehen: befriedigend">
    61.                                     befriedigend
    62.                                 </label>
    63.                             </div>
    64.                             <div class="radio">
    65.                                 <label>
    66.                                     <input type="radio" name="sprachproben_bewertung_verstehen[0]" value="Sprache verstehen: ausreichend">
    67.                                     ausreichend
    68.                                 </label>
    69.                             </div>
    70.                         </td>
    71.                         <td data-name="sprache_sprechen">
    72.                             <div class="radio">
    73.                                 <label>
    74.                                     <input type="radio" name="sprachproben_bewertung_sprechen[0]" value="Sprache sprechen: sehr gut">
    75.                                     sehr gut
    76.                                 </label>
    77.                             </div>
    78.                             <div class="radio">
    79.                                 <label>
    80.                                     <input type="radio" name="sprachproben_bewertung_sprechen[0]" value="Sprache sprechen: gut">
    81.                                     gut
    82.                                 </label>
    83.                             </div>
    84.                             <div class="radio">
    85.                                 <label>
    86.                                     <input type="radio" name="sprachproben_bewertung_sprechen[0]" value="Sprache sprechen: befriedigend">
    87.                                     befriedigend
    88.                                 </label>
    89.                             </div>
    90.                             <div class="radio">
    91.                                 <label>
    92.                                     <input type="radio" name="sprachproben_bewertung_sprechen[0]" value="Sprache sprechen: ausreichend">
    93.                                     ausreichend
    94.                                 </label>
    95.                             </div>
    96.                         </td>
    97.                         <td data-name="sprache_schreiben">
    98.                             <div class="radio">
    99.                                 <label>
    100.                                     <input type="radio" name="sprachproben_bewertung_schreiben[0]" value="Sprache schreiben: sehr gut">
    101.                                     sehr gut
    102.                                 </label>
    103.                             </div>
    104.                             <div class="radio">
    105.                                 <label>
    106.                                     <input type="radio" name="sprachproben_bewertung_schreiben[0]" value="Sprache schreiben: gut">
    107.                                     gut
    108.                                 </label>
    109.                             </div>
    110.                             <div class="radio">
    111.                                 <label>
    112.                                     <input type="radio" name="sprachproben_bewertung_schreiben[0]" value="Sprache schreiben: befriedigend">
    113.                                     befriedigend
    114.                                 </label>
    115.                             </div>
    116.                             <div class="radio">
    117.                                 <label>
    118.                                     <input type="radio" name="sprachproben_bewertung_schreiben[0]" value="Sprache schreiben: ausreichend">
    119.                                     ausreichend
    120.                                 </label>
    121.                             </div>
    122.                         </td>
    123.                         <td data-name="sprache_lesen">
    124.                             <div class="radio">
    125.                                 <label>
    126.                                     <input type="radio" name="sprachproben_bewertung_lesen[0]" value="Sprache lesen: sehr gut">
    127.                                     sehr gut
    128.                                 </label>
    129.                             </div>
    130.                             <div class="radio">
    131.                                 <label>
    132.                                     <input type="radio" name="sprachproben_bewertung_lesen[0]" value="Sprache lesen: gut">
    133.                                     gut
    134.                                 </label>
    135.                             </div>
    136.                             <div class="radio">
    137.                                 <label>
    138.                                     <input type="radio" name="sprachproben_bewertung_lesen[0]" value="Sprache lesen: befriedigend">
    139.                                     befriedigend
    140.                                 </label>
    141.                             </div>
    142.                             <div class="radio">
    143.                                 <label>
    144.                                     <input type="radio" name="sprachproben_bewertung_lesen[0]" value="Sprache lesen: ausreichend">
    145.                                     ausreichend
    146.                                 </label>
    147.                             </div>
    148.                         </td>
    149.                         <td data-name="sprache_bemerkung">
    150.                             <textarea name="sprachproben_bewertung_bemerkung[]" class="form-control inputfeld"></textarea>
    151.                         </td>
    152.                         <td data-name="del">
    153.                             <button class="btn btn-danger glyphicon glyphicon-remove row-remove btn-xs loeschen"></button>
    154.                         </td>
    155.                     </tr>
    156.                 </tbody>
    157.             </table>
    158.             <a class="add_row btn btn-success pull-right btn-xs" style="margin-top:7px;">Weitere Fremdsprache bewerten</a>
    159.             <button type="submit" class="btn btn-info btn-xs" style="float:left; margin-top:7px;">Bewertung der Fremdsprache/n speichern</button>
    160.             <div class="panel-footer">
    161.             </div>
    162.         </div>
    163.     </form>
    164.     <script>
    165.         $(document).ready(function () {
    166.             $(".add_row").on("click", function () {
    167.                 // Get last row id and set new id
    168.                 var tbl = $(this).prev("table");
    169.                 var vals = [];
    170.                 var firstrow = tbl.find("tbody tr").eq(0);
    171.                 firstrow.find("input[type='radio']").each(function () {
    172.                     vals.push($(this).val());
    173.                 });
    174.                 var lastid = tbl.data("last-id");
    175.                 lastid++;
    176.                 tbl.data("last-id", lastid);
    177.                 var newtr = tbl.find("tbody tr").eq(0).clone(true, true);
    178.                 newtr.find("input, textarea").val("");
    179.                 newtr.find("input[type='radio']").each(function (idx, ele) {
    180.                     name = $(this).attr("name").replace("[0]", "[" + lastid + "]");
    181.                     $(this).attr("name", name);
    182.                     $(this).val(vals[idx]);
    183.                 });
    184.                 newtr.attr("id", "addr" + lastid);
    185.                 // add the new row
    186.                 tbl.find("tbody").append(newtr);
    187.                 newtr.find("button.row-remove").on("click", function () {
    188.                     $(this).closest("tr").remove();
    189.                 });
    190.             }).trigger("click");
    191.             // Sortable Code
    192.             var fixHelperModified = function (e, tr) {
    193.                 var $originals = tr.children();
    194.                 var $helper = tr.clone();
    195.                 $helper.children().each(function (index) {
    196.                     $(this).width($originals.eq(index).width())
    197.                 });
    198.                 return $helper;
    199.             };
    200.             $(".table-sortable tbody").sortable({
    201.                 helper: fixHelperModified
    202.             });
    203.             $(".table-sortable thead").disableSelection();
    204.         });
    205.     </script>
    206. </body>
    207. </html>
    Unter "action" habe ich mein Testskript eingetragen, das musst Du wieder umändern.
     
  10. CreativPur

    CreativPur Erfahrenes Mitglied

    Super.. Vielen Dank für Deine Geduld und vor allem Deiner top Arbeit..
    Es funktioniert einwandfrei... FREU..

    Darf ich Dich noch um ein für Dich kleines Problem Nerven ?
     
  11. CreativPur

    CreativPur Erfahrenes Mitglied

    Wie kann ich eine JavaScript-Variable in ein Inputfeld für eine Value-Eingabe umwandeln ?
    Ich habe es folgend versucht.. Form usw. habe ich weg gelassen!
    HTML:
    1. <input typ="text" class="form-control" name="sprachproben_aufnehmen_audio" id="sprachproben_aufnehmen_audio" value="<?php echo $sprachproben_aufnehmen_audio" ?>>
    Das Originalskript (Ausschnitt) wo der Code ausgegeben wird..
    Code (Javascript):
    1. function uploadAudio(mp3Data){
    2.         var reader = new FileReader();
    3.         reader.onload = function(event){
    4.             var fd = new FormData()
    5.             var mp3Name = (new Date().getTime() + '.mp3');
    6.             console.log("mp3name = " + mp3Name);
    7.             fd.append('fname', mp3Name);
    8.             fd.append('data', event.target.result);
    9.             $.ajax({
    10.                 type: 'POST',
    11.                 url: 'upload.php',
    12.                 data: fd,
    13.                 processData: false,
    14.                 contentType: false
    15.             }).done(function(data) {
    16.                 console.log(data);
    17.                 log.innerHTML += "\n" + data;
    18.             });
    19.         };
    20.         reader.readAsDataURL(mp3Data);
    21.     }
    Diesen Abschnitt wollte ich gern als Value..
    Code (Javascript):
    1. var mp3Name = (new Date().getTime() + '.mp3');
    und versucht habe ich folgendes:
    Code (Javascript):
    1. var mp3Name = document.getElementById('sprachproben_aufnehmen_audio').value;
    Aber irgendetwas fehlt dort noch... Und ich steh mal wieder auf dem Schlauch..
     
  12. goto;

    goto; Erfahrenes Mitglied

    Hallo CreativPur,

    du möchtest den Inhalt der Variable "mp3Name" als Value in das Input-Feld eintragen?

    Code (Javascript):
    1. document.getElementById('sprachproben_aufnehmen_audio').value = mp3Name;
    Viele Grüße
    goto;
     
  13. CreativPur

    CreativPur Erfahrenes Mitglied

    Hm... Irgendwie klappt es nicht..
    Ich möchte mein Anliegen lieber nochmal verdeutlichen..

    Ich habe ein Aufnahme-Reorder auf meiner Webseite.
    Damit sollen Fremdsprachen-Proben erstellt werden.
    Dieser funktioniert auch einwandfrei..

    Die mp3-Dateien werden auch in einem Ordner abgelegt.
    Auch das abspielen der Sprachprobe funktioniert..

    Allerdings gibt es zwei Probleme:
    Problem 1. Es wird ein anderer Code unter dem Abspiel-Gerät ausgegeben, als wie die mp3-Datei im Ordner abgespeichert wird.
    a: Der Code unter dem Abspielgerät lautet -> 1502896610995.mp3
    b: Der Code Code im Ablageordner lautet -> audio_recording_2017-08-16-17-16-51.mp3
    Problem 2. Wenn der User sich für die Sprachaufnahme entschieden hat, soll er im 2. Schritt die Auswahl auf die Datenbank speichern können.
    Am liebsten im Format .......value="<?php echo $userid ?> + - + Code + .mp3">.. z.B. 78-1502896610995.mp3
    Die Tabelle besteht nur aus:
    audio_id
    userid
    sprachproben_aufnehmen_sprache (Welche Sprache)
    sprachproben_aufnehmen_audio (Code)
    Dies ist mein HTML
    HTML:
    1. <div class="row">
    2.                     <div class="col-lg-1">
    3.                     </div>
    4.                     <div class="col-lg-6">
    5.                         <button id="aufnahme" type="button" class="btn btn-danger" onClick="startRecording(this);">Aufnahme</button>
    6.                         <button id="stop" type="button" class="btn btn-success" onClick="stopRecording(this), outline('neue_aufnahme'); outline('aufnahme'); outline('stop'); return false;">STOP</button>
    7.                         <button id="neue_aufnahme" type="button" style="display:none" class="btn btn-info" onClick="location.reload();">Neue Aufnahme</button>
    8.                        <br /><br />
    9.                        <pre id="log"></pre>
    10.                     </div>
    11.                     <div class="col-lg-4">
    12.                         <br /><br />
    13.                         <div id="recordingslist"></div>  
    14.                             <hr />
    15.                                 <span style="color:red"><strong>Benennen Sie bitte Ihre Aufnahme:</strong></span>
    16.                                 <br />
    17.                             <form action="?aufnahme_sprache" name="aufnahme_sprache" method="post">  
    18.                                 <input typ="text" class="form-control" name="sprachproben_aufnehmen_sprache" placeholder="Z.B. Englisch">
    19.                                 <br />
    20.                                 <input typ="text" class="form-control" name="sprachproben_aufnehmen_audio" id="sprachproben_aufnehmen_audio">
    21.                                 <br />
    22.                                 <input typ="text" class="form-control" name="userid" value="<?php echo $userid ?>" >
    23.                                 <hr />
    24.                                 <button type="submit" class="btn btn-primary">Sprachprobe speichern</button>
    25.                             </form>
    26.                         </div>
    27.                     </div>
    28.                 </div>
    Und dies ist das Script:
    Code (Javascript):
    1.   function __log(e, data) {
    2.     log.innerHTML += "\n" + e + " " + (data || '');
    3.   }
    4.   var audio_context;
    5.   var recorder;
    6.   function startUserMedia(stream) {
    7.     var input = audio_context.createMediaStreamSource(stream);
    8.     recorder = new Recorder(input, {
    9.                   numChannels: 1
    10.                 });
    11.     __log('<pan style="color:green">Sie haben der Aufnahme zugestimmt.</span>');          
    12.     __log('<hr /><pan style="color:red"><strong>Aufnahmebereit.</strong></span<br />');
    13.   }
    14.  
    15.   function startRecording(button) {
    16.     recorder && recorder.record();
    17.     button.disabled = true;
    18.     button.nextElementSibling.disabled = false;
    19.     __log('<span style="color:blue;"><strong>Achtung:</strong></span> AUFNAHME...');
    20.   }
    21.  
    22.   function stopRecording(button) {
    23.     recorder && recorder.stop();
    24.     button.disabled = true;
    25.     button.previousElementSibling.disabled = false;
    26.     __log('AUFNAHME <strong>beendet</strong>.');
    27.  
    28.     // create WAV download link using audio data blob
    29.     createDownloadLink();
    30.  
    31.     recorder.clear();
    32.   }
    33.  
    34.   function createDownloadLink() {
    35.     recorder && recorder.exportWAV(function(blob) {
    36.    
    37.     });
    38.   }
    39.  
    40.   window.onload = function init() {
    41.     try {
    42.       // webkit shim
    43.       window.AudioContext = window.AudioContext || window.webkitAudioContext;
    44.       navigator.getUserMedia = ( navigator.getUserMedia ||
    45.                        navigator.webkitGetUserMedia ||
    46.                        navigator.mozGetUserMedia ||
    47.                        navigator.msGetUserMedia);
    48.       window.URL = window.URL || window.webkitURL;
    49.  
    50.       audio_context = new AudioContext;
    51.       __log('<pan style="color:red"><strong>Sie m&uuml;ssen die Aufnahme erst erlauben.</strong></span>');
    52.      
    53.     } catch (e) {
    54.       alert('Ihr Browser unterst&uuml;tzt leider nicht diese Aufnahme! <br /> Bitte nehmen Sie Ihre Sprachaufnahme z.B. mit dem Handy auf und laden diese anschliessend hoch.');
    55.     }
    56.  
    57.     navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
    58.       __log('Sie müssen an Ihrem PC die Audiofunktion aktivieren: ' + e);
    59.     });
    60.   };
    61.  
    62. (function(window){
    63.  
    64.   var WORKER_PATH = 'recorder/recorderWorker.js';
    65.   var encoderWorker = new Worker('recorder/mp3Worker.js');
    66.  
    67.   var Recorder = function(source, cfg){
    68.     var config = cfg || {};
    69.     var bufferLen = config.bufferLen || 4096;
    70.     var numChannels = config.numChannels || 2;
    71.     this.context = source.context;
    72.     this.node = (this.context.createScriptProcessor ||
    73.                  this.context.createJavaScriptNode).call(this.context,
    74.                  bufferLen, numChannels, numChannels);
    75.     var worker = new Worker(config.workerPath || WORKER_PATH);
    76.     worker.postMessage({
    77.       command: 'init',
    78.       config: {
    79.         sampleRate: this.context.sampleRate,
    80.         numChannels: numChannels
    81.       }
    82.     });
    83.     var recording = false,
    84.       currCallback;
    85.  
    86.     this.node.onaudioprocess = function(e){
    87.       if (!recording) return;
    88.       var buffer = [];
    89.       for (var channel = 0; channel < numChannels; channel++){
    90.           buffer.push(e.inputBuffer.getChannelData(channel));
    91.       }
    92.       worker.postMessage({
    93.         command: 'record',
    94.         buffer: buffer
    95.       });
    96.     }
    97.  
    98.     this.configure = function(cfg){
    99.       for (var prop in cfg){
    100.         if (cfg.hasOwnProperty(prop)){
    101.           config[prop] = cfg[prop];
    102.         }
    103.       }
    104.     }
    105.  
    106.     this.record = function(){
    107.       recording = true;
    108.     }
    109.  
    110.     this.stop = function(){
    111.       recording = false;
    112.     }
    113.  
    114.     this.clear = function(){
    115.       worker.postMessage({ command: 'clear' });
    116.     }
    117.  
    118.     this.getBuffer = function(cb) {
    119.       currCallback = cb || config.callback;
    120.       worker.postMessage({ command: 'getBuffer' })
    121.     }
    122.  
    123.     this.exportWAV = function(cb, type){
    124.       currCallback = cb || config.callback;
    125.       type = type || config.type || 'audio/wav';
    126.       if (!currCallback) throw new Error('Callback not set');
    127.       worker.postMessage({
    128.         command: 'exportWAV',
    129.         type: type
    130.       });
    131.     }
    132.  
    133.     //Mp3 conversion
    134.     worker.onmessage = function(e){
    135.       var blob = e.data;
    136.       //console.log("the blob " +  blob + " " + blob.size + " " + blob.type);
    137.  
    138.       var arrayBuffer;
    139.       var fileReader = new FileReader();
    140.  
    141.       fileReader.onload = function(){
    142.         arrayBuffer = this.result;
    143.         var buffer = new Uint8Array(arrayBuffer),
    144.         data = parseWav(buffer);
    145.         console.log(data);
    146.         console.log("Converting to Mp3");
    147.         log.innerHTML += "\n" + "<hr /><pan style='color:green'>Ihre Aufnahme wird bearbeitet. <br />Dies kann je nach der Aufnahmedauer einige Minuten dauern..</span><hr />";
    148.         encoderWorker.postMessage({ cmd: 'init', config:{
    149.             mode : 3,
    150.             channels:1,
    151.             samplerate: data.sampleRate,
    152.             bitrate: data.bitsPerSample
    153.         }});
    154.         encoderWorker.postMessage({ cmd: 'encode', buf: Uint8ArrayToFloat32Array(data.samples) });
    155.         encoderWorker.postMessage({ cmd: 'finish'});
    156.         encoderWorker.onmessage = function(e) {
    157.             if (e.data.cmd == 'data') {
    158.                 console.log("Ihre Aufnahme ist fertig und kann angeh&ouml;rt werden");
    159.                 log.innerHTML += "\n" + "<pan style='color:blue'>Ihre Aufnahme ist fertig und kann gleich<br />abgespielt/angeh&ouml;rt werden</span>";
    160.                 /*var audio = new Audio();
    161.                 audio.src = 'data:audio/mp3;base64,'+encode64(e.data.buf);
    162.                 audio.play();*/
    163.  
    164.                 //console.log ("The Mp3 data " + e.data.buf);
    165.                 var mp3Blob = new Blob([new Uint8Array(e.data.buf)], {type: 'audio/mp3'});
    166.                 uploadAudio(mp3Blob);
    167.                 var url = 'data:audio/mp3;base64,'+encode64(e.data.buf);
    168.                 var li = document.createElement('li');
    169.                 var au = document.createElement('audio');
    170.                 var hf = document.createElement('a');
    171.                 var input = document.createElement('input');
    172.                 au.controls = true;
    173.                 au.src = url;
    174.                 hf.href = url;
    175.                 hf.download = new Date().getTime() + '.mp3';
    176.                 hf.innerHTML = hf.download;
    177.                 li.appendChild(au);
    178.                 li.appendChild(hf);
    179.                 recordingslist.appendChild(li);
    180.             }
    181.         };
    182.       };
    183.  
    184.       fileReader.readAsArrayBuffer(blob);
    185.  
    186.       currCallback(blob);
    187.     }
    188.     function encode64(buffer) {
    189.         var binary = '',
    190.             bytes = new Uint8Array( buffer ),
    191.             len = bytes.byteLength;
    192.  
    193.         for (var i = 0; i < len; i++) {
    194.             binary += String.fromCharCode( bytes[ i ] );
    195.         }
    196.         return window.btoa( binary );
    197.     }
    198.     function parseWav(wav) {
    199.         function readInt(i, bytes) {
    200.             var ret = 0,
    201.                 shft = 0;
    202.  
    203.             while (bytes) {
    204.                 ret += wav[i] << shft;
    205.                 shft += 8;
    206.                 i++;
    207.                 bytes--;
    208.             }
    209.             return ret;
    210.         }
    211.         if (readInt(20, 2) != 1) throw 'Invalid compression code, not PCM';
    212.         if (readInt(22, 2) != 1) throw 'Invalid number of channels, not 1';
    213.         return {
    214.             sampleRate: readInt(24, 4),
    215.             bitsPerSample: readInt(34, 2),
    216.             samples: wav.subarray(44)
    217.         };
    218.     }
    219.  
    220.     function Uint8ArrayToFloat32Array(u8a){
    221.         var f32Buffer = new Float32Array(u8a.length);
    222.         for (var i = 0; i < u8a.length; i++) {
    223.             var value = u8a[i<<1] + (u8a[(i<<1)+1]<<8);
    224.             if (value >= 0x8000) value |= ~0x7FFF;
    225.             f32Buffer[i] = value / 0x8000;
    226.         }
    227.         return f32Buffer;
    228.     }
    229.     function uploadAudio(mp3Data){
    230.         var reader = new FileReader();
    231.         reader.onload = function(event){
    232.             var fd = new FormData()
    233.             var mp3Name = (new Date().getTime() + '.mp3');
    234.             console.log("mp3name = " + mp3Name);
    235.             fd.append('fname', mp3Name);
    236.             fd.append('data', event.target.result);
    237.             $.ajax({
    238.                 type: 'POST',
    239.                 url: 'upload.php',
    240.                 data: fd,
    241.                 processData: false,
    242.                 contentType: false
    243.             }).done(function(data) {
    244.                 console.log(data);
    245.                 log.innerHTML += "\n" + data;
    246.             });
    247.         };
    248.         reader.readAsDataURL(mp3Data);
    249.     }
    250.  
    251.     source.connect(this.node);
    252.     this.node.connect(this.context.destination);    //this should not be necessary
    253.   };
    254.  
    255.   window.Recorder = Recorder;
    256.  
    257. })(window);
     
  14. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Dieser Code ist ja ein Wahnsinn! Hast Du den selber geschrieben?
    Verstehe ich das richtig: Es geht dir um dieses Zeile:
    Code (Text):
    1. var mp3Name = (new Date().getTime() + '.mp3');
    Diese erzeugt den Dateinamen, den Du unter a angibst:
    Offenbar ist das, was Du als "Code" bezeichnest, der Zeitpunkt der Aufnahme.
    Weiter schreibst Du:
    Meinst Du, dass der Code im Ablageordner so lauten soll?
     
  15. CreativPur

    CreativPur Erfahrenes Mitglied

    Nein..Den Code habe ich leider nicht selbst geschrieben.. Ich wünschte, ich hätte diese Kenntnisse.
    Ich denke mal, der Code (new Date().getTime() + '.mp3') aus dieser Zeile 175 + 233 gibt entweder ->1502896610995.mp3 oder -> audio_recording_2017-08-16-17-16-51.mp3 aus.
    Wo er den Vorspann audio_recording_ her holt, weiß ich leider nicht.
    Mein Wunsch wäre,dass das Script die pm3-Dateien in 'Userid' + '-' + '1502896610995.mp3' ausgibt, so, dass er z.B. 78-1502896610995.mp3 erzeugt wird.
    Außerdem dass dann im VALUE des INPUT FELDES für Name="sprachproben_aufnehmen_audio" der Code (78-1502896610995.mp3) in die Datenbank gespeichert wird.
     
  16. CreativPur

    CreativPur Erfahrenes Mitglied

    Zu dem Script kommen noch 2 weitere js, die aber für das speichern irrelevant sind.

    Wenn die Aufnahme durchgelaufen ist, öffnet sich ein Player und darunter der Link 1502896610995.mp3.
    In den Ablageordner wird die Selbe dabei aber folgend als mp3 hinterlegt: audio_recording_2017-08-16-17-16-51.mp3
     
  17. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Versuche mal, ob dir dies weiter hilft:
    Im head die User-ID in einer Variablen speichern:
    Code (Text):
    1. <script> var userid = <?php echo $userid; ?>; </script>
    Und dann dieses:
    Code (Text):
    1. var mp3Name = (new Date().getTime() + '.mp3');
    durch dieses ersetzen:
    Code (Text):
    1. var mp3Name = userid + '-' + (new Date().getTime()) + '.mp3';
    2. document.querySelector("input[name='userid']").value = userid + '-' + (new Date().getTime()) + '.mp3';
     
    Zuletzt bearbeitet: 16. August 2017 um 23:06 Uhr
Die Seite wird geladen...
Ähnliche Themen - Insert mehrere Zeilen
  1. rennwolle17
    Antworten:
    4
    Aufrufe:
    189
  2. marcaurel
    Antworten:
    10
    Aufrufe:
    318
  3. marcaurel
    Antworten:
    1
    Aufrufe:
    361
  4. marcaurel
    Antworten:
    11
    Aufrufe:
    491
  5. frank_muc
    Antworten:
    5
    Aufrufe:
    10.917