[javascipt]Button Dropdownmenu <a name="value"> to Form Post

대충 웹 페이지를 만들다가, 버튼들을 만들고 해당 버튼을 누르면 각각의 name들을 서버로 보내고, 보내진 데이터들을 토대로 

특정 동작을 실행하려고  했다.

 

php에서 아래와 같이 작성했다.

<form method="POST" action="/file_list">                 <button type="submit" name="read"  class="btn btn-primary"><i class="fas fa-eye"></i> 조회</button>                 <button type="submit" name="add"  class="btn btn-success"><i class="fas fa-plus-circle"></i>더하기</button>               <button class="dropdown btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">                 <a class="dropdown-item" href="#"  name="action">Action</a>                 <a class="dropdown-item" href="#"   name="action2">Action2</a>             </div> <i class="fas fa-edit"></i>수정</button>                 <button type="submit" name="delete"  class="btn btn-danger"><i class="fas fa-trash-alt"></i>파일 삭제</button>                 <button type="submit" name="download"  class="btn btn-dark"><i class="fas fa-download"></i> 파일 다운로드</button>             </form>

대충 이런 느낌이다, 버튼을 누르면 -> submit ->  form -> post to server로 button name들이 넘어가고,

button_names = request.form.keys()

를 사용해서 전송된 데이터들을 볼 수 있다.  여러개면 for문을 사용해서 원하는 값을 찾을 수 있다.

 

 

문제는  <a>부분인데,  <a>를 <button>으로 바꾸게 되면 bootstrap에서 제공하는 dropdownmenu동작이 안되는 것은  물론 원하는 모양이 나오질 않고, a를 써서 일일히 href를 지정하자니  너무 귀찮아  졌다.

 

-방법-

onclick을 사용하고 <script>를 사용해서 특정  동작을 수행하려고 한다.

다른건  고칠 필요가 없거, a부분만 수정하면 된다.

<a class="dropdown-item" href="#"  onclick="sendNameToServer(event)" name="action">Action</a>  <a class="dropdown-item" href="#"   onclick="sendNameToServer(event)"  name="action2">Action2</a>

</body> <script> function sendNameToServer(event) {     event.preventDefault(); // Prevent the default action of the link     var name = event.target.getAttribute("name"); // Get the name attribute of the clicked element     // Create a hidden form dynamically     var form = document.createElement("form");     form.method = "POST";     form.action = "/file_list";     // Create an input field for the name     var nameInput = document.createElement("input");     nameInput.type = "hidden";     nameInput.name = name;     // Append the input field to the form     form.appendChild(nameInput);     // Append the form to the document body and submit it     document.body.appendChild(form);     form.submit(); } </script> </html>

 

이렇게 하면, button을 눌렀을때  해당하는  name값을 서버에 보낸것과  동일하게  서버에서 조회가 가능하다.

 

끝.