ajax이용시 궁금한점이 있습니다.

[유정현]

 <td> <textarea class="form-control" id="bigotext" placeholder="<%= samgong[i].비고 %>" rows="3" name="bigo2"></textarea>
                  <button type="button" class="btn btn-secondary bigobtn" data-id="<%= samgong[i]._id %>">저장</button>
              </td>

 $('.bigobtn').click(function(e){
        var 글번호 = e.target.dataset.id;
        var 비고내용 = $('#bigotext').val();
    $.ajax({
      method : 'POST',
      url : '/dronebigo',
      data : { _id : 글번호, bigo2 : 비고내용 }
      
    }).done(function(결과){
      console.log('.')
      window.location = "/list";

      //AJAX 성공시 실행할 코드는 여기
      //지금누른거 부모중에 li가 있으면 사라지게해줘라

    }).fail(function(a,b,c){
      console.log(a,b,c)

      //xhr, textStatus,errorThrown 실패 파라미터 
    })
  });







app.post('/dronebigo',로그인했니, function (요청, 응답) { 
        console.log(요청.body.bigo2)
        db.collection('samgong').updateOne({_id : parseInt(요청.body._id)} ,{$set : {비고 : 요청.body.bigo2}}, function(에러, 결과){
         
          응답.redirect('/list')
        })
      })

 
  


선생님 각기 다른 비고란에 글을 입력할 수 있게 하고 싶은데 위와 같은 방식으로 코딩을 했을때는 첫번째 비고란만 작성이 되고 두번째부터는 작성이 되지 않습니다.

제 생각에는 버튼은 id 대로 ajax를 통해 몽고 db로 전송이 되지만 input값은 각기 id가 없어서 그런거 같은데 이럴경우에는 어떻게 하면 다른 비고창도 저장이 되게끔 할 수 있을까요?

[codingapple]

id=""는 페이지내에서 1개밖에 못씁니다 class=""로 바꿉시다

[유정현]

   <% for (var i = 0; i < samgong.length; i++){ %>
                
                <tr>
                  <th scope="row"><%= samgong[i]._id %> </th>
                <td><%= samgong[i].기종 %></td>
                <td><%= samgong[i].C넘버 %></td>
                <td><p><%= samgong[i].사용자 %></p><span style="display: <%= samgong[i].display %>">이전사용자 : <%= samgong[i].이전사용자 %></span><p style="color: <%= samgong[i].color %>"><%= samgong[i].date %></p></td>
                <td> <button class="btn use" data-id="<%= samgong[i]._id %>">사용</button><button class="btn cencel" data-id="<%= samgong[i]._id %>">반납</button> </td>
                
                <td> <textarea class="form-control bigotext"  placeholder="<%= samgong[i].비고 %>" rows="3" name="bigo2"></textarea>
                  <button type="button" class="btn btn-secondary bigobtn" data-id="<%= samgong[i]._id %>">저장</button>
                </td>
              </tr>
              <% } %>

$('.bigobtn').click(function(e){
        var 글번호 = e.target.dataset.id;
        var 비고내용 = $('.bigotext').val();
    $.ajax({
      method : 'POST',
      url : '/dronebigo',
      data : { _id : 글번호, bigo2 : 비고내용 }
      
    }).done(function(결과){
      console.log('.')
      window.location = "/list";

      //AJAX 성공시 실행할 코드는 여기
      //지금누른거 부모중에 li가 있으면 사라지게해줘라

    }).fail(function(a,b,c){
      console.log(a,b,c)

      //xhr, textStatus,errorThrown 실패 파라미터 
    })
  });




선생님 말씀해주신대로 id를 없에고 class로 바꾸었는데도 똑같이 첫번째 비고란만 작성이되고 두번쨰 비고란은 작성이 되지 않습니다.

혹시 해결방법이 있을까요?? 알려주시면 감사하겠습니다 ㅠㅠ

[유정현]

콘솔 찍어 보니까 반복되는 인풋 데이터를 가져오지 못하고 첫번째 인풋데이터만 가져오는거 같습니다. 버튼의 data-id 처럼 인풋도 data -id를 입력하여  id에 해당하는 내용을 가져올 수 있는 방법은 없을까요?

[codingapple]

$('클래스명') 입력하면 클래스명가진 모든요소를 찾아옵니다 
var 비고내용 = $(e.target).siblings("td").find("textarea").val() 합시다

[유정현]

   <% for (var i = 0; i < samgong.length; i++){ %>
                
                <tr>
                  <th scope="row"><%= samgong[i]._id %> </th>
                <td><%= samgong[i].기종 %></td>
                <td><%= samgong[i].C넘버 %></td>
                <td><p><%= samgong[i].사용자 %></p><span style="display: <%= samgong[i].display %>">이전사용자 : <%= samgong[i].이전사용자 %></span><p style="color: <%= samgong[i].color %>"><%= samgong[i].date %></p></td>
                <td> <button class="btn use" data-id="<%= samgong[i]._id %>">사용</button><button class="btn cencel" data-id="<%= samgong[i]._id %>">반납</button> </td>
                
                <td> <textarea class="bigotext" placeholder="<%= samgong[i].비고 %>" rows="3" name="bigo2"></textarea>
                     <button type="button" class="btn btn-secondary bigobtn" data-id="<%= samgong[i]._id %>">저장</button>
                </td>
              </tr>
              <% } %>

$('.bigobtn').click(function(e){
        var 글번호 = e.target.dataset.id;
        var 비고내용 = $(e.target).siblings("td").find("textarea").val()
    console.log(비고내용)
        $.ajax({
      method : 'POST',
      url : '/dronebigo',
      data : { _id : 글번호, bigo2 : 비고내용 }
      
    }).done(function(결과){
      console.log('.')
      window.location = "/list";

      //AJAX 성공시 실행할 코드는 여기
      //지금누른거 부모중에 li가 있으면 사라지게해줘라

    }).fail(function(a,b,c){
      console.log(a,b,c)

      //xhr, textStatus,errorThrown 실패 파라미터 
    })
  });

선생님 말씀하신대로 수정을 하였는데 textarea에 입력된 값이 console에 찍히지 않고 데이터 저장도 안됩니다 ㅠㅠ

제가 잘못한 입력한 부분이 있을까요?

[유정현]

var 비고내용 = $(e.target).siblings("td").find("textarea").val()

이렇게도 해보고
var 비고내용 = $("bigotext").siblings("td").find("textarea").val()

이렇게도 해보고

var 비고내용 = $("e.target").siblings("td").find("input[name=bigo2]").val()

이렇게도 해보았습니다.

[codingapple]

 $("e.target").siblings("texarea").val() 해봅시다

[글쓴이]

글