<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?
$(".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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.