[英]HTML Form Submit does not reach my javascript
I am trying to reach my javascript code when I press the submit button within my form and it is not triggering my javascript code at all. 当我按下表单中的“提交”按钮时,我试图获取我的JavaScript代码,而这根本没有触发我的JavaScript代码。 So I got this form within my Bootstrap Modal using the following code: 因此,我使用以下代码在Bootstrap Modal中获得了此表单:
<form id="updateUserForm">
<div class="form-group">
<label for="firstName">First name:</label>
<input type="text" class="form-control" id="firstnameModalInput" />
</div>
<div class="form-group">
<label for="middleName">Middle name:</label>
<input type="text" class="form-control" id="middlenameModalInput" />
</div>
<div class="form-group">
<label for="lastName">Last name:</label>
<input type="text" class="form-control" id="lastnameModalInput" />
</div>
<div class="form-group">
<label for="mobileNumber">Mobile number:</label>
<input type="text" class="form-control" id="mobilenumberModalInput" />
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" class="form-control" id="emailModalInput" />
</div>
<div class="form-group">
<label for="Enabled">Enabled:</label>
<input type="checkbox" class="form-control" id="enabledModalInput" style="width:34px" />
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-default" data-dismiss="modal" id="submit" value="Apply" />
</div>
</form>
And the javascript code I have: 还有我拥有的javascript代码:
$('document').ready(function(){
$("#updateUserForm").submit(function (event) {
console.log("Method entered");
event.preventDefault();
var serialize = $("#updateUserForm").serialize();
$.ajax({
type: "POST",
data: serialize,
url: "/Dashboard/UpdateUser",
datatype: JSON,
succes: function (data) {
console.log("succes!");
console.log(data);
},
error: function (data) {
console.log("error");
console.log(data);
}
})
})
})
I have another function in that javascript that is used to populate the input fields and that works fine, so I guess the HTML can reach the javascript file. 我在该javascript中有另一个函数,该函数用于填充输入字段并且可以正常工作,因此我猜HTML可以到达javascript文件。 But it does not reach the javascript submit function (it doesn't do the console.log for example) . 但是它没有达到javascript提交功能(例如,它没有执行console.log)。 Does anyone have an idea what I am doing wrong? 有人知道我在做什么错吗?
EDIT: 编辑:
I have been playing around a bit more, and it seems that I can acces the javascript method when I try to reach it from outside of the bootstrap modal, it goes wrong somewhere within the modal. 我玩的更多了,当我尝试从引导程序模态之外访问它时,似乎可以访问javascript方法,但该模态内的某个地方出错了。
Use return false instead of prevent default end of the function and change the submit function with on function . 使用return false代替防止函数的默认结束,并使用on function更改Submit 函数 。
$('document').ready(function(){
$("#updateUserForm").on("submit", function () {
console.log("Method entered");
var serialize = $("#updateUserForm").serialize();
$.ajax({
type: "POST",
data: serialize,
url: "/Dashboard/UpdateUser",
datatype: JSON,
succes: function (data) {
console.log("succes!");
console.log(data);
},
error: function (data) {
console.log("error");
console.log(data);
}
})
return false;
})
})
try this 尝试这个
$("#updateUserForm").on('submit', function (e) {
e.preventDefault();
});
Can you please try below code. 您可以尝试下面的代码吗? and please check post URL"/Dashboard/UpdateUser" is right? 并检查发布网址“ / Dashboard / UpdateUser”是否正确?
$("#UpdateUserForm").submit(function (e)
{
var isValid = $("#UpdateUserForm").valid();
if (!isValid)
return;
//This is important as it prevents the form being submitted twice
e.preventDefault();
$.ajax({
type: "POST",
url: "/Dashboard/UpdateUser",
data: $("#UpdateUserForm").serialize(),
success: function (response)
{
var status = '';
status = response.Status;
console.log("succes!");
console.log(data);
}
})
.error(function () {
console.log("error");
console.log(data);
});
});
$("#updateUserForm").on('submit', function (e) {
e.preventDefault();
});
Or use action properties in form. 或使用表单的动作属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.