[英]Unexpected JavaScript (jQuery) Behavior (Function call, rather than Form submit)
Okay, I don't get this. 好吧,我不明白这一点。
I have a specific type of form-declaration, jQuery will always process the Form Data and sends an Ajax-Request, but inside the form, I have Buttons, once for Form-Submission (Ajax) and once for calling specific Functions. 我有特定类型的表单声明,jQuery将始终处理表单数据并发送Ajax-Request,但是在表单内部,我有Buttons,一次用于表单提交(Ajax),一次用于调用特定函数。 Like so:
像这样:
<button data-click="regenUSID">Regenerate</button>
Both called like so in jQuery: 两者在jQuery中都这样调用:
$(function() {
$('form.ajax').submit(function(event) {
event.preventDefault();
var data = $(this).serializeArray();
// do stuff with data
});
$('[data-click]').click(function(event) {
// prevents form submit
event.preventDefault();
// calls defined function and passes element that got clicked on
window[$(this).attr('data-click')](this);
});
});
Now the strange thing, if I click the data-click Button, it works, if I click the intended submit-button, it also works, but if I have a normal input text field inside the form and press return, to "submit" the form, it does whatever the first button does in the form, conclusion, if the form-submit button is before the data-click button, everything works just fine, but if the data-click button is before the submit button (wich it is!), the data-click function will be called. 现在奇怪的是,如果我单击数据单击按钮,它会起作用,如果我单击预期的提交按钮,它也会起作用,但是如果我在表单中有一个普通的输入文本字段并按回车键,则可以“提交”表单,它执行表单中第一个按钮所做的任何操作,结论,如果表单提交按钮位于数据单击按钮之前,则一切正常,但如果数据单击按钮位于提交按钮之前(将其夹持)是!),则将调用数据点击功能。
One way to fix this, is to start the form with a hidden submit button, although that ruins the HTML. 解决此问题的一种方法是使用隐藏的提交按钮启动表单,尽管这会破坏HTML。
All in all, it can look like this: 总而言之,它看起来可能像这样:
<form class="ajax" action="/formhandler.php?register" method="POST" role="form">
<div class="usidrecommendation">
<?php $usid = Server::generateUnusedUSID(); ?>
<h1 class="text-center"><?php echo $usid; ?></h1>
</div>
<button data-click="regenUSID">Regenerate</button>
<input type="password" name="password" id="password" placeholder="enter Password here">
<button class="btn btn-primary btn-block btn-submit">Check data</button>
</form>
<script>
function regenUSID(from) {
// do stuff
console.log(from);
}
$(function() {
$('form.ajax').submit(function(event) {
event.preventDefault();
var data = $(this).serializeArray();
// do stuff with data
});
$('[data-click]').click(function(event) {
// prevents form submit
event.preventDefault();
// calls defined function and passes element that got clicked on
window[$(this).attr('data-click')](this);
})
});
</script>
Note that every form with the class ajax, should never be submitted "as is", it always has to do a ajax-submission and goes through the JavaScript. 请注意,每个带有ajax类的表单都绝不能“按原样”提交,它总是必须进行ajax提交并通过JavaScript。 The client always has JavaScript enabled, don't worry about that.
客户端始终启用JavaScript,不必担心。
The default type for a button is submit
so when you press enter in a text box its like clicking the first button. 按钮的默认类型是
submit
因此当您在文本框中按Enter时,就像单击第一个按钮一样。 Try: 尝试:
<button data-click="regenUSID" type="button">Regenerate</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.