由于按钮的利益冲突,表单不会提交
Form won't submit due to button's conflicting interests
我的网站有一个简单的表单,与MailChimp链接。问题是表单的提交按钮具有冲突的利益,具体来说,有javascript电子邮件字段验证代码要求按钮在按钮代码中写入type="submit"
。但是如果我包含type=submit
,它会阻止我的表单提交给MailChimp。
这是 2 种形式的按钮代码。第一个是允许javascript错误验证工作但提交到MailChimp不起作用的形式(注意类型)
<button class='buttonmain' type="submit" >Submit Form</button>
第二个表单没有type="submit",所以js验证不起作用,但它会提交给MailChimp:
<button class='buttonmain'>Submit Form</button>
这是完整表格
<form id="form-signup_v1"
name="form-signup_v1"
method="POST"
action="http://mysite.us10.list-manage.com/subscribe/post"
>
<!-- MailChimp Code -->
<input type="hidden" name="u" value="g02362223cdaf329adf5">
<input type="hidden" name="id" value="32da65235dba0">
<div class="errorstyle">
<div class="field">
<div class="ui left labeled input">
<input id="MERGE0"
name="MERGE0"
placeholder="My Email Address"
type="text"
data-validation="[EMAIL]">
<div class="ui corner label">
<i class="asterisk icon">*</i>
</div>
</div>
</div>
</div>
<button class='buttonmain' type="submit" >Submit</button>
</form>
下面是用于验证电子邮件字段的脚本。注意它是如何调用"提交"的。
<script>
$('#form-signup_v1').validate({
submit: {
settings: {
inputContainer: '.field'
},
callback: {
onBeforeSubmit: function (node) {
myBeforeSubmitFunction(':D', ':)', node);
},
onSubmit: function (node) {
console.log('#' + node.id + ' has a submit override.');
//node.submit();
}
}
},
debug: true
});
function myBeforeSubmitFunction(a, b, node) {
console.log(a, b);
$(node).find('input:not([type="submit"]), select, textarea').attr('readonly', 'true');
$(node).append('<div class="ui active loader"></div>');
}
$('#prefill-signup_v1').on('click', function () {
var form = $(this).closest('form');
form.find('#signup_v1-name').val('John Doe');
form.find('#signup_v1-username').val('RocketJoe');
form.find('#signup_v1-password').val('test123');
form.find('#signup_v1-password-confirm').val('test123');
form.find('#signup_v1-email').val('test@test.test');
form.find('#signup_v1-email-confirm').val('test@test.test');
});
</script>
如何组合我在开头发布的 2 个按钮代码表单,以便表单使用 js 验证并提交给 MC?
非常感谢!
我自己做了以下事情解决了它:
更改脚本以包括:
function myBeforeSubmitFunction(a, b, node) {
document.getElementById("form-signup_v1").submit();
相关文章:
- HTML表单提交时未执行外部函数
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 将图像上传ajax与表单提交ajax相结合
- Javascript无法处理表单提交
- 如何在我的情况下禁用表单提交
- 加载后的页面与ajax表单提交不起作用
- angularjs-控制器在表单提交时未调用
- 禁用带有字符白名单的表单提交
- 如何使用Google Analytics跟踪表单提交
- 使用javascript将表单提交到iframe目标中
- e.preventDefault在表单提交时被忽略
- AngularJS JQuery Ajax表单提交等效
- JavaScript表单提交帮助
- PHP表单提交和重定向
- 当所有输入文本字段都为空时,禁止表单提交,但当jquery中的任何字段不为空时允许提交
- setTimeOut AFTER jQuery表单提交
- 从函数中选择要触发表单提交的正确元素
- JavaScript表单提交没有't fire asp服务器端点击功能的提交按钮
- 表单提交问题,如何在我的URL末尾获得ID的值
- Javascript使用Confirm取消表单提交