提交 AJAX Post onchange [英] Submit AJAX Post onchange

问题描述

我试图弄清楚为什么这不起作用，我不想有一个提交按钮来点击，如果我有一个它确实有效，而是我使用 onchange="this.form.submit()" 并像往常一样发布表单，而不是 AJAX 背景样式，我没有编写 ajax 部分的代码，我找到了它并使其适用于我的情况，但就我而言知道 $('#ajaxform').submit(function()，submit 就是提交?为什么不是 onchange="this.form.submit()" 和 <input type="submit"/> 相同类型的提交?我错过了什么?

 
@* -------- Div 保存表单元素 -------- *@<div class="reportDateDiv">@*  -  -  -  -  文本  -  -  -  - - *@<a class="blackColor fSize18 RPtxt">报告期</a>@* -------- 开始日期框 -------- *@<input type="text" name="inputDate" spellcheck="false" class="datepickerS metricDateTextbox capitalFirst"onchange="this.form.submit()" 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="datepickerE metricDateTextbox capitalFirst"onchange="this.form.submit()" value="@endDate" autocomplete="off" placeholder="@noEndDate.ToString("MMM d, yyyy")" readonly="readonly"/>

</表单><script type="text/javascript">$('#ajaxform').submit(function () {//捕获表单的提交事件$.ajax({//创建一个 AJAX 调用...data: $(this).serialize(),//获取表单数据类型:$(this).attr('method'),//GET 或 POSTurl: $(this).attr('action'),//要调用的文件成功:功能(响应){//成功..$('#here').html(响应);//更新 DIV}});返回假；//取消原始事件以防止表单提交});

解决方案

在你的表单中使用:

把脚本改成这样:

function mySubmit(theForm) {$.ajax({//创建一个 AJAX 调用...data: $(theForm).serialize(),//获取表单数据类型:$(theForm).attr('method'),//GET 或 POSTurl: $(theForm).attr('action'),//要调用的文件成功:功能(响应){//成功..$('#here').html(响应);//更新 DIV}});}

I'm trying to figure out why this isn't working, I don't want to have a submit button to click, It does work if I have one though, instead I use onchange="this.form.submit()" and that posts the form as it normally would, not AJAX background style, I didn't code the ajax part, I found it and made it work for my situation, but as far as I know $('#ajaxform').submit(function (), submit is submit? Why isn't onchange="this.form.submit()" and <input type="submit" /> the same type of submit? What am I missing?

    <form method="post" action="~/getAJAX.cshtml" id="ajaxform" name="form">
        @* -------- Div to hold form elements -------- *@
        <div class="reportDateDiv">

            @* -------- Text --------- *@
            <a class="blackColor fSize18 RPtxt">Reporting Period</a>

            @* -------- Start day box -------- *@
            <input type="text" name="inputDate" spellcheck="false" class="datepickerS metricDateTextbox capitalFirst"
                  onchange="this.form.submit()" value="@inputDate" autocomplete="off" placeholder="@placeholderStartDate.ToString("MMM d, yyyy")" readonly="readonly" />

            @* -------- Text --------- *@
            <a class="blackColor fSize16 RPtxt RPtxtTo">to</a>

            @* -------- End day box --------- *@
            <input type="text" name="endDate" spellcheck="false" class="datepickerE metricDateTextbox capitalFirst"
                  onchange="this.form.submit()" value="@endDate" autocomplete="off" placeholder="@noEndDate.ToString("MMM d, yyyy")" readonly="readonly" />

        </div>
    </form>

    <script type="text/javascript">
        $('#ajaxform').submit(function () { // catch the form's submit event
            $.ajax({ // create an AJAX call...
                data: $(this).serialize(), // get the form data
                type: $(this).attr('method'), // GET or POST
                url: $(this).attr('action'), // the file to call
                success: function (response) { // on success..
                    $('#here').html(response); // update the DIV
                }
            });
            return false; // cancel original event to prevent form submitting
        });
    </script>

解决方案

Use this in your form:

<input ... onchange="mySubmit(this.form)" ... >

Change the script to this:

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
        }
    });
}

这篇关于提交 AJAX Post onchange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！