我试图弄清楚为什么当我用ajax代码发布时会得到这样的结果。
如您所见,在我表单中的大多数内容上,我使用 onchange="mySubmit(this.form)"
或onclick="mySubmit(this.form)"
使用ajax提交我的表单,所以这适用于输入元素,它返回所有正确的div和内容到我的div中,该div应该显示返回的所有数据。
但是,在我的 <li>
在 form
的底部我还有onclick="mySubmit(this.form)"
,但它不起作用,由于某种原因,它在将显示我的数据的 div 中显示我的整个页面,这在我看来很奇怪,我可以以某种方式用我的 <li>
以任何其他方式发布 onclick 吗? ?
HTML代码:
<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 代码:
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
}
});
}
最佳答案
这是因为在 li
中,最后一个引用元素本身,而最后一个没有 form
属性,导致未定义。
将所有 onchange/onclick="mySubmit(this.form)
替换为 onchange/onclick="mySubmit(this);
并更改您的 mySubmit
函数:
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
}
});
}
以上示例片段:
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>
关于javascript - AJAX 发布 onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42549547/