从输入发送值

Question

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.

Answer 1

The way, I would do this:

1. Change these to buttons like so:

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

1. 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;

}