To enhance the design, I wish for a <li> element to be clickable when selecting an option to view data. Hence, I have embedded hidden inputs inside it and am contemplating whether I can assign a value to the clicked hidden input using onclick event, and then retrieve this value on my AJAX page with
var getVal = Request.Form["clickedInput"];My goal is for only the currently clicked item to hold the value. If another tab within the same <li> is clicked, then the initial value should be removed from the first tab and assigned to the newly clicked tab instead. Does this make sense?
Below is the code snippet containing the form that includes the <li>.
<form method="post" action="~/AJAXcalls/repinintAJAX.cshtml" name="form">
<div class="reportDateDiv">
<a class="blackColor fSize18 RPtxt">Reporting Period</a>
<input type="text" name="inputDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst"
onchange="mySubmit(this.form)" value="@inputDate" autocomplete="off" placeholder="@placeholderStartDate.ToString("MMM d, yyyy")" readonly="readonly" />
<a class="blackColor fSize16 RPtxt RPtxtTo">to</a>
<input type="text" name="endDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst"
onchange="mySubmit(this.form)" value="@endDate" autocomplete="off" placeholder="@noEndDate.ToString("MMM d, yyyy")" readonly="readonly" />
<select name="NormOrAvg" class="dwmViewSelect" onchange="mySubmit(this.form)">
<option selected=@(Request.Form["NormOrAvg"] == "1") value="1">Rep Per Set</option>
<option selected=@(Request.Form["NormOrAvg"] == "2") value="2">Average Rep Per Set</option>
</select>
</div>
<div class="holdLiftMenu">
<ul class="holdLiftMenuUL">
<li class="holdLiftMenuLI">
<a class="holdLiftMenuA total current">Total
<input type="hidden" name="hid4" id="hid4" value="" />
</a>
</li>
<li class="holdLiftMenuLI">
<a class="holdLiftMenuA squat">Squat
<input type="hidden" name="hid1" id="hid1" value="" />
</a>
</li>
<li class="holdLiftMenuLI">
<a class="holdLiftMenuA benchpress">Benchpress
<input type="hidden" name="hid2" id="hid2" value="" />
</a>
</li>
<li class="holdLiftMenuLI">
<a class="holdLiftMenuA deadlift">Deadlift
<input type="hidden" name="hid3" id="hid3" value="" />
</a>
</li>
</ul>
</div>
</form>
The following script linked to the <li> elements merely toggles their visibility based on clicks. I also aim to include value assignment/removal in the same click event if feasible.
$(document).ready(function () {
$(".total").click(function () {
$("#piechart").show();
$("#piechartS").hide();
$("#piechartB").hide();
$("#piechartD").hide();
});
$(".squat").click(function () {
$("#piechart").hide();
$("#piechartS").show();
$("#piechartB").hide();
$("#piechartD").hide();
});
$(".benchpress").click(function () {
$("#piechart").hide();
$("#piechartS").hide();
$("#piechartB").show();
$("#piechartD").hide();
});
$(".deadlift").click(function () {
$("#piechart").hide();
$("#piechartS").hide();
$("#piechartB").hide();
$("#piechartD").show();
});
});
I lack proficiency in JavaScript and jQuery; any guidance on modifying the script to enable value manipulation upon clicking would be greatly appreciated.
Please note that I utilize cshtml and it does not involve MVC!