使用 Javascript 单击锚标记时，如何更改输入标记的值、名称和占位符？

Question

<div class="filter_search">
      <button class="fas fa-filter circle-icon"></button>
      <ul>
        <li><a href="#">Events</a></li>
        <li><a href="#">Users</a></li>
      </ul>
  </div>

The above code opens a drop down menu. When I click on Users, I want to change the following input tag's placeholder value to 'Search Users' and 'Search Events' when Events is clicked. Also I want to change the name and value also.

Input form:

<form method="GET">
         <input id="searchBar" class="form-control" type="text" placeholder="Search Events" name="q_posts" value="{{ request.GET.q_posts }}">
         <input type="submit" value="Search">
     </form>

CSS for opening the drop down menu:

.filter_search ul{
    position: absolute;
    color: #FFFFFF;
    background: #FFFFFF;
    box-shadow: 4px 4px 20px rgba(26, 60, 68, 0.09);
    border-radius: 10px;
    margin-top: 2px;
    padding: 6px; 
    width: 120px;
    height: 65px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    list-style: none;
    opacity: 0;
    pointer-events: none;
    transition: .1s ease;
    transform: translateY(10px); 
}
.filter_search button:focus + ul{
    opacity: 1;
    pointer-events: all;
}
 

Is it possible to do so?

Answer 1

 $(".link-list a").click(function(){ linkTxt = $(this).text(); $("#searchBar").attr("placeholder","Search "+linkTxt).attr("name",linkTxt); // to change value uncomment below // $("#searchBar")..attr("value",linkTxt); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="filter_search"> <button class="fas fa-filter circle-icon"></button> <ul class="link-list"> <li><a href="#">Events</a></li> <li><a href="#">Users</a></li> </ul> </div> <form method="GET"> <input id="searchBar" class="form-control" type="text" placeholder="Search Events" name="q_posts" value=""> <input type="submit" value="Search"> </form>

Please use this.