从输入发送值

I'm having some trouble here with the logic. I'm using Ajax to POST my form and I'm trying to send some values the correct way.

This is my form.

<form method="post" action="~/AJAXcalls/callajaxagain.cshtml" name="form">
    <div class="reportDateDiv">

        <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" />

        <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>

        <input onclick="mySubmit(this.form)" class="testthis" type="text" spellcheck="false" autocomplete="off" name="lift" value="Squat" readonly="readonly" />
        <input onclick="mySubmit(this.form)" class="testthis" type="text" spellcheck="false" autocomplete="off" name="lift" value="Benchpress" readonly="readonly" />
        <input onclick="mySubmit(this.form)" class="testthis" type="text" spellcheck="false" autocomplete="off" name="lift" value="Deadlift" readonly="readonly" />
    </div>
</form>

So what I am trying to achieve is that, the last three inputs in my form is designed as "buttons", this might be weird but as I said, im having trouble figuring this out in a good way, anyhow, the value of these three are Squat, Benchpress and Deadlift, I really only want to send the value of the one being clicked, because on the page that is called by the ajax will show some charts, and depending on what I click I want it to show the matching chart.

What happens right now is that if I var type = request.form["lift"]; on the ajax page, the result will be "squat,benchpress,deadlift", so it sends all values, I only want to send the one I click, I know it gives me all because they all have the same name="", but I dont know how to solve this?

Using razor(cshtml) and its not a MVC project.

The way, I would do this:

1. Change these to buttons like so:

<button id="squats"></button> [...]

2. If you already've done that, do the following: (add some id to your form)

document.getElementById('my-form').addEventListener('click', function (event) {

var target = event.target; var optionChoosen

if (target.tagName == 'BUTTON') {

optionChoosen = target.id;

}