AJAX发布onclick

Question

I am trying to figure out why I get the result I do when I post with my ajax code.

As you can see, on most things in my form I use onchange="mySubmit(this.form)" or onclick="mySubmit(this.form)" to submit my form with ajax, so this works for the input elements, it returns all the right divs and stuff into my div that is supposed to show all the data thats returned.

However, in my <li> at the bottom of the formI also have onclick="mySubmit(this.form)", but it doesn't work, it for some reason displays my whole page inside the div that will display my data, which imo is quite weird, can I somehow post onclick any other way with my <li>?

HTML code :

        <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>
    </div>
    <div class="holdLiftMenu">
        <ul class="holdLiftMenuUL">
            <li class="holdLiftMenuLI">
                <a class="holdLiftMenuA total current">Total
                    <input type="hidden" name="hid4" id="hid4" value="4" />
                </a>
            </li>
            <li class="holdLiftMenuLI">
                <a onclick="mySubmit(this.form)" class="holdLiftMenuA squat">Squat
                    <input type="hidden" name="hid1" id="hid1" value="" />
                </a>
            </li>
            <li class="holdLiftMenuLI">
                <a onclick="mySubmit(this.form)" class="holdLiftMenuA benchpress">Benchpress
                    <input type="hidden" name="hid2" id="hid2" value="" />
               </a>
            </li>
            <li class="holdLiftMenuLI">
                <a onclick="mySubmit(this.form)" class="holdLiftMenuA deadlift">Deadlift
                    <input type="hidden" name="hid3" id="hid3" value="" />
                </a>
            </li>
        </ul>
    </div>
</form>

JS Ajax code:

function mySubmit(theForm) {
    $.ajax({ // create an AJAX call...
        data: $(theForm).serialize(), // get the form data
        type: $(theForm).attr('method'), // GET or POST
        url: $(theForm).attr('action'), // the file to call
        success: function (response) { // on success..
            $('#here').html(response); // update the DIV
        }
    });
}

Answer 1

This is because in the li this last refer to element it self and this last does not have form attribute which results undefined .

Replace all your onchange/onclick="mySubmit(this.form) by onchange/onclick="mySubmit(this); and also change your mySubmit function to :

function mySubmit(theForm) {
    theForm = $(theForm).closest("form");
    $.ajax({ // create an AJAX call...
        data: $(theForm).serialize(), // get the form data
        type: $(theForm).attr('method'), // GET or POST
        url: $(theForm).attr('action'), // the file to call
        success: function (response) { // on success..
            $('#here').html(response); // update the DIV
        }
    });
}

above sample snippet :

function mySubmit(theForm) {
        console.log($(theForm).closest("form").attr("action"));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="~/AJAXcalls/repinintAJAX.cshtml" name="form">

  <div class="holdLiftMenu">
        <ul class="holdLiftMenuUL">
            <li class="holdLiftMenuLI">
                <a class="holdLiftMenuA total current">Total
                    <input type="hidden" name="hid4" id="hid4" value="4" />
                </a>
            </li>
            <li class="holdLiftMenuLI">
                <a onclick="mySubmit(this)" class="holdLiftMenuA squat">Squat
                    <input type="hidden" name="hid1" id="hid1" value="" />
                </a>
            </li>
            <li class="holdLiftMenuLI">
                <a onclick="mySubmit(this)" class="holdLiftMenuA benchpress">Benchpress
                    <input type="hidden" name="hid2" id="hid2" value="" />
               </a>
            </li>
            <li class="holdLiftMenuLI">
                <a onclick="mySubmit(this)" class="holdLiftMenuA deadlift">Deadlift
                    <input type="hidden" name="hid3" id="hid3" value="" />
                </a>
            </li>
        </ul>
    </div>
</form>

</div>