weixin_33693070 2017-03-02 07:48 采纳率: 0%
浏览 22

AJAX发布onclick

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
        }
    });
}
  • 写回答

1条回答 默认 最新

  • 零零乙 2017-03-02 08:00
    关注

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

报告相同问题?

悬赏问题

  • ¥30 求一下解题思路,完全不懂。
  • ¥30 关于#硬件工程#的问题:求一下解题思路
  • ¥15 运筹学对偶单纯行法构造扩充问题
  • ¥20 XP系统的老电脑一开机就提示找不到rundll.exe,付费求解
  • ¥15 milvus查询出来的score怎么转换成0-1之间的相似性
  • ¥15 多ip服务器站群如何搭建l2tp服务器
  • ¥15 lvgl V9移植到linux开发板
  • ¥15 VB.net中在窗体中创建一个button控件来关闭窗体,但是提示错误,我该怎么办
  • ¥15 网上下载好的程序但是arduinoIDE编程报错,运行不了,哪里出错了,能具体给改一下吗
  • ¥15 Sharepoint JS开发 付费技术指导