[英]React input component trying to use e.preventdefault() to prevent form submission, setting it on input and form both not working
[英]Form still submits, trying to use e.preventDefault();
所以我有这个表格。 我想检查用户是否有验证码,但是有问题。 这是检查功能的表格。
<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup" onsubmit="check_if_capcha_is_filled()">
这是确定doSubmit(验证码)是否已通过验证的函数。
function check_if_capcha_is_filled(e){
if(doSubmit) return true;
e.preventDefault();
alert('Fill in the capcha!');
return false;
};
但我得到一个错误
Uncaught TypeError: Cannot read property 'preventDefault' of undefined
at check_if_capcha_is_filled
有什么指向我所缺少的东西吗? 谢谢。
您的e.preventDefault使用不正确。 它不会执行任何操作,因为您要将事件传递给函数,想要将其附加到事件处理程序,如下所示:
$('form').on('submit', function(e)
{
e.preventDefault();
//rest of code
})
这将停止提交操作。
这是你想要的吗?
<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup">
然后在您的js文件中:
function check_if_capcha_is_filled(){
if (doSubmit){
return true;
}else{
return false;
}
};
$('#myForm').on('submit', function(e){
if (!check_if_capcha_is_filled){
e.preventDefault();
}
});
您在这里有两个问题。 首先,您需要从onsubmit
事件属性中return
函数。 其次,您没有将事件传递给函数-但这仅在全局事件可用的情况下才起作用,即。 不是Firefox。
要解决此问题并改善逻辑,您可以使用addEventListener()
毫不干扰地将事件处理程序添加到元素中,并删除过时的on*
事件属性。 尝试这个:
var doSubmit = false; document.getElementById('myForm').addEventListener('submit', function(e) { if (doSubmit) return; e.preventDefault(); alert('Fill in the capcha!'); });
<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup"> <button type="submit">Submit</button> <form>
如果您要确认提交,请使用jQuery。
<button name="delete" class="submitbutton">Delete</button>
$('.submitbutton').click(function() {
var buttonpressed;
buttonpressed = $(this).attr('name');
var r = confirm("Please confirm to " + buttonpressed );
if (r == true) {
$('#yourformid').submit();
} else {
return (false);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.