JavaScript zum Hinzufügen dynamischer Zeilen für die Einreichung gibt nur die erste Zeile der Daten zurück

Ich habe ein HTML-Formular, das einem Benutzer das Hinzufügen von Zeilen ad hoc mithilfe von JavaScript ermöglicht.JavaScript zum Hinzufügen dynamischer Zeilen für die Einreichung gibt nur die erste Zeile der Daten zurück

Die Form:

<form method="post" action="send.php"> 
<table id="table"> 
<tr><th>job</th><th>comment</th></tr> 
<tr> 
<td><textarea name = "job[]"></textarea></td> 
<td><textarea name = "comment[]"></textarea></td> 
<tr> 
</table> 
<input type ="button" value="add entry" onclick="add('table')"/> 
<input type ="submit" id="submit" value="submit"/>

Das JavaScript:

function add(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); 
     var newentry = document.createElement('textarea'); 
     newentry.type = "text"; 
     newcell.appendChild(newentry); 
    } 
}

Der PHP-Code

$job = $_POST['job']; 
$comment = $_POST['comment']; 

//code to connect to database 

$add_stmt = $mysqli->prepare("INSERT INTO job (job, comment) VALUES (?, ?)"); 

$foreach($job as $a => $b) { 
    $add_stmt->bind_param("ss", $job[$a], $comment[$a]); 
    $add_stmt->execute(); 
}

Wenn ich auf dem "Eintrag hinzufügen" klicken, wird eine Reihe sein, erfolgreich erstellt. Es werden jedoch nur Daten in der ersten Zeile an die Datenbank gesendet. Verwenden

Ich habe "Zeilenanzahl ist 1", obwohl ich mehrere Zeilen von Daten haben. Kann jemand herausfinden, was mit meinem Code falsch gelaufen sein könnte? Vielen Dank!

Quelle

2012-04-02 nubicurio

Sie haben für die Felder Name-Eigenschaft festlegen, die Sie hinzufügen:

// create array with names 
var names = ['job[]', 'comment[]']; 

function add(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); 
     var newentry = document.createElement('textarea'); 
     newentry.type = "text"; 

     // set name 
     newentry.name = names[i]; 

     newcell.appendChild(newentry); 
    } 
}

können Sie versuchen, zwei Dateien machen: index.html und send.php und fügen Sie diesen Inhalt:

index.html:

<html> 
<head> 
    <script> 
     var names = ["job[]", "comment[]"]; 
     function add(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); 
       var newentry = document.createElement('textarea'); 
       newentry.name = names[i]; 
       newentry.type = "text"; 
       newcell.appendChild(newentry); 
      } 
     } 
    </script> 
</head> 
<body> 
    <form method="post" action="send.php"> 
    <table id="table"> 
    <tr><th>job</th><th>comment</th></tr> 
    <tr> 
    <td><textarea name = "job[]"></textarea></td> 
    <td><textarea name = "comment[]"></textarea></td> 
    <tr> 
    </table> 
    <input type ="button" value="add entry" onclick="add('table')"/> 
    <input type ="submit" id="submit" value="submit"/> 
</form> 

</body> 
</html>

send.php:

<?php 
$job = $_POST['job']; 
$comment = $_POST['comment']; 

var_dump($job); 
var_dump($comment); 
?>

Und auf Ihrem Server laufen - das funktioniert für mich. Stellen Sie sicher, dass Sie Namen richtig eingestellt haben.

Quelle

2012-04-02 11:13:15

Danke Mateusz. Ich habe gerade Ihren Code versucht, aber die Zeilenanzahl ist immer noch 1 und $ job [$ a] ist jetzt "Array" anstatt der Daten, die ich eingegeben habe. Irgendwelche Ideen, was ich vielleicht übersehen hätte? – nubicurio

EDIT: $ job [$ a] ist jetzt die Daten, die ich eingegeben habe und nicht Array (ich habe etwas falsch eingegeben). – nubicurio

@nubicurio Ich habe Code hinzugefügt, der für mich funktioniert - er druckt Arrays mit dynamischen Daten korrekt. –

JavaScript zum Hinzufügen dynamischer Zeilen für die Einreichung gibt nur die erste Zeile der Daten zurück

Antwort

Verwandte Themen