제출을위한 동적 행을 추가하는 JavaScript는 데이터의 첫 번째 행만 반환합니다.

사용자가 JavaScript를 사용하여 임의로 행을 추가 할 수있는 HTML 양식이 있습니다.제출을위한 동적 행을 추가하는 JavaScript는 데이터의 첫 번째 행만 반환합니다.

폼 :

<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"/>

자바 스크립트 : 나는 "항목을 추가"버튼을 클릭하면

이

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); 
    } 
}

PHP 코드가

$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(); 
}

, 행이 성공적으로 될 것입니다 만들어진. 그러나 첫 번째 행의 데이터 만 데이터베이스에 제출됩니다. 사용 내역 데이터가 여러 행이라도 "행 수가 1입니다."라는 메시지가 나타납니다. 누군가 내 코드에 무엇이 잘못되었을 수 있는지 알아낼 수 있습니까? 무리 감사!

출처

2012-04-02 nubicurio

당신은 추가 필드의 이름 속성을 설정해야합니다 :

// 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); 
    } 
}

당신은 두 개의 파일을 만들 시도 할 수 있습니다 : index.html을하고 send.php이 내용 삽입 :

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); 
?>

그리고 당신이 서버에서 실행 -이 나를 위해 작동합니다. 이름이 올바르게 설정되어 있는지 확인하십시오.

출처

2012-04-02 11:13:15

감사 Mateusz. 난 단지 코드를 시도했지만 행 수는 여전히 1이고 $ job [$ a]은 내가 입력 한 데이터 대신 "배열"이되었습니다. 간과 한 것에 대한 아이디어가 있습니까? – nubicurio

EDIT : $ job [$ a]은 이제 내가 입력 한 데이터이고 Array가 아닙니다 (뭔가 잘못 입력했습니다). – nubicurio

@nubicurio 필자는 저에게 맞는 코드를 추가했습니다. 동적 데이터가있는 배열을 올바르게 인쇄합니다. –

제출을위한 동적 행을 추가하는 JavaScript는 데이터의 첫 번째 행만 반환합니다.

답변

관련 문제